介绍
这篇文章主要介绍Vue.js中定义组件模板的方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
Vue。js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue。js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在Vue中定义组件模板有很多选择。在我看来,至少有七种不同的方式:
<李> 字符串
<李> 模板文字
<李> X-Templates
<李> 内联
<李> 渲染功能
<李> JSX
<李> 单页组件
在本文中,我们将逐一介绍每种方法的示例,并讨论其优缺点,以便您了解在任何特定情况下使用哪种方法最好。
<强> 1,字符串
默认情况下,模板将被定义为js文件中的字符串。我想我们都同意字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外,这个方法没有什么特别之处。
Vue.component (& # 39; my-checkbox& # 39;,, {
模板:,“& lt; div 类=癱heckbox-wrapper", @click=癱heck"比;
& lt; div :类=皗,复选框:真的,,检查:,checked }“比;
& lt;/div> & lt; div 类=皌itle"在{{,title }} & lt;/div> & lt;/div>”
数据(),{
return {,检查:假的,,标题:,& # 39;Check 我# 39;,}
},
方法:,{
check (), {, this.checked =, ! this.checked;,}
}
}); <强> 2,模板文字
ES6模板字面量(“引号”)允许您跨多行定义模板,这是在常规Javascript字符串中无法做到的。虽然为了安全起见,您可能仍然应该转换为ES5,但现在许多新浏览器都支持这些命令,并且更容易阅读。
不过,这种方法并不完美;我发现大多数ide在语法高亮,制表符,换行等方面仍然让您感到痛苦。
Vue.component (& # 39; my-checkbox& # 39;,, {
模板:,,,,的,& lt; div class =,“checkbox-wrapper" @click =,“check",在,
,,,& lt; div:, class =,“{,复选框:真的,,检查:,checked }“,祝辞& lt;/div>
& lt; div 类=皌itle"在{{,title }} & lt;/div & lt;/div>”,
数据(),{
return {,检查:假的,,标题:,& # 39;Check 我# 39;,}
},
方法:,{
check (), {, this.checked =, ! this.checked;,}
}
});/ <强> 3,X-Templates
使用此方法,您的模板将在索引。html文件中的脚本标记中定义。脚本标记由文本/x-template标记,并由组件定义中引的id用。
我喜欢这种方法,它允许您用正确的html标记编写html,但缺点是它将模板与组件定义的其余部分分开。
Vue.component (& # 39; my-checkbox& # 39;,, {
模板:& # 39;# checkbox-template& # 39;
数据(),{
return {,检查:假的,,标题:,& # 39;Check 我# 39;,}
},
方法:,{
check (), {, this.checked =, ! this.checked;,}
}
}); & lt; script 类型=拔谋?x-template", id=癱heckbox-template"比;
& lt; div 类=癱heckbox-wrapper", @click=癱heck"比;
& lt; div :类=皗,复选框:真的,,检查:,checked }“祝辞& lt;/div>
& lt; div 类=皌itle"在{{,title }} & lt;/div>
& lt;/div>
& lt;/script> <强> 4,内联模板
通过向组件添加inline-template属性,您可以向Vue表明内部内容是其模板,而不是将其视为分布式内容。<强>
它的缺点与x-templates相同,但一个优点是内容在HTML模板中的正确位置,因此可以在页面加载时呈现,而不是等到Javascript运行时。
Vue.component (& # 39; my-checkbox& # 39;,, {
数据(),{
return {,检查:假的,,标题:,& # 39;Check 我# 39;,}
},
方法:,{
check (), {, this.checked =, ! this.checked;,}
}
}); & lt; my-checkbox inline-template>
& lt; div 类=癱heckbox-wrapper", @click=癱heck"比;
& lt; div :类=皗,复选框:真的,,检查:,checked }“祝辞& lt;/div>
& lt; div 类=皌itle"在{{,title }} & lt;/div>
& lt;/div>
& lt;/my-checkbox> <强> 5,渲染功能
呈现函数要求您将模板定义为Javascript对象。它们显然是模板选项中最冗长和抽象的。
但是,这样做的好处是模板更接近编译器,并且允许您访问完整的Javascript功能,而不是指令提供的子集。
