组件功能是vue项目的一大特色。组件可以扩展html元素,可以封装可重用的代码,可以增加开发效率。它是自定义元素,vue.js的编译器为它添加特殊功能。有些情况,组件也可以是原生HTML元素的形式,以is特性进行扩展。

那么is特性究竟是什么呢?有什么用途呢?

其实简单的来说,因为vue模板就是dom模板,使用的是浏览器原生的解析器进行解析,所以dom模板的限制也就成为vue模板的限制了,要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制,所以导致有些组件没办法放在一些标签中,比如<ul></ul>  <select></select><a></a> <table></table>等等这些标签中,所以需要增加is特性来扩展,从而达到可以在这些受限制的html元素中使用。例如:

<ul>
<li is="my-component"></li>
</ul>

而不能使用下面的方式,因为下面的方式会将自定义组件<my-component>当做无效的内容,导致错误的渲染结果

<ul>
<my-component></mu-component>
<ul>

  其实两种写法表达的意思是一致,但是第二种写法是不合法的,会导致错误。

vue组件的is特性的更多相关文章

  1. 详解vue组件的is特性:限制元素&动态组件

    在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...

  2. vue 组件属性props,特性驼峰命名,连接线使用

    网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...

  3. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  4. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  5. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  6. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  7. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  8. Vue组件的is具体用法

    1.为什么要使用is 在vue的官网组件部分中,有明确的描述:当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因 ...

  9. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

随机推荐

  1. Missing artifact javax.transaction:jta:jar:1.0.1B解决办法

    maven库中缺少了这个jar,需要把这个jar安装到本地库中去. 1.下载包含此jar的zip包,地址: http://download.csdn.net/detail/spring123tt/68 ...

  2. 微信小程序,时间戳转为日期格式

    //数据转化 function formatNumber(n) { n = n.toString() ] ? n : ' + n } /** * 时间戳转化为年 月 日 时 分 秒 * number: ...

  3. Expectation Maximization(EM)算法note

    EM算法,之前上模式识别课上,推导过,在<统计学习方法>中没耐性的看过几次,个人感觉讲的过于理论,当时没怎么看懂,后来学lda,想要自己实现一下em算法,又忘记了,看来还是学的不够仔细,认 ...

  4. zend studio 10.6.2 字体大小 设置

    如果汉化的:窗体-->常规-->外观-->颜色和字体-->基本-->文字字体  点击编辑 如果未汉化:Window->Preferences->General ...

  5. 进程间通信之WM_COPYDATA方式反思,回顾和总结

    许多Windows程序开发者喜欢使用WM_COPYDATA来实现一些进程间的简单通信(笔者也正在学习共享内存的一些知识来实现一些更高级的通信),这篇文章描述了笔者在使用这项技术时候的一些总结以及所遇到 ...

  6. PDF解析。。。

    解析出PDF中的文字.用项目名称作Key取对应的值.. 正则匹配 .....:..\n

  7. linux memcache 安装

    一,安装所要的软件 wget http://www.monkey.org/~provos/libevent-1.2.tar.gz #下载libevent 下面是下载memcache服务哭端memcac ...

  8. secureCRT连接不上linux的当中一个最大的原因

    之前secureCRT一直连接不上linux(我的linux版本号是Ubuntu14.04.2.用的是VirtualBox).在网上找了各种办法.但是都解决不了我的问题! 网上的解决的方法不是说没有开 ...

  9. html input accept类型

    在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...

  10. ExtJs4学习(六)MVC中的Model

    Model定义的两种方式 第一种 Ext.define("User",{ extend:"Ext.data.Model", fields:[{ name:'us ...