Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
在Vue中定义组件模板有很多选择。在我看来,至少有七种不同的方式:字符串
模板文字
X-Templates
内联
渲染功能
JSX
单页组件
在本文中,我们将逐一介绍每种方法的示例,并讨论其优缺点,以便您了解在任何特定情况下使用哪种方法最好。
1、字符串
默认情况下,模板将被定义为JS文件中的字符串。我想我们都同意字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外,这个方法没有什么特别之处。Vue.component('my-checkbox', {
template: `
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
2、模板文字
ES6模板字面量(“backticks”)允许您跨多行定义模板,这是在常规Javascript字符串中无法做到的。虽然为了安全起见,您可能仍然应该转换为ES5,但现在许多新浏览器都支持这些命令,并且更容易阅读。
不过,这种方法并不完美;我发现大多数ide在语法高亮、制表符、换行等方面仍然让您感到痛苦。Vue.component('my-checkbox', {
template: ` < div class = "checkbox-wrapper"@click = "check" >