脚本宝典收集整理的这篇文章主要介绍了

如何理解Vue的DOM模板解析说明

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>结合<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>官网文档看以下几个案例,理解<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>模板解析说明。<br />官网详解地址:<a href="https://cn.vuejs.org/v2/guide/components.html" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a><br /><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>版本地址:<a href="https://cdn.bootcss.com/vue/2.3.4/vue.js" rel="nofollow noreferrer" target="_blank">https://cdn.bootcss.com/vue/2...</a></p> <p>案例一,使用Render函数,模板解析将渲染出错</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <table> <my-row>行元素</my-row><br /> </table> </div> <p><script> Vue.component('myRow', { render: function(h) { return h('tr', '行元素'); } }); new Vue({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-row</span>&gt;</span>行元素<span class="hljs-tag">&lt;/<span class="hljs-name">my-row</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'myRow'</span>, { render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(h)</span> </span>{ <span class="hljs-keyword">return</span> h(<span class="hljs-string">'tr'</span>, <span class="hljs-string">'行元素'</span>); } }); <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVSS2R?w=190&amp;h=60" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>案例二,使用Javascript<a href="http://www.js-code.com/tag/%e6%a8%a1%e6%9d%bf%e5%ad%97%e7%ac%a6%e4%b8%b2" title="模板字符串" target="_blank">模板字符串</a>,模板解析渲染出错</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <table> <my-row></my-row><br /> </table> </div> <p><script> Vue.component('myRow', { template: '</p> <tr>行元素</tr> <p>' }); new Vue({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-row</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-row</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'myRow'</span>, { template: <span class="hljs-string">'&lt;tr&gt;行元素&lt;/tr&gt;'</span> }); <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVSS2R?w=190&amp;h=60" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>案例三,使用&lt;script type="text/x-template"&gt;,模板解析渲染出错</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <table> <my-row></my-row><br /> </table> </div> <p><script type=&quot;text/x-template&quot; id=&quot;tr&quot;></p> <tr>行元素</tr> <p></script><br /> <script> Vue.component('myRow', { template: '#tr' }); new Vue({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-row</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-row</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/x-template"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tr"</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>行元素<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'myRow'</span>, { template: <span class="hljs-string">'#tr'</span> }); <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVSS2R?w=190&amp;h=60" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>案例四,使用Render函数,模板解析将渲染成功</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <table> <tr is=&quot;my-row&quot;></tr> </table> </div> <p><script> Vue.component('myRow', { render: function(h) { return h('tr', '行元素'); } }); new Vue({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"my-row"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'myRow'</span>, { render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(h)</span> </span>{ <span class="hljs-keyword">return</span> h(<span class="hljs-string">'tr'</span>, <span class="hljs-string">'行元素'</span>); } }); <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVSS5A?w=200&amp;h=107" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>案例五,使用Javascript<a href="http://www.js-code.com/tag/%e6%a8%a1%e6%9d%bf%e5%ad%97%e7%ac%a6%e4%b8%b2" title="模板字符串" target="_blank">模板字符串</a>,模板解析将渲染成功</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <table> <tr is=&quot;my-row&quot;></tr> </table> </div> <p><script> Vue.component('myRow', { template: '</p> <tr>行元素</tr> <p>' }); new Vue({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"my-row"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'myRow'</span>, { template: <span class="hljs-string">'&lt;tr&gt;行元素&lt;/tr&gt;'</span> }); <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVSS5A?w=200&amp;h=107" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>案例六,使用&lt;script type="text/x-template"&gt;,模板解析将渲染成功</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <table> <tr is=&quot;my-row&quot;></tr> </table> </div> <p><script type=&quot;text/x-template&quot; id=&quot;tr&quot;></p> <tr>行元素</tr> <p></script><br /> <script> Vue.component('myRow', { template: '#tr' }); new Vue({ el: '#app' }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"my-row"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/x-template"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tr"</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>行元素<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.component(<span class="hljs-string">'myRow'</span>, { template: <span class="hljs-string">'#tr'</span> }); <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVSS5A?w=200&amp;h=107" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>总结:综上测试结果,在使用&lt;ul&gt;,&lt;ol&gt;,&lt;table&gt;,&lt;select&gt;,应该使用&lt;tr is="my-row"&gt;&lt;/tr&gt;的形式。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

如何理解Vue的DOM模板解析说明

全部内容,希望文章能够帮你解决

如何理解Vue的DOM模板解析说明

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过