Vue.js 中,7种定义组件模板的方法
2017-09-04 14:58
976 查看
摘要:有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:字符串(String)模板字符串(Template literal)X-Templates内联(Inline)Render函数(Render functions) JSX 单文件组件(Single page components)当然,可能还有更多方法!在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。
转自:https://sdk.cn/news/7244
本文由Mcbai在众成翻译平台上翻译。
有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:
字符串(String)
模板字符串(Template literal)
X-Templates
内联(Inline)
Render函数(Render functions)
JSX
单文件组件(Single page components)
当然,可能还有更多方法!
在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。
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; } }});
然而,这种方式并不完美,我发现大多数的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; } }});
我喜欢这种方式,它允许你使用真正的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>
它的缺点和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>
然而,它的优点是你定义的模板更接近编译器,你可以使用所有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,<p class="" info"="" style="box-sizing: border-box; outline: 0px; margin-top: 3px; margin-bottom: 3px; padding-top: 0px; padding-bottom: 0px; max-width: 100%;">
转自:https://sdk.cn/news/7244
本文由Mcbai在众成翻译平台上翻译。
有多种方式可以在vue中定义模板组件。我算了一下,至少有7种不同的方法:
字符串(String)
模板字符串(Template literal)
X-Templates
内联(Inline)
Render函数(Render functions)
JSX
单文件组件(Single page components)
当然,可能还有更多方法!
在这篇文章里,我们将会展示每一个方法的示例,分析其优缺点,以便你能明白在特定的情形下,哪种方式是合适的。
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,<p class="" info"="" style="box-sizing: border-box; outline: 0px; margin-top: 3px; margin-bottom: 3px; padding-top: 0px; padding-bottom: 0px; max-width: 100%;">
相关文章推荐
- Vue.js 中,7种定义组件模板的方法
- Vue.js 中,7种定义组件模板的方法 | Codementor
- Vue.js 中,7种定义组件模板的方法
- Vue.js 定义组件模板的七种方式
- vuejs模板使用方法
- Vuejs第八篇之Vuejs组件的定义实例解析
- JS上传组件FileUpload自定义模板的使用方法
- vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用
- Vue.js、vue安装步骤、单文件组件、模板指令
- vue.js中组件的创建和使用方法
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
- Vue.js路由组件vue-router使用方法详解
- Vue.js路由组件vue-router的使用方法
- Vue.js自定义事件的表单输入组件方法
- 认识Vue.js的组件和模板
- Vue.js划分组件的方法
- Vuejs——(8)Vuejs组件的定义
- Vue.js 2.x之组件的定义和注册图文详解
- 两种方法调用Bootstrap3的Javascript组件:data属性定义和书写JS代码
- 【IMWeb训练营作业】vue.js-组件的定义及使用