组件功能是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. Make Docker Image On Ubuntu17.10

    1.拉取基础镜像 docker pull ubuntu 2.查看镜像 docker images 3.启动一个容器 docker run -it ubuntu 4.查找运行的容器ID docker p ...

  2. Prerender Application Level Middleware - ASP.NET Core Middleware

    In the previous post Use Prerender to improve AngularJS SEO, I have explained different solutions at ...

  3. JavaScript中数组常用方法的总结

    JavaScript中数组Array常用的方法总结 标签(空格分隔): JavaScript ECMAScript数组给我们提供了许多常用的方法,便于我们对数组进行操作,下面,就来总结一下这些方法. ...

  4. eclipse 下安装 lombok.jar

    lombok是一个java 开发插件,可以用来简化代码, 1. 下载lombok.jar https://projectlombok.org/download 2 将lombok.jar文件放在ecl ...

  5. 关于OBJC

    http://www.objc.io/ objc这个站点是:关于objective-c语言的最佳实践和高阶技术的期刊. 看了几期非常不错,所以计划每天抽出时间翻译一篇文章和大家一起分享.

  6. uva414 - Machined Surfaces

    uva414 - Machined Surfaces /* 水题,值得一提的是,getline使用时注意不能让它多吃回车键,处理方法可以用getchar. */ #include <iostre ...

  7. [分享]JavaScript Quick Reference Card

    pdf文件:https://files.cnblogs.com/files/MakeView660/JavaScript_Quick_Reference_Card.pdf

  8. iOS-tableView本地动画刷新

    比如:就拿删除tableView中一个Cell为例子. // XXXTableViewCellDelegate - (void)tapDeleteHelloUser:(CJHelloTableView ...

  9. 为什么要使用docker

    1. 为什么要使用Docker Docker容器虚拟化的好处 Docker项目的发起人和Docker Inc.的CTO Solomon Hykes认为,Docker在正确的地点.正确的时间顺应了正确的 ...

  10. ArcGIS Runtime SDK for iOS开发系列教程(5)——要素信息的绘制

    在客户端绘制点.线.面要素是GIS应用的基本功能,这一讲我将向大家介绍在iOS中如何来实现这一功能.大家都知道在Flex.Silverlight.js中对于要素的绘制都有一个叫GraphicsLaye ...