vue render 函式理解

2021-09-24 16:06:54 字數 1202 閱讀 7801

感覺render是為補救template缺點而誕生的

vue通過建立乙個虛擬dom對真實dom發生的變化保持追蹤。

return createelement('h1', 'hello world!')

createelement 到底會返回什麼呢?其實不是乙個實際的 dom 元素。它更準確的名字是createnodedescription,因為它所包含的資訊會告訴 vue 頁面上需要渲染什麼樣的節點,及其子節點。我們把這樣的節點描述為「虛擬節點 (virtual node)」,也常簡寫它為「vnode」。「虛擬 dom」是我們對由 vue 元件樹建立起來的整個 vnode 樹的稱呼。

render方法會傳入乙個createelement函式,它是乙個用於建立dom元素或者用於例項化其他元件的構造方法。render方法必須返回乙個createelement函式的呼叫結果,也就是模版內的頂層元素(這個方法在vue2的習慣性使用中經常用h來命名)。

render 例項:

export default ,

domprops:

})}))},

}

相當於模板語法:

渲染結果:

createelement的定義

createelement(tag,data,children)

返回值vnode(虛擬節點)

引數說明:

tag    型別:string/object/function  說明:乙個html標籤,元件型別,或乙個函式

data    型別:object 說明:乙個對應屬性的資料物件,用於向建立的節點物件設定屬性值

children  型別:string/array       說明:子節點

向構造的vnode物件設定文字時可以直接傳入字串,例如:

createelement('div','這是行內文字')

輸出結果就是:

這是行內文字

參考:

SetBkMode函式理解

輸出的字串時,發現存在背景色,這樣的輸出是破壞背景的。那需要使用什麼方法來保持背景不變,而又能輸出紅色的字串呢?比如按鈕的文字顏色是黑色的,而背景是灰色的。這就需要使用setbkmode函式來設定drawtext函式的輸出方式,顯示裝置共有兩種輸出方式 opaque和transparent。opaq...

OpenGl glenable 函式理解

glenable 用於啟用各種功能。功能由引數決定。與gldisable相對應。gldisable是用來關閉的。兩個函式引數取值是一至的。引數說明 void glenable glenum cap glenum 是unsigned int 型別 cap 是乙個取值。由值決定啟用的功能鍵。各種功能請看...

get函式理解

include include include includeusing namespace std int main char next do cin.get next cout 輸入 to be or not to be 輸出 to be or not to be 其實剛開始我很不理解為什麼輸出...