Vue之Render函式高階篇

2021-09-01 23:39:30 字數 1552 閱讀 9469

一、v-if / v-else

利用if else代替:

二、v-for

必須用map:

三、v-model

父子元件相互傳值:

四、修飾符

(1):vue自帶修飾符:

修飾符字首

作用.once

~事件只執行一次

.capture

!給元素新增乙個***,當元素發生冒泡時,先觸發帶有該修飾符的元素。若有多個該修飾符,則由外而內觸發。就是誰有該事件修飾符,就先觸發誰。

.passive

&啟動被動***,觸發預設行為

.capture.once

~!使用多種修飾符

.once.capture

~!使用多種修飾符

(2):其他修飾符:

修飾符use

五、關於vue其他:

官方目前給出:

render: h =>}],

// 作用域插槽格式

// scopedslots: ,

// 如果元件是其他元件的子元件,需為插槽指定名稱

slot: 'name-of-slot',

// 其他特殊頂層屬性

key: 'mykey',

ref: 'myref',

// 如果你在渲染函式中向多個元素都應用了相同的 ref 名,

// 那麼 `$refs.myref` 會變成乙個陣列。

refinfor: true

},'其他')

}

Vue原始碼之render函式(四)

在 mount函式中,最後呼叫的updatecomponent函式,該函式中的呼叫了例項的私有函式vm.render,因此,現在需要弄清楚vm.render函式完成了什麼功能。在 src core instance render.js 中,在vue的原型上定義了私有 render函式。1.首先從vm...

VUE中的render函式

vue通過 template 來建立你的 html。但是,在特殊情況下,這種寫死的模式無法滿足需求,必須需要js的程式設計能力。此時,需要用render來建立html。render方法的實質就是生成template模板 通過呼叫乙個方法來生成,而這個方法是通過render方法的引數傳遞給他的 通過這...

Vue提高16 render函式

在某些場景下你可能需要render渲染函式帶來的完全程式設計能力來解決不太容易解決的問題,特別是要動態選擇生成標籤和元件型別的場景。根據props來生成標籤的場景 其中level是data中的變數,可以看到這裡有大量重複 如果邏輯複雜點,加上一些繫結和判斷就更複雜了,這裡可以利用render函式來對...