Vue之X-Templates的使用
生活随笔
收集整理的這篇文章主要介紹了
Vue之X-Templates的使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
如果你沒(méi)有使用webpack、gulp等工具，假如組件的template的內(nèi)容很冗長(zhǎng)，如果都在JavaScript里面拼接腳本，效率是非常低的，因?yàn)椴荒芟駥慔TML那樣舒服。Vue提供了另外一種定義模板的方法：
在<script>標(biāo)簽里使用text/x-template類型，并且指定一個(gè)id，將這個(gè)id賦值給template。
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue之X-Templates的使用</title></head><body><div id="app"><my-component></mycomponent><script type="text/x-template" id="my-component"><div>這是組件的內(nèi)容</div></script></div> <!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>Vue.component('my-component',{template:'#my-component'});var app = new Vue({el:'#app'}) </script></body> </html>在<script>標(biāo)簽里，你就可以寫HTML代碼了，不用考慮換行等問(wèn)題。
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的Vue之X-Templates的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Eclipse配置外部Tomcat
- 下一篇： Vue精确到小数点后两位