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的写法