Vue之X-Templates的使用
生活随笔
收集整理的這篇文章主要介紹了
Vue之X-Templates的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如果你沒有使用webpack、gulp等工具，假如組件的template的內容很冗長，如果都在JavaScript里面拼接腳本，效率是非常低的，因為不能像寫HTML那樣舒服。Vue提供了另外一種定義模板的方法：
在<script>標簽里使用text/x-template類型，并且指定一個id，將這個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>這是組件的內容</div></script></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <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>標簽里，你就可以寫HTML代碼了，不用考慮換行等問題。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Vue之X-Templates的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse配置外部Tomcat
- 下一篇： Vue精确到小数点后两位