vue 至少有7种定义组件模板的方法:
- 字符串
- 模板字面量
- X-Templates
- 内联模板
- 渲染方法(Render)
- JSX
- 单文件组件
字符串
默认是在js文件中定义成字符串的形式. 我想我们都会同意在字符串中定义模板是很难以理解的.除了为了更广泛的浏览器支持, 这种方法没多大用处.
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }">{{title}}</div><div class="title"></div></div>`,
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
模板字面量
es6的模板字面量("反引号")允许你使用在一般的javascript字符串中无法做到的多行定义你的模板. 这种方式更易读, 而且在很多新的浏览器中都得到了支持, 但是为了安全, 你仍然应该编译为es5.
不过, 这种方法也并不是完美的; 我发现大多数 IDE 仍然会通过语法高亮, 以及格式化tab和换行等问题使你痛苦.
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>`,
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
X-Templates
通过这种方法, 你的模板被定义在index.html的一个script标签内. script标签被标记为text/x-template并且在你的组件定义中通过id来引用.
我喜欢这个方法允许你在适当的html标记中编写你的html, 但它的缺点是, 它把模板和组件定义的其他部分分离开了.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
内联模板
通过给组件添加inline-template属性, 你向vue表明, 组件的内容是它的模板, 而不
是把它作为分布式内容(参考 插槽slot)
这和x-template面临一样的问题, 但是优点是html模板内容是在正确的地方, 所以可以在页面加载时渲染而不是等待js执行.
Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
<my-checkbox inline-template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</my-checkbox>
渲染方法(Render)
Render方法需要你把你的模板定义为javascript对象. 这显然是最详细和最抽象的模板选择.
但是, 优点是模板更接近编译器, 以及给你完整的访问javascript功能的权限, 而不是指令提供的子集.
Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
},
render(createElement) {
return createElement(
'div',
{
attrs: {
'class': 'checkbox-wrapper'
},
on: {
click: this.check
}
},
[
createElement(
'div',
{
'class': {
checkbox: true,
checked: this.checked
}
}
),
createElement(
'div',
{
attrs: {
'class': 'title'
}
},
[ this.title ]
)
]
);
}
});
JSX
Vue最具争议的模板选项是JSX. 一些开发者认为JSX是丑陋, 不直观, 而且是对Vue精神的背叛.
因为JSX对浏览器不可读, 所以首先需要你编译. 但是, 如果你需要使用渲染(Render)函数, JSX是一种不那么抽象的定义模板的方式.
Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
},
render() {
return <div class="checkbox-wrapper" onClick={ this.check }>
<div class={{ checkbox: true, checked: this.checked }}></div>
<div class="title">{ this.title }</div>
</div>
}
});
单文件组件
只要你熟悉构建工具的设置, 单文件组件绝对是模板选择的王者.
他们带来两全其美的方法: 允许你编写html标记, 同时保持所有的组件定义在一个文件中.
尽管需要编译以及一些IDE不支持这种文件类型(.vue)的语法高亮外, 但仍然无法撼动其地位.
<template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</template>
<script>
export default {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
}
</script>
在使用了像带SFCS的Pug之类的模板预处理器之后, 你可能会说, 还有更多定义模板的方式.
哪一个是最好的?
当然都不是最完美的方式, 需要看你的具体使用情况了. 我认为最好的开发人员会注意到所有的可能性,并将它们作当做vue的工具来使用.
翻译自: https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates
补充
IE11不支持 data(){} 这种形式的定义, 改为如下方式即可:
data: function () {
return { checked: false, title: 'Check me' }
}
