Vue 中可以定義組件模版的幾種方式
前端組件化開發(fā)已經(jīng)是一個(gè)老生常談的話題了,組件化讓我們的開發(fā)效率以及維護(hù)成本帶來了質(zhì)的提升。
當(dāng)然因?yàn)楝F(xiàn)在的系統(tǒng)越來越復(fù)雜龐大,所以開發(fā)與維護(hù)成本就變得必須要考慮的問題,因此滋生出了目前的三大前端框架 Vue、Angular、React。
那今天我們就來看看 Vue 中有哪些定義組件模版的方式以及他們之間的一些差別。
字符串形式
Vue 最簡(jiǎn)單直接的一種定義組件模版的方式,但是方式寫起來很不友好,就像我們以前拼接 HTML 元素是一樣的,很痛苦,所以我們并不常用
Vue.component("my-button", { data: function () { return { label: "是兄弟就來砍我" } }, template: "<button>{{label}}</button>" });
模版字面量
模版字面量 ES6 語法,與字符串不同的是,我們可以進(jìn)行多行書寫,相對(duì)單純字符串有很大優(yōu)勢(shì),體驗(yàn)更優(yōu),但是可能瀏覽器兼容性會(huì)存在問題,需要進(jìn)行轉(zhuǎn)譯為 ES5 語法。
Vue.component("my-content", { data: function () { return { label: "是兄弟就來砍我", content: "刀刀暴擊" } }, template: ` <div> <button>{{ label }}</button> <span>{{ content }}</span> </div> ` });
內(nèi)聯(lián)模版(inline-template)
與 「X-template」模版定義方式被稱為模版定義的替代品,把內(nèi)容定義在組件標(biāo)簽元素的內(nèi)部,而不是作為 slot 內(nèi)容分發(fā),方式比較靈活,但是給讓我們組件的模版與其他屬性分離開。
<my-label inline-template> <span>{{label}}</span> </my-label> Vue.component('my-label', { data: function () { return { label: "趕緊上車吧,兄die" } } })
X-template
定義一個(gè) <script> 標(biāo)簽,標(biāo)記 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" } } })
渲染函數(shù)
渲染函數(shù)需要 JavaScript 完全的編程能力,而且比模版更接近編譯,但需要我們非常熟悉 Vue的實(shí)例屬性,也會(huì)更加的抽象。像 v-if v-for
指令就可以用 JavaScript 語法輕松實(shí)現(xiàn)。
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', '活動(dòng)結(jié)束') } } })
JSX
相比渲染函數(shù)的抽象而言,JSX 比較容易一些,對(duì)于熟悉 React 的同學(xué)是比較友好的。
Vue.component('my-label', { data: function () { return { label: ["活動(dòng)結(jié)束"] } }, render(){ return <div>{this.label}</div> } })
單文件組件
使用構(gòu)建工具 cli 創(chuàng)建項(xiàng)目,綜合來看單文件組件應(yīng)該是最好的定義組件的方式,而且不會(huì)帶來額外的模版語法的學(xué)習(xí)成本。
<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多知道幾種可以幫助我們?cè)诓煌臈l件下做出更好的選擇。
比如:你就需要開發(fā)一個(gè)簡(jiǎn)單的頁面,你非要弄個(gè)單文件組件,腳手架跑起來,何必呢,你說對(duì)不。
總結(jié)
以上所述是小編給大家介紹的Vue 中可以定義組件模版的幾種方式,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- Vue父子模版?zhèn)髦导敖M件傳值的三種方法
- 詳解vue父子模版嵌套案例
- 詳解用vue2.x版本+adminLTE開源框架搭建后臺(tái)應(yīng)用模版
- vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
- VSCode寫vue項(xiàng)目一鍵生成.vue模版,修改定義其他模板的方法
- 詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版
- 詳解vue 模版組件的三種用法
- vue19 組建 Vue.extend component、組件模版、動(dòng)態(tài)組件 的實(shí)例代碼
- 解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號(hào))沖突問題
- Vue2?模版指令元素綁定事件執(zhí)行順序解析
- vue模版編譯詳情
- vue的指令和插值問題匯總
- vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
相關(guān)文章
VUE 直接通過JS 修改html對(duì)象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析
這篇文章主要介紹了VUE 直接通過JS 修改html對(duì)象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法,結(jié)合實(shí)例形式詳細(xì)分析了VUE使用JS修改html對(duì)象的值導(dǎo)致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下2019-12-12Vue開發(fā)實(shí)現(xiàn)滑動(dòng)驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue開發(fā)實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)驗(yàn)證組件,并且適配移動(dòng)和PC,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-07-07vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12vueJS簡(jiǎn)單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄獀ueJS簡(jiǎn)單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,一起跟隨小編過來看看吧2016-05-05詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01vue項(xiàng)目中頁面跳轉(zhuǎn)傳參的方法總結(jié)
在Vue項(xiàng)目中,你可以使用路由(vue-router)來實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11Vue中的百度地圖定位BMap.GeolocationControl的用法
BMap.GeolocationControl?是百度地圖API中的一個(gè)類,用于添加地理定位控件到地圖上,以便用戶可以通過該控件獲取自己的當(dāng)前位置,本文給大家介紹Vue中的百度地圖定位BMap.GeolocationControl的用法,感興趣的朋友跟隨小編一起看看吧2023-10-10