多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 直接写在选项里的模板 直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板html代码太多,不建议这么写。 ~~~ var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:` <h1 style="color:red">我是选项模板</h1> ` }) ~~~ 这里需要注意的是模板的标识不是单引号和双引号,而是,就是Tab上面的键。 ### 写在`<template>`标签里的模板 这种写法更像是在写HTML代码,就算不会写Vue的人,也可以制作页面。 ~~~javascript <template id="demo2"> <h2 style="color:red">我是template标签模板</h2> </template> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:'#demo2' }) </script> ~~~ ### 写在`<script>`标签里的模板 这种写模板的方法,可以让模板文件从外部引入。 ~~~javascript <script type="x-template" id="demo3"> <h2 style="color:red">我是script标签模板</h2> </script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:'#demo3' }) </script> ~~~