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