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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
javascript前端实现多视频上传
Dec 13 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中oci8扩展
2015/06/18 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
jquery 上下滚动广告
2009/06/17 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
AngularJS内置指令
2015/02/04 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
2014年国庆晚会主持词
2014/09/19 职场文书
干部个人考察材料
2014/12/24 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android