欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 中可以定義組件模版的幾種方式

 更新時(shí)間:2019年08月06日 10:21:11   作者:六小登登  
這篇文章主要介紹了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)注明出處,謝謝!

相關(guān)文章

  • VUE 直接通過JS 修改html對(duì)象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法分析

    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-12
  • Vue開發(fā)實(shí)現(xiàn)滑動(dòng)驗(yàn)證組件

    Vue開發(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-07
  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

    vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

    這篇文章主要介紹了vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vueJS簡(jiǎn)單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】

    vueJS簡(jiǎn)單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】

    下面小編就為大家?guī)硪黄獀ueJS簡(jiǎn)單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,一起跟隨小編過來看看吧
    2016-05-05
  • Vue.js 父子組件通信的十種方式

    Vue.js 父子組件通信的十種方式

    最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化,寫文章是很easy的事情,今天小編給大家分享Vue.js 父子組件通信的十種方式,感興趣的的朋友跟隨小編一起看看吧
    2018-10-10
  • 詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)

    詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)

    本篇文章主要介紹了詳解vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue實(shí)現(xiàn)一個(gè)圖片懶加載插件

    Vue實(shí)現(xiàn)一個(gè)圖片懶加載插件

    這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)一個(gè)圖片懶加載的插件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 深入探究Vue中探究組合式API的奧秘

    深入探究Vue中探究組合式API的奧秘

    Vue?3中引入了組合式API,它是一種新的代碼組織方式,旨在讓開發(fā)者更靈活地組織和重用Vue組件的邏輯,下面我們就來學(xué)習(xí)一下Vue中常見組合式API的使用吧
    2023-11-11
  • vue項(xiàng)目中頁面跳轉(zhuǎn)傳參的方法總結(jié)

    vue項(xiàng)目中頁面跳轉(zhuǎn)傳參的方法總結(jié)

    在Vue項(xiàng)目中,你可以使用路由(vue-router)來實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-11-11
  • Vue中的百度地圖定位BMap.GeolocationControl的用法

    Vue中的百度地圖定位BMap.GeolocationControl的用法

    BMap.GeolocationControl?是百度地圖API中的一個(gè)類,用于添加地理定位控件到地圖上,以便用戶可以通過該控件獲取自己的當(dāng)前位置,本文給大家介紹Vue中的百度地圖定位BMap.GeolocationControl的用法,感興趣的朋友跟隨小編一起看看吧
    2023-10-10

最新評(píng)論