Template 制作模版 · web前端

[TOC] # 直接寫在選項里的模板直接在構造器里的template選項后邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這么寫 ~~~ <div id="app"></div> <script type="text/javascript"> var app = new Vue({ el: '#app', template: ` <h1 style="color:red">選項模板</h1> ` }) </script> ~~~ 這里需要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。 # 寫在`<template>`標簽里的模板這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也可以制作頁面。 ~~~ <body> <div id="app"></div> <template id="demo"> <h1 style="color:green">選項模板</h1> </template> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', template: '#demo' }) </script> ~~~ # 寫在`<script>`標簽里的模板這種寫模板的方法，可以讓模板文件從外部引入 ~~~ <body> <div id="app"></div> <script type="x-template" id="demo"> <h2 style="color:red">我是script標簽模板</h2> </script> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', template: '#demo' }) </script> ~~~ 適合外部引用我們學習了Template的三種寫法，以后學習到vue-cli的時候還會學到一種xxx.vue的寫法