vue DOM模板解析
当使用 DOM 作为模板时 (例如,使用 el
选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意,像 <ul>
、<ol>
、<table>
、<select>
这样的元素里允许包含的元素有限制,而另一些像 <option>
这样的元素只能出现在某些特定元素的内部。
在自定义组件中使用这些受限制的元素时会导致一些问题,例如:
<table>
<my-row>...</my-row>
</table>
自定义组件 <my-row>
会被当作无效的内容,因此会导致错误的渲染结果。
变通的方案是使用特殊的 is
特性:
<table>
<tr is="my-row"></tr>
</table>
应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制:
<script type="text/x-template">
- JavaScript 内联模板字符串
.vue
组件
vue DOM模板解析的更多相关文章
- vue里面模板解析数据的时候
页面中新建信息的时候值之间有多个空格的时候 可以使用pre标签,你写了多少个空格,页面就会渲染出来 html解析 什么是pre标签
- 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...
- 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
- Vue源码解析(一):入口文件
在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- Vue2.0原理-模板解析
下面这段代码,vue内部做了什么操作?我去源码里面找找看 new Vue({ el: '#app' }) 入口 vue 的入口文件在 src/core/instance/index.js, 里面一进来 ...
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 【VUE】Vue 源码解析
Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的 ...
随机推荐
- JavaWeb开发小结
JavaWeb开发是B/S开发的一种,其他语言也可以实现,就前台而言,一直都是HTML.CSS.JavaScript 后台语言可以是Perl.Python.PHP.Java等等 Java机缘巧合在We ...
- TypeError: $.ajaxFileUpload(…) is not a function
今天做一个图片上传功能,用到了ajaxFileUpload,控制台报错TypeError: $.ajaxFileUpload(…) is not a function,都说是jQuery版本问题,也试 ...
- vmware esxi 查看网卡、Raid卡驱动
vmware esxi 查看网卡.Raid卡驱动 http://blog.51cto.com/adamcrab/1942763 查看网卡 [root@localhost:~] esxcfg-nics ...
- THUSC2018 爆零记
没想到我还真能过这个...... 太玄学了= = 不过这直接导致我月考数学挂科,掉出年级前十= = 5.26 THU过了! 真是十分意外的惊喜啊$-\omega-$ 6.1 今天出发去帝都! 然而飞行 ...
- [SDOI2010][bzoj1927] 星际竞速 [最小路径覆盖+费用流]
题面 传送门 思路 仔细观察题目要求的东西,发现就是求一个最小路径覆盖,只不过可以跳跃(就是那个鬼畜的超级跳跃) 那么就直接上最小路径覆盖模版 对每个点,拆成两个点$X_i$和$Y_i$,建立超级源超 ...
- linux系统初始化——sysinit文件写法详解
sysinit文件写法详解 sysinit文件是linux初始化文件系统时执行的第一个脚本文件.它主要做在各个运行级别中进行初始化工作,包括: 启动交换分区;检查磁盘;设置主机名;检查并挂载文件系统; ...
- Flask request获取参数问题
https://www.jianshu.com/p/ecd97b1c21c1 https://blog.csdn.net/lovebyz/article/details/52244330 https: ...
- Linux中的小括号和大括号,${}/$()/()/{}/${var:-string}/${var:=string}/${var:+string}/${var:?string}/${var%pattern}/${var#pattern}/${var%%pattern}/${var##pattern}
简单记录一下大小括号在Linux中的用处. 1.${var},这是Linux中变量的原形.所以$var,别忘记了你的本来面目. # a= # echo $a # echo ${a} # echo ${ ...
- .NET设计模式系列文章《转》
原文发布时间为:2008-11-02 -- 来源于本人的百度文章 [由搬家工具导入] http://www.cnblogs.com/Terrylee/archive/2006/07/17/334911 ...
- hdu 1385(Floyed+打印路径好题)
Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...