- 字符串模板
- 模板字面量
- 内联模板
- x-template
- render函数
- JSF
- 单文件组件
字符串模板
默认情况下,模板会被定义为一个字符串
<body>
<div id="app">
<ele></ele>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
Vue.component('ele',{
template:'<div v-show="show" @click="event">安排</div>',
data:function() {
return {
show:true
}
},
methods:{
event:function() {
this.show = !this.show;
}
}
})
var app = new Vue({
el:'#app'
})
</script>
模板字面量
ES6模板字面量允许使用多行定义模板,但在常规Javascript字符串中是不被允许的,需要把代码转为ES5
<body>
<div id="app">
<ele></ele>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('ele',{
template:'\
<div \
v-show="show"\
@click="event">安排\
</div>',
data:function() {
return {
show:true
}
},
methods:{
event:function() {
this.show = !this.show;
}
}
})
var app = new Vue({
el:'#app'
})
内联模板
在使用组件时,给组件标签使用inline-template特性,组件就会把它的内容当作模板,而不是把它当内容分发
<body>
<div id="app">
<ele inline-template>
<div v-show="show" @click="event">安排
</div>
</ele>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('ele',{
data:function() {
return {
show:true
}
},
methods:{
event:function() {
this.show = !this.show
}
}
})
var app = new Vue({
el:'#app'
})
</script>
x-template
在<script>标签里使用text/x-template类型,并且指定一个id,将这个id赋给template,它将模板和组件的其它定义分离了
<body>
<div id="app">
<ele></ele>
<script type="text/x-template" id="ele">
<div v-show="show" @click="event">安排</div>
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('ele',{
template:'#ele',
data:function() {
return {
show:true
}
},
methods:{
event:function() {
this.show = !this.show
}
}
})
var app = new Vue({
el:'#app'
});
</script>
</body>
render函数
函数将模板定义为 JavaScript 对象,你的模板更接近编译器,并允许你使用完整的 JavaScript 功能,而不是指令提供的子集。
<body>
<div id="app">
<ele></ele>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('ele',{
render:function(createElement) {
return createElement('div',{
class:{
'active':this.isActive
},
on:{
click:this.handleClick
}
},
'安排'
)
},
data:function() {
return {
isActive:true
}
},
methods:{
handleClick:function() {
alert("clicked!!")
}
}
})
var app = new Vue({
el:'#app'
});
</script>
</body>
JSX
使用render函数难以阅读出DOM结构,尤其当子节点嵌套较多时,为了让render函数更好的书写和阅读,Vue.js提供了插件babel-plugin-transform-vue-jsx来支持JSX语法。
JSX是一种看起来像HTML,但实际是Javascript的语法扩展
例如使用template书写的模板是
<div id="app">
<ele :value="1">
<span>一级</span>标题
</ele>
</div>
使用createElement改写
return createElement('ele',{
props:{
value:1
}
},[
createElement('span','一级'),
'标题'
]);
用JSX改写后
new Vue({
el:'#app',
render(h) {
return {
<ele value={1}>
<span>一级</span>标题
</el>
}
}
})