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

VUE render函數(shù)使用和詳解

 更新時間:2021年12月06日 15:58:38   作者:貳伍丶  
這篇文章主要為大家介紹了VUE render函數(shù),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

前言

在平時編程時,大部分是通過template來創(chuàng)建html。但是在一些特殊的情況下,使用template方式時,就無法很好的滿足需求,在這個時候就需要 通過JavaScript 的編程能力來進行操作。此時,就到了render函數(shù)展示拳腳去時候了。

render的作用

官網(wǎng)示例入口

在官網(wǎng)的這里示例中,使用組件,將相同的內(nèi)容通過solt放進h1-h6的標簽中,在使用傳統(tǒng)方式時,代碼不僅冗長,而且在每一個級別的標題中重復(fù)書寫了?<slot></slot>,在要插入錨點元素時還要再次重復(fù)。而使用render函數(shù)后,代碼就精簡了很多。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 標簽名稱
      this.$slots.default // 子節(jié)點數(shù)組
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

render函數(shù)的作用是,當(dāng)場景中用 template 實現(xiàn)起來代碼冗長繁瑣而且有大量重復(fù),這個時候使用就可以極大的簡化代碼。

render函數(shù)講解

在使用render函數(shù)中,會使用到一個參數(shù)createElement,而這個createElement參數(shù),本質(zhì)上,也是一個函數(shù),是vue中構(gòu)建虛擬dom所使用的工具。下面就圍繞著這個createElement來看一下。

在createelement方法,有三個參數(shù):

return createEement(, {}, [])

1.第一個參數(shù)(必要參數(shù)):主要是用于提供dom中的html內(nèi)容,類型可以是字符串、對象或函數(shù)。

2.第二個參數(shù)(對象類型,可選):用于設(shè)置這個dom中的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類的。

3.第三個參數(shù)(類型是數(shù)組,數(shù)組元素類型是VNode,可選):主要用于設(shè)置分發(fā)的內(nèi)容,如新增的其他組件。

注意:組件樹中的所有vnode必須是唯一的

通過傳入createElement參數(shù),創(chuàng)建虛擬節(jié)點,然后再將節(jié)點返回給render返回出去。

總的來說,render函數(shù)的本質(zhì)就是創(chuàng)建一個虛擬節(jié)點。

render和template的區(qū)別

相同之處:

render 函數(shù)?跟?template?一樣都是創(chuàng)建 html 模板

不同之處:

  • Template適合邏輯簡單,render適合復(fù)雜邏輯。
  • 使用者template理解起來相對容易,但靈活性不足;自定義render函數(shù)靈活性高,但對使用者要求較高。
  • render的性能較高,template性能較低。
  • 使用render函數(shù)渲染沒有編譯過程,相當(dāng)于使用者直接將代碼給程序。所以,使用它對使用者要求高,且易出現(xiàn)錯誤
  • Render 函數(shù)的優(yōu)先級要比template的級別要高,但是要注意的是Mustache(雙花括號)語法就不能再次使用

注意:template和render不能一起使用,否則無效

render舉例

如一次封裝一套通用按鈕組件,按鈕有四個樣式(success、error、warning、default)。

template方式是如下:

 <div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

這樣寫在按鈕少的時候沒有問題,但是一旦按鈕數(shù)量變多,這樣寫就會顯得特別冗長,在這個時候,就需要render函數(shù)。

根據(jù)情況生成按鈕DOM

在使用render函數(shù)前,需要先把template標簽去掉,只保留邏輯層。

通過傳入的type動態(tài)填入class,通過inderText將內(nèi)容添加入DOM中。

render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    innerText: this.text
   },
   on: {
    click: this.handleClick
   }
  });
 },

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • vue的簡介及@vue/cli?腳手架的使用示例

    vue的簡介及@vue/cli?腳手架的使用示例

    vue 是一個 漸進式的javascript框架,腳手架是一個通用概念,幫助搭建項目的工具,本文以vue2為例結(jié)合實例代碼給大家詳細講解,感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • Vue切換div顯示隱藏,多選,單選代碼解析

    Vue切換div顯示隱藏,多選,單選代碼解析

    這篇文章主要介紹了Vue切換div顯示隱藏,多選,單選代碼解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • vue+echarts實現(xiàn)條紋柱狀橫向圖

    vue+echarts實現(xiàn)條紋柱狀橫向圖

    這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)條紋柱狀橫向圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 基于Vue3實現(xiàn)旋轉(zhuǎn)木馬動畫效果

    基于Vue3實現(xiàn)旋轉(zhuǎn)木馬動畫效果

    這篇文章主要為大家介紹了如何利用Vue3實現(xiàn)旋轉(zhuǎn)木馬的動畫效果,文中的示例代碼講解詳細,對我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下
    2022-05-05
  • vue項目中main.js的用法

    vue項目中main.js的用法

    src/main.js是入口文件,主要作用是初始化vue實例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊的組件能夠被全局使用,本文通過實例代碼介紹vue項目中main.js的用法,感興趣的朋友一起看看吧
    2023-10-10
  • 在 Vue 中使用 JSX 及使用它的原因淺析

    在 Vue 中使用 JSX 及使用它的原因淺析

    這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • Vue自定義彈窗指令的實現(xiàn)代碼

    Vue自定義彈窗指令的實現(xiàn)代碼

    使用vue2.0實現(xiàn)自定義彈窗指令,當(dāng)標簽有該指令時,點擊標簽可以彈出彈窗。下面通過實例代碼給大家介紹Vue自定義彈窗指令的相關(guān)知識,感興趣的朋友一起看看吧
    2018-08-08
  • Vue3 reactive響應(yīng)式賦值頁面不渲染的解決

    Vue3 reactive響應(yīng)式賦值頁面不渲染的解決

    這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁面不渲染的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue單頁緩存方案分析及實現(xiàn)

    vue單頁緩存方案分析及實現(xiàn)

    這篇文章主要介紹了vue單頁緩存方案分析及實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用keep-alive時,數(shù)據(jù)無法刷新的問題及解決

    使用keep-alive時,數(shù)據(jù)無法刷新的問題及解決

    這篇文章主要介紹了使用keep-alive時,數(shù)據(jù)無法刷新的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07

最新評論