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

Vue2 模板template的四种写法总结

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>下面小编就为大家分享一篇<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>2 模板template的四种写法总结,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017512271" src="/img/remote/1460000017512271" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <p>如下所示:</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;> <h1>我是直接写在构造器里的模板1</h1> </div> <p><template id=&quot;demo3&quot;> </p> <h1 style=&quot;color:red&quot;>我是选项模板3</h1> <p></template> </p> <p><script type=&quot;x-template&quot; id=&quot;demo4&quot;> </p> <h1 style=&quot;color:red&quot;>我是script标签模板4</h1> <p></script> </p> <p><script> var vm=new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:&quot;#app&quot;, data:{ message:1 }, //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860 //第2种模板 写在构造器里 //template:`</p> <h1 style=&quot;color:red&quot;>我是选项模板2</h1> <p>` </p> <p> //第3种模板 写在<template>标签里 //template:'#demo3' //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860 //第4种模板 写在<script type=&quot;x-template&quot;>标签里 template:'#demo4' }) </script><br /> 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860" 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">h1</span>&gt;</span>我是直接写在构造器里的模板1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</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">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo3"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red"</span>&gt;</span>我是选项模板3<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"x-template"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo4"</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red"</span>&gt;</span>我是script标签模板4<span class="hljs-tag">&lt;/<span class="hljs-name">h1</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"> <span class="hljs-keyword">var</span> vm=<span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el:<span class="hljs-string">"#app"</span>, data:{ message:<span class="hljs-number">1</span> }, <span class="hljs-comment">//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860</span> <span class="hljs-comment">//第2种模板 写在构造器里 </span> <span class="hljs-comment">//template:`&lt;h1 style="color:red"&gt;我是选项模板2&lt;/h1&gt;` </span> <span class="hljs-comment">//第3种模板 写在&lt;template&gt;标签里 </span> <span class="hljs-comment">//template:'#demo3' </span> <span class="hljs-comment">//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860 </span> <span class="hljs-comment">//第4种模板 写在&lt;script type="x-template"&gt;标签里 </span> template:<span class="hljs-string">'#demo4'</span> }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860</code></pre> <p>推荐第4种。</p> <p><strong>结语</strong></p> <p>感谢您的观看,如有不足之处,欢迎批评指正。</p> <p></code></p>

总结

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

Vue2 模板template的四种写法总结

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

Vue2 模板template的四种写法总结

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

80%的人都看过