摘要：活动结束单文件组件使用构建工具创建项目，综合来看单文件组件应该是最好的定义组件的方式，而且不会带来额外的模版语法的学习成本。
前端组件化开发已经是一个老生常谈的话题了，组件化让我们的开发效率以及维护成本带来了质的提升。
当然因为现在的系统越来越复杂庞大，所以开发与维护成本就变得必须要考虑的问题，因此滋生出了目前的三大前端框架 Vue、Angular、React。
那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别。
字符串形式Vue 最简单直接的一种定义组件模版的方式，但是方式写起来很不友好，就像我们以前拼接 HTML 元素是一样的，很痛苦，所以我们并不常用
Vue.component("my-button", {
data: function () {
return {
label: "是兄弟就来砍我"
}
},
template: ""
});
模版字面量
模版字面量 ES6 语法，与字符串不同的是，我们可以进行多行书写，相对单纯字符串有很大优势，体验更优，但是可能浏览器兼容性会存在问题，需要进行转译为 ES5 语法。
Vue.component("my-content", {
data: function () {
return {
label: "是兄弟就来砍我",
content: "刀刀暴击"
}
},
template: `
{{ content }}
`
});
内联模版(inline-template)
与 「X-template」模版定义方式被称为模版定义的替代品，把内容定义在组件标签元素的内部，而不是作为 slot 内容分发，方式比较灵活，但是给让我们组件的模版与其他属性分离开。
X-template{{label}} Vue.component("my-label", { data: function () { return { label: "赶紧上车吧，兄die" } } })
定义一个 Vue.component("my-label", { template: "#label-template", data: function () { return { label: "赶紧上车吧，兄die" } } }) 渲染函数
渲染函数需要 JavaScript 完全的编程能力，而且比模版更接近编译，但需要我们非常熟悉 Vue的实例属性，也会更加的抽象。像 v-if v-for 指令就可以用 JavaScript 语法轻松实现。
Vue.component("my-label", {
data: function () {
return {
items: ["来就送！", "来就送！", "来就送！"]
}
},
render: function (createElement) {
if (this.items.length) {
return createElement("ul", this.items.map(function (item) {
return createElement("li", item)
}))
} else {
return createElement("p", "活动结束")
}
}
})
JSX
相比渲染函数的抽象而言，JSX 比较容易一些，对于熟悉 React 的同学是比较友好的。
Vue.component("my-label", {
data: function () {
return {
label: ["活动结束"]
}
},
render(){
return {this.label}
}
})
单文件组件
使用构建工具 cli 创建项目，综合来看单文件组件应该是最好的定义组件的方式，而且不会带来额外的模版语法的学习成本。
- {{item}}
以上就是 Vue 中可以定义组件模版的几种方式，有人可能说，我特么要知道这么多干嘛，只要一种不就行了，我想说兄die多知道几种可以帮助我们在不同的条件下做出更好的选择。
比如：你就需要开发一个简单的页面，你非要弄个单文件组件，脚手架跑起来，何必呢，你说对不。
我是：刘小登登，一名爱写作的技术人。
关注公众号：六小登登，后台回复「1024」即可免费获取惊喜福利！后台回复「加群」邀你进群我会每天全网搜罗好文章给你。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106443.html
摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...
摘要：聊一聊设计模式在组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题在写的时候经常会在命名时绞尽脑汁在团队多人开发中出现命名冲突在进行组件化开发时如何规范书写什么是是团队提出的一种的命名方式，通过这种命名方式可以很好地解决上面遇到的问 聊一聊BEM设计模式在Vue组件开发中的应用 回想一下在你的前端生涯中是否遇到过以下问题1.在写css的时候经常会在命名class时绞尽脑汁2.在...
摘要：聊一聊设计模式在组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题在写的时候经常会在命名时绞尽脑汁在团队多人开发中出现命名冲突在进行组件化开发时如何规范书写什么是是团队提出的一种的命名方式，通过这种命名方式可以很好地解决上面遇到的问 聊一聊BEM设计模式在Vue组件开发中的应用 回想一下在你的前端生涯中是否遇到过以下问题1.在写css的时候经常会在命名class时绞尽脑汁2.在...
摘要：要招一个会的开发者作为面试官的你，你还会每次都只是问这些老土的问题吗你对的理解是什么你知道什么是双向绑定吗你了解它的原理吗说说的生命周期有哪些组件通讯有哪些你用过吗作为面试者的你，在网上搜索下面试题及答案，看完后你是不是觉得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一个会vue的开发者： ...
摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...
阅读 2027·2021-11-15 11:39
阅读 3206·2021-10-09 09:41
阅读 1468·2019-08-30 14:20
阅读 3243·2019-08-30 13:53
阅读 3308·2019-08-29 16:32
阅读 3317·2019-08-29 11:20
阅读 2995·2019-08-26 13:53
阅读 751·2019-08-26 12:18
