聊一聊Vue元件模版,你知道它有幾種定義方式嗎?
前端元件化開發已經是一個老生常談的話題了,元件化讓我們的開發效率以及維護成本帶來了質的提升。
當然因為現在的系統越來越複雜龐大,所以開發與維護成本就變得必須要考慮的問題,因此滋生出了目前的三框架 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多知道幾種可以幫助我們在不同的條件下做出更好的選擇。
比如:你就需要開發一個簡單的頁面,你非要弄個單檔案元件,腳手架跑起來,何必呢,你說對不。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3034/viewspace-2820483/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 聊一聊 React 中更新 ui 檢視的幾種方式ReactUI
- 聊一聊幾種常用web圖片格式:gif、jpg、png、webpWeb
- 聊一聊微服務元件區別微服務元件
- 單例模式(下)---聊一聊單例模式的幾種寫法單例模式
- 單例模式(下) - 聊一聊單例模式的幾種寫法單例模式
- 單例模式(下) – 聊一聊單例模式的幾種寫法單例模式
- 聊一聊BEM設計模式在Vue元件開發中的應用設計模式Vue元件
- 聊一聊Vue中的回撥函式Vue函式
- 聊一聊搭建一個網站到底有幾步?網站
- 聊一聊 RestTemplateREST
- 聊一聊 cookieCookie
- 聊一聊 TLS/SSLTLS
- 智慧小程式檔案館 —— 聊一聊 web-view 元件WebView元件
- 你知道黑客的入侵方式都有哪些嗎?這些你知道幾個?黑客
- 聊一聊 GDB 除錯程式時的幾個實用命令除錯
- 聊一聊Oracle的Tablespace(一)Oracle
- php定義常量陣列有幾種方式PHP陣列
- 聊一聊前端換膚前端
- 聊一聊 JVM 的 GCJVMGC
- 聊一聊Greenplum與PostgreSQLSQL
- 聊一聊模板方法模式模式
- 聊一聊測試流程
- 聊一聊session和cookieSessionCookie
- 聊一聊JWT與sessionJWTSession
- React元件方法的兩種定義方式React元件
- 聊一聊redis十種資料型別及底層原理Redis資料型別
- Linux程式間通訊有幾種方式?這8個你都知道嗎?Linux
- 聊一聊隨機數安全隨機
- 聊一聊遊戲的壓測遊戲
- 聊一聊 Javascript 中的 ASTJavaScriptAST
- 面試官(7): 聊一聊 Babel?面試Babel
- 聊一聊前端業務開發前端
- 面試官:聊一聊索引吧面試索引
- 和手遊開發者聊一聊 iPhoneiPhone
- 聊一聊責任鏈模式模式
- 聊一聊介面卡模式模式
- 聊一聊裝飾者模式模式
- 聊一聊遊戲版本運營遊戲