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& ...
随机推荐
- 读取Properties文件六种方法
1.使用java.util.Properties类的load()方法 示例: InputStream in = lnew BufferedInputStream(new FileInputStream ...
- 基于Jquery的实现回车键Enter切换焦点
系统默认情况下,使用Tab按键切换页面元素的焦点,有没有想过回车键Enter也可以实现这种功能,并且具有良好的用户体验. 接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE ...
- 8、手把手教React Native实战之ReactJS组件生命周期
1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...
- 7.解决谷歌的SDK更新失败问题。
问题: 近期谷歌被墙之后,更新SDK老是失败.提示Download interrupted: Connection to https://dl-ssl.google.com refused(下载中断, ...
- pandas 读取文件
import pandas as pd import matplotlib.pyplot as plt data = pd.read_csv('G:timeCompare.txt', sep=' ', ...
- zoj3662(dp)
dp还是比较好想的,但是时间还是比较坑的. 要预处理还加些优化才行 . #include <stdio.h> #include <stdlib.h> #include < ...
- xmpp muc 群聊协议 1
翻译来自 :http://wiki.jabbercn.org/index.php?title=XEP-0045&variant=zh-cn#.E6.9C.AF.E8.AF.AD 通用术语 Af ...
- java倒序输出List
先贴代码 package com.tsubasa.collection; import java.util.ArrayList; import java.util.Arrays; import jav ...
- react 坑总结
1.react可以在里面直接更改state的变量 例如: 2.react 数组循环
- AutoArchive settings explained
AutoArchive settings explained Applies To: Outlook 2010 More... Less AutoArchive helps manage the sp ...