在使用render函數描述虛擬DOM時,vue提供了壹個函數,它是構建虛擬DOM所需的工具。官網給他起了個名字叫createElement。它的簡稱是h。
示例:根據進入的級別(h1-h6)頁面,分別使用html語法和render函數呈現不同的標題格式。
1采用組件的形式。
2使用render函數的形式(修改child1子組件)
render函數就是渲染函數,是壹個函數,渲染函數的返回值是VNode(也就是虛擬節點,也就是我們要渲染的節點)。
CreateElement是render函數的壹個參數,render函數本身就是壹個函數,有三個參數。接下來,我們將重點討論這三個參數。
1createElement的第壹個參數是必需的,可以是String | Object | Function。
示例:
2createElement的第二個參數是可選的。對應於模板中屬性的數據對象* * *通常用作class | style | attrs | domProps | on。
3createElement的第三個參數是可選的,表示子虛擬節點(VNodes),由createElement()構造。通常,它接收壹個字符串或壹個數組,數組是常用的。
在render函數中,沒有v-model的實現,必須自己實現相應的邏輯。這是深入底層的代價,但它讓妳比v-model更好地控制交互的細節。
結果如下:
對於事件修飾符,如。被動,。捕捉和。壹次,Vue提供了相應的前綴,可以用於on。
JSX是Javascript和XML的結合。React發明了JSX,使用HTML語法創建虛擬DOM。當妳遇見
復雜的渲染函數編寫極其痛苦,這也是為什麽Vue中有壹個使用JSX語法的巴別塔插件,可以讓我們回歸到更接近模板的語法。
JSX語法學習文檔:vue js/JSX·JSX語法介紹