下面是按我的理解来写的,如有不太准确的地方,请指正。
vue中的模板来源有:
1、el选项指定的挂载元素在DOM内的HTML(DOM模板);
2、template选项;
3、单文件组件(.vue);
4、<script type="text/x-template">
文档中说,解析DOM模板时,应注意:
诸如<ul>、<ol>、<table>、<select>
这些html元素,出现在其内部的元素是有严格限制的。而<li>、<tr>、<option>
这些元素,也只能出现在某些特定元素内部。
那么当使用DOM模板时,在它里面使用这些有约束条件的元素时就会遇到一些问题。
例:
<table>
<blog-post-row></blog-post-row>
</table>
浏览器加载html文件,DOM解析器将html解析成DOM树。此时<blog-post-row>
会被当作无效内容,提升到<table>
之上,从而导致后面渲染错误。vue实例创建之后,发现没有template选项,就会将DOM中的el元素作为模板,然后将模板编译成render函数。
is特性提供了一个变通的方法:
<table >
<tr is="blog-post-row"></tr>
</table>
<tr is="blog-post-row"></tr>
能被DOM解析器正确处理,它会被BlogPostRow组件的模板替换,而BlogPostRow组件模板的根元素是<tr>
。
其他三种模板来源,都不会被DOM解析器处理,因此没有上面的限制。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。