组件功能是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. poj2391 Ombrophobic Bovines 拆点+二分法+最大流

    /** 题目:poj2391 Ombrophobic Bovines 链接:http://poj.org/problem?id=2391 题意:有n块区域,第i块区域有ai头奶牛,以及一个可以容纳bi ...

  2. 微信小程序4 - 几个ES6基础写法

    1. 默认参数 function demo(param){ param=param || {};} 新的写法,很直观 function demo(param={}){} 2. 简化方法,如你所见,de ...

  3. 13 jsp include

    假如您有一系列的页面, 每一个都拥有同样的导航栏, 联系信息和注脚, 好的解决方案是使用 jsp:include, 它可以将下面列出的任何内容插入到jsp的输出中: html 页面内容 纯文本文档的内 ...

  4. google cloud本地环境搭建

    1.SDK下载:https://cloud.google.com/sdk/downloads 2.项目选择与配置:https://cloud.google.com/datalab/docs/quick ...

  5. boost数据结构tuple

    boost数据结构tuple tuple(元组)定义了一个有固定数目元素的容器,其中每个元素类型可以不相同,这与其它容器有着本质的区别!vector和array虽然可以容纳很多元素,但是元素的类型必须 ...

  6. Windows应用程序运行权限设置

    在Vista以后的windows版本中,有些时候需要提升编译后生成程序的权限,即希望让生成的程序以管理员身份运行.虽然在一般情况下,可以使用鼠标右键选择的方式来强行以管理员身份运行,但它并没有屏蔽普通 ...

  7. Android系统开发(3)——Makefile的编写

    Makefile是什么? makefile的作用: 1.project文件组织,编译成复杂的程序 2.安装及卸载我们的程序 Makefile使用演示样例 在/home/username/makefil ...

  8. <转>RestKit在iOS项目中的使用,包含xcode配置说明

    本文转载至 http://www.cnblogs.com/visen-0/archive/2012/05/03/2480693.html 最近在iPhone工程中添加RestKit并编译,但是由于之前 ...

  9. 获取TXT文件,解决读取TXT乱码问题,查找所输入字是否在TXT文件中,

    /// <summary> /// 查看是否存在 /// </summary> /// <param name="str"></param ...

  10. ios 时间解析 差8个小时

    啥问题也有:小程序中web开发工具里显示时间正常,ios上显示的查8小时 原因: 使用 NSDate *date = [NSDate date]; 获取的时间是标注的UTC时间,和北京时间相差8小时. ...