Vue 中可以定义组件模版的几种方式


Posted in Javascript onAugust 06, 2019

前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

当然因为现在的系统越来越复杂庞大,所以开发与维护成本就变得必须要考虑的问题,因此滋生出了目前的三大前端框架 Vue、Angular、React。

那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别。

字符串形式

Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用

Vue.component("my-button", {
 data: function () {
 return {
  label: "是兄弟就来砍我"
 }
 },
 template: "<button>{{label}}</button>"
});

模版字面量

模版字面量 ES6 语法,与字符串不同的是,我们可以进行多行书写,相对单纯字符串有很大优势,体验更优,但是可能浏览器兼容性会存在问题,需要进行转译为 ES5 语法。

Vue.component("my-content", {
 data: function () {
 return {
  label: "是兄弟就来砍我",
  content: "刀刀暴击"
 }
 },
 template: `
 <div>
  <button>{{ label }}</button>
  <span>{{ content }}</span>
 </div>
 `
});

内联模版(inline-template)

与 「X-template」模版定义方式被称为模版定义的替代品,把内容定义在组件标签元素的内部,而不是作为 slot 内容分发,方式比较灵活,但是给让我们组件的模版与其他属性分离开。

<my-label inline-template>
 <span>{{label}}</span>
</my-label>
Vue.component('my-label', {
 data: function () {
 return {
  label: "赶紧上车吧,兄die"
 }
 }
})

X-template

定义一个 <script> 标签,标记 text/x-template 类型,通过 id 链接。

<script type="text/x-template" id="label-template">
 <span>{{label}}</span>
</script>
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 <div>{this.label}</div>
 }
})

单文件组件

使用构建工具 cli 创建项目,综合来看单文件组件应该是最好的定义组件的方式,而且不会带来额外的模版语法的学习成本。

<template>
 <div>
 <ul>
  <li v-for="(item, index) in items" :key="index">{{item}}</li>
 </ul>
 </div>
</template>
<script>
export default {
 data() {
 return {
  items: ["我砍", "我砍", "我砍"]
 };
 }
};
</script>

以上就是 Vue 中可以定义组件模版的几种方式,有人可能说,我特么要知道这么多干嘛,只要一种不就行了,我想说兄die多知道几种可以帮助我们在不同的条件下做出更好的选择。

比如:你就需要开发一个简单的页面,你非要弄个单文件组件,脚手架跑起来,何必呢,你说对不。

总结

以上所述是小编给大家介绍的Vue 中可以定义组件模版的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
babel基本使用详解
Feb 17 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Javascript实现打鼓效果
Jan 29 Javascript
angularjs请求数据的方法示例
Aug 06 #Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 #Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 #Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 #Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
You might like
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
javascript下string.format函数补充
2010/08/24 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
详解webpack的配置文件entry与output
2017/08/21 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
浅析Python多线程下的变量问题
2015/04/28 Python
python处理xml文件的方法小结
2017/05/02 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python 除法保留两位小数点的方法
2018/07/16 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Python递归实现打印多重列表代码
2020/02/27 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
创业计划书撰写原则
2014/01/25 职场文书
英语教师自荐信
2014/05/26 职场文书
某某同志考察材料
2014/05/28 职场文书
运动会的口号
2014/06/09 职场文书
2016年感恩节寄语
2015/12/07 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang