版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010996565/article/details/82056699
Template模板
1. 直接写在选项里的模板
直接在构造器里的template选项后编写。这种写法比较直观,但是如果模板html代码比较多,不建议这么些写
<div id="app">
{{message}}
</div>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
},
template:`
<h2 style='color:red'>我是选项模板</h2>
`
})
2. 写在标签里的模板
这种写法更像是在写html代码
<template id="dd2">
<h2 style='color:red'>我是template标签模板</h2>
</template>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
}
template:'#dd2'
})
3. 写在script中的模板
这种写法可以让模板文件从外部引用
<script type="x-template" id="dd3">
<h2 style='color:red'>我是Script标签模板</h2>
</script>
var app = new Vue({
el:'#app',
data:{
message:'hello world'
}
template:'#dd3'
})