html文件声明组件,在Vue.js中定义组件模板的7种方法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在Vue中定义组件模板有很多选择。在我看来，至少有七种不同的方式:字符串

模板文字

X-Templates

内联

渲染功能

JSX

单页组件

在本文中，我们将逐一介绍每种方法的示例，并讨论其优缺点，以便您了解在任何特定情况下使用哪种方法最好。

1、字符串

默认情况下，模板将被定义为JS文件中的字符串。我想我们都同意字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外，这个方法没有什么特别之处。Vue.component('my-checkbox', {

template: `

{{ title }}

`,

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" >