Vue.js 中,7种定义组件模板的方法
来源:互联网 发布:冯德伦长相知乎 编辑:程序博客网 时间:2024/06/05 04:46
http://www.zcfy.cc/article/7-ways-to-define-a-component-template-in-vue-js-codementor-3644.html?t=new
有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:
字符串(String)
模板字符串(Template literal)
X-Templates
内联(Inline)
Render函数(Render functions)
JSX
单文件组件(Single page components)
当然,可能还有更多方法!
在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。
_注意: 这篇文章最初发表在在Vue.js Developers blog上on 2017/03/24_
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. 模板字符串(Template literals)
通过ES6的模板字符串(反引号)语法,你在定义模板时可以直接换行,这是通过常规的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文件里的script标签中定义你的模板。script标签需要添加text/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 Templates)
通过给组件添加inline-template
属性来告诉Vue,里面的内容就是模板,而不是把它当作是分发内容(见 slots)。
它的缺点和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. Render functions(渲染函数)
渲染函数需要你把模板当作一个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。但是如果你需要使用渲染函数,那么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> </div> }});
7. 单文件组件(Single File Components)
只要你愿意在项目中使用构建工具,那么单文件组件绝对是这些方法中的首选。它们有两个最好的优点:允许你使用标记,同时把所有组件定义都写在一个文件中。
尽管单文件组件需要编译,并且一些IDE不支持这种类型文件的语法高亮,但它仍然很难被其它方法战胜。
<template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title">{{ title }}</div> </div></template><script> export default { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } }</script>
- Vue.js 中,7种定义组件模板的方法
- Vue.js 中,7种定义组件模板的方法
- Vue.js 中,7种定义组件模板的方法 | Codementor
- 认识Vue.js的组件和模板
- 【17】vue.js — 组件(模板)
- Vue 创建组件的两种方法
- vue-schart : vue.js 的图表组件
- vue.js中组件的创建和使用方法
- vue开发:vue全局组件的方法
- 【IMWeb训练营作业】vue.js-组件的定义及使用
- vue组件传递对象中实现单向绑定的方法
- vue脚手架中自定义全局组件的方法
- vue 定义组件
- javaScript vue定义组件
- vue定义组件
- 【Vue.js】-Vue.js组件
- Vue组件模板注意事项
- Vue组件-模板
- 没有Home键之后的iPhone会是什么样子?
- Myeclipse重置编辑主页面
- yum 命令
- goland——json字符串转化
- Mysql 如何判断中文首字母
- Vue.js 中,7种定义组件模板的方法
- 代码规范
- vmware tools手动安装方法
- git基本整套流程使用
- 第三周周总结
- POJ-1860 Currency Exchange
- java作业11-6
- stackoverflow 上提问/回答习惯 英文
- 自定义异常,实现异常链的功能