Vue.js中定义组件模板的几种方法介绍

vue.js 使用了基于 html 的模板语法，允许开发者声明式地将 dom 绑定至底层 vue 实例的数据。所有 vue.js 的模板都是合法的 html ，所以能被遵循规范的浏览器和 html 解析器解析。
在vue中定义组件模板有很多选择。在我看来，至少有七种不同的方式:
字符串
模板文字
x-templates
内联
渲染功能
jsx
单页组件
在本文中，我们将逐一介绍每种方法的示例，并讨论其优缺点，以便您了解在任何特定情况下使用哪种方法最好。
1、字符串
默认情况下，模板将被定义为js文件中的字符串。我想我们都同意字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外，这个方法没有什么特别之处。
vue.component('my-checkbox', { template: `<div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"> </div><div class="title">{{ title }}</div></div>`, 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" > <div: class = "{ checkbox: true, checked: checked }" ></div> <div class="title">{{ title }}</div ></div>`, data() { return { checked: false, title: 'check me' } }, methods: { check() { this.checked = !this.checked; } }});/3、x-templates
使用此方法，您的模板将在index.html文件中的脚本标记中定义。脚本标记由文本/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">{{ title }}</div> </div></script>4、内联模板
通过向组件添加inline-template属性，您可以向vue表明内部内容是其模板，而不是将其视为分布式内容。
它的缺点与x-templates相同，但一个优点是内容在html模板中的正确位置，因此可以在页面加载时呈现，而不是等到javascript运行时。
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">{{ title }}</div> </div></my-checkbox>5、渲染功能
呈现函数要求您将模板定义为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 ] ) ] ); }});6、jsx
vue中最有争议的模板选项是jsx。一些开发人员认为jsx丑陋、不直观，是对vue精神的背叛。
jsx要求您首先进行转换，因为浏览器无法读取它。但是，如果需要使用呈现函数，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>

为什么会说SEO优化是一种最好的手段
怎么删除域名
如何建立一个电影网站 盈利和版权纠纷怎么处理？
云服务器家用购买费用
什么是抢注域名
我把绑定在这台服务器没有建站
云服务器怎么给控制面板设置
此测试域名怎么打不开了-虚拟主机/数据库问题