轉(zhuǎn)載自??Vue.js 定義組件模板的七種方式

在 Vue 中定義一個組件模板，至少有七種不同的方式（或許還有其它我不知道的方式）：

• 字符串
• 模板字面量
• x-template
• 內(nèi)聯(lián)模板
• render 函數(shù)
• JSF
• 單文件組件

在這篇文章中，我將通過示例介紹每個選項，并探討利弊。以便你知道在任何特定情況下最適合的是哪一種。

1. 字符串

默認(rèn)情況下，模板會被定義為一個字符串。我想我們的觀點會達(dá)成一致：字符串中的模板是非常難以理解的。除了廣泛的瀏覽器支持之外，這種方法沒有太多用處。

Vue.component('my-checkbox', {template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>`,data() {return { checked: false, title: 'Check me' }},methods: {check() { this.checked = !this.checked; }} });

2. 模板字面量

ES6 模板字面量允許你使用多行定義模板，這在常規(guī) JavaScript 字符串中是不被允許的。此方式閱讀體驗更佳，并在許多現(xiàn)代瀏覽器中得到支持，不過安全起見你還是需要把代碼轉(zhuǎn)換成 ES5 。
這種方法并不完美，我發(fā)現(xiàn)大多數(shù) IDE 仍然會通過語法高亮、tab 格式化、換行符等地方的問題折磨著你。

Vue.component('my-checkbox', {template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>`,data() {return { checked: false, title: 'Check me' }},methods: {check() { this.checked = !this.checked; }} });

3. x-template

使用此方法，你的模板被定義在例如 index.html 文件中的 script 標(biāo)簽里。此 script 標(biāo)簽使用 text/x-template 標(biāo)記，并由組件定義的 id 引用。
我喜歡這種方法，它允許你使用適當(dāng)?shù)?HTML 標(biāo)記編寫你的 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"></div></div> </script>

4. 內(nèi)聯(lián)模板

通過在組件中添加 inline-template 屬性，你可以向 Vue 指示內(nèi)部內(nèi)容是其模板，而不是將其視為分布式內(nèi)容（參考?slot?。
它與 x-templates 具有相同的缺點，不過一個優(yōu)點是，內(nèi)容在 HTML 模板的正確位置，因此可以在頁面加載時呈現(xiàn)，而不是等到 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"></div></div> </my-checkbox>

5. render 函數(shù)

render 函數(shù)需要你將模板定義為 JavaScript 對象，這顯然是最詳細(xì)和抽象的模板選項。
不過，優(yōu)點是你的模板更接近編譯器，并允許你使用完整的 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，一些開發(fā)者認(rèn)為它丑陋、不直觀，是對 Vue 精神的背叛。JSX 需要你先編譯，因為它不能被瀏覽器運行。
不過，如果你需要完整的 JavaScript 語言功能，又不太適應(yīng) render 函數(shù)過于抽象的寫法，那么 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>} });

單文件組件

只要你把構(gòu)建工具設(shè)置的很舒服，單文件組件就是模板選項中的王者。它允許你寫 HTML 標(biāo)簽定義組件，并且將所有組件定義保留在一個文件中。
盡管它也有一些劣勢：需要預(yù)編譯，某些 IDE 不支持 .vue 文件的語法高亮，不過其地位依然難以被撼動。

<template><div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div> </template> <script>export default {data() {return { checked: false, title: 'Check me' }},methods: {check() { this.checked = !this.checked; }}} </script>

你還可以通過引入 pug 之類的預(yù)處理器，來獲得模板定義的更多可能性。

最好的是哪一個？

當(dāng)然沒有一個完美的方法，每一個都應(yīng)該根據(jù)你的用例來判斷。我認(rèn)為最好的開發(fā)人員會注意到所有的可能性，并將它們作為 Vue.js 工具欄的一個工具。

文章翻譯自:?http://vuejsdevelopers.com/2017/03/24/vue-js-component-templates

本文章首發(fā)在?Laravel China 社區(qū)

總結(jié)

以上是生活随笔為你收集整理的Vue.js 定义组件模板的七种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。