vue组件的is特性
组件功能是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特性的更多相关文章
- 详解vue组件的is特性:限制元素&动态组件
在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...
- vue 组件属性props,特性驼峰命名,连接线使用
网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- Vue组件库的那些事儿,你都知道吗?
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- Vue组件的is具体用法
1.为什么要使用is 在vue的官网组件部分中,有明确的描述:当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因 ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
随机推荐
- 基于nc实现聊天
需要 Netcat(在网络上通过 TCP 或 UDP 读写数据),CentOS 6.x 系统中默认没有安装,经过测试,如果通过 yum 直接安装,运行时会有 “nc: Protocol not ava ...
- Tuning 16 Using Materialized view
物化视图表示在数据库的其他地方另外存放了一份as 后边的内容, 如果只是普通view, 那么 rowid 是相同的, view相当于指针, 它指向基表. 而物化视图的rowid 与基表是不一样的, 所 ...
- C#获取CPU编号
//System.Management;//需要添加引用(系统自带) /// <summary> /// 获取cpu编号 /// </summary> /// <retu ...
- 《linux系统及其编程》实验课记录(二)
实验 2:获取对使用命令的帮助 实验环境: 安装了 Red Hat Enterprise Linux 6.0 可运行系统,并且是成功验证系统.有另外一个无特权用户 student,密码 student ...
- 在WPF的DataGrid中对行添加单击事件
在做的一个c#的项目中发现Datagrid没办法直接对鼠标单击进行响应,调用MouseDown事件也需要点击某一行第二次才能响应.所以借助EventSetter来简单的实现了一个. 界面部分的代码 & ...
- Tweened Animations 渐变动作
Tweened Animations 渐变动作 Animations分两类: 第一类:渐变的(Tweened): 淡入淡出(Alpha),旋转(Rotate),移动(Translate),缩放(Sca ...
- 5、手把手教React Native实战之盒子模型BoxApp
用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式 
- Dart SDK在Linux上的下载及配置
Dart SDK在Linux上的下载及配置 首先建议想要学习Dart的小伙伴选择Linux开发环境比较好,具体原因就不多说了.如果想要尝试在Window或Mac上安装Dart SDK的话可以参考Ins ...