Template 制作模版(13)
2018-03-01 本文已影响0人
小囧兔
vue的模板有三种写法
一、直接写在选项里的模板
<script>
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld",
count:1
},
template:`<h2>我是选项模板{{this.count}}</h2>`
// template:'#muban',
// template:"#muban2"
})
</script>
image.png
template为何不用双引号或者单引号而是用``,因为我们写模板的时候经常用到双引号或者单引号
选项模板适合很小的形式,比如几句话,代码太多不建议用选项模板。
二、写在<template>标签里的模板
<div id="app">
<h1>{{msg}}</h1>
<template id="muban">
<h2>我是标签模板</h2>
</template>
<script type="text/x-template" id="muban2">
<h2>我是script模板</h2>
</script>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld",
count:1
},
// template:`<h2>我是选项模板{{this.count}}</h2>`
template:'#muban',
// template:"#muban2"
})
</script>
标签模板适合的场景比如已经写好的html页面,你可以直接粘贴放在模板标签里,然后挂载就可以使用
三、写在<script>标签里的模板
<div id="app">
<h1>{{msg}}</h1>
<template id="muban">
<h2>我是标签模板</h2>
</template>
<script type="text/x-template" id="muban2">
<h2>我是script模板</h2>
</script>
</div>
script模板可以外部引用模板文件。