下面是按我的理解来写的,如有不太准确的地方,请指正。
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解析器处理,因此没有上面的限制。


lavender
27 声望2 粉丝