render函式使得我們可以以程式的邏輯去建立元件,其實在最後也是要被編譯成createelement的函式去執行,建立得到vnode的。
官網的例子
當開始寫乙個只能通過 level prop 動態生成標題 (heading) 的元件時,你可能很快想到這樣實現:
"level === 1"
>
<
/slot>
<
/h1>
else-if
="level === 2"
>
<
/slot>
<
/h2>
else-if
="level === 3"
>
<
/slot>
<
/h3>
else-if
="level === 4"
>
<
/slot>
<
/h4>
else-if
="level === 5"
>
<
/slot>
<
/h5>
else-if
="level === 6"
>
<
/slot>
<
/h6>
<
/template>
但其實這樣是不太優雅的寫法,我們可以很好的利用render函式:
export
default},
render:
function
(createelement)
};
同時也可以使用jsx語法,jsx語法在本質上也會被轉化為createelement語句,只不過使用起來更方便。
jsx 寫法
export
default},
render:
function
(h)`
;return
<
/tag>;}
};
Web前端高效開發總結二 HTML最佳實踐
標準html 的重要性 標準的html 指的是html 符合w3c的最新標準,對於乙個標準的頁面來說,具有的優點有 1.標準的頁面能保證瀏覽器正確的渲染 2.網頁能更容易被搜尋引擎搜尋,提高 的搜尋排名,爬蟲的目的是讀懂 的內容,並找出 中的關鍵字 4.能更好的被維護和擴充套件 在w3c上提供了一項...
vue如何高效使用
一 如何讓自己的 看起來舒服 1 個人理解,在專案中,首先coding style是必須的。2 為了便於維護,新建乙個api層,專門用來封裝對後台的請求 3 使用store的時候,看專案的大小,若小的話可以不使用module,actions專門用來處理api請求。4 新建乙個util,專門用來封裝用...
Android高效開發
android高效開發 原則 1.不要做不必要的事情,2盡可能節省記憶體使用 盡可能避免建立物件 使用自身的方法,如string.indexof string.lastindexof 乘虛自身的方法 使用虛擬優於使用介面。在嵌入式開發中,通過介面引用來呼叫會花費2倍於虛擬的時間,如map map1 ...