版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
第8章渲染函數(shù)
課程目標需要有JavaScript的完全編程的能力了解createElement方法及參數(shù)使用使用渲染函數(shù)實現(xiàn)v-if，v-for,v-model及slot插槽，作用域插槽。2課程內容
什么是渲染函數(shù)使用渲染函數(shù)createElement方法VNodes必須唯一使用JavaScript代替模板功能38.1渲染函數(shù)
4Vue渲染函數(shù)就是Render函數(shù)，Render函數(shù)會返回一個VNode，VNode就是一個JavaScript對象，DOM的映射。要想理解Vue渲染函數(shù)，首先需要了解Vue的虛擬DOM。
8.1.1
從虛擬DOM了解Vue渲染函數(shù)
虛擬DOM的工作是將瀏覽器DOM節(jié)點的所有信息映射到一個JavaScript對象上。因為JavaScript本身是很快的，但是DOM操作本身很慢。如果把DOM的信息映射到JavaScript對象上，至少應當獲取DOM信息時不需要遍歷DOM，而DOM的操作一直是JavaScript優(yōu)化的重點。使用虛擬DOM，程序員不需要自己操作DOM，關于DOM的操作都會由虛擬DOM完成，而虛擬DOM一定會以最優(yōu)方案來進行操作，所以虛擬DOM的重點是構建一個瀏覽器DOM的信息拷貝樹，拷貝樹里必須包含所有DOM節(jié)點的拷貝節(jié)點，這個拷貝節(jié)點叫作VNode。
58.1渲染函數(shù)
6關于虛擬DOM的好處還有一個就是Vue會把所有的DOM操作緩存到一個隊列，這種在緩沖時去除重復數(shù)據(jù)，可以避免不必要的計算和DOM操作非常重要。如何創(chuàng)建VNode，可以自己創(chuàng)建VNode，然后Vue將程序員創(chuàng)建的VNode更新到真實DOM上，這樣更自由權限更大，創(chuàng)建VNode的方法createElement。8.1.2為什么使用渲染函數(shù)通過下面的案例發(fā)現(xiàn)：level顯示不同級別的標題中插入錨定元素，需要重復使用<slot></slot>來實現(xiàn)內容分發(fā)。雖然模板在大多數(shù)組件中都非常好用，但是這里并不簡潔，為了解決這個問題，Vue提供了渲染函數(shù)
78.<divid="app">9. <h1>10. <aname="hello-world"href="#hello-world">11. Helloworld!12. </a>13. </h1>14. <anchored-heading:level="1">15. <aname="title"href="#title">16. Helloworld!17. </a>18. </anchored-heading>19. </div>20. <scripttype="text/x-template"id="anchored-heading-template">21. <div>22. <h1v-if="level===1">23. <slot></slot>24. </h1>25. <h2v-if="level===2">26. <slot></slot>27. </h2>28. <h3v-if="level===3">29. <slot></slot>30. </h3>31. <h4v-if="level===4">32. <slot></slot>33. </h4>34. <h5v-if="level===5">35. <slot></slot>36. </h5>37. <h6v-if="level===6">38. <slot></slot>39. </h6>40. </div>41. </script>42. <scriptsrc="../js/vue.js"></script>43. <script>44. Vponent('anchored-heading',{45. template:'#anchored-heading-template',46. props:{47. level:{48. type:Number,49. required:true50. }51. }52. })53. newVue({54. el:'#app'55. })56. </script>8.1.3
什么是渲染函數(shù)Vue推薦在絕大多數(shù)情況下使用template來創(chuàng)建HTML。然而在一些場景中，需要JavaScript的完全編程的能力，這就需要使用render函數(shù)。
8Vue.component('組件名',{render:function(createElement){returncreateElement(參數(shù))}})【例8-2】使用渲染函數(shù)
9<metacharset="UTF-8">.<title>斤斗云在線課堂</title></head><body><divid="app"><h1><aname="hello-world"href="#hello-world">Helloworld!</a></h1><anchored-heading:level="1"><aname="title"href="#title">Helloworld!</a></anchored-heading><anchored-heading:level="2"><aname="title"href="#title">Helloworld!</a></anchored-heading><anchored-heading:level="3"><aname="title"href="#title">Helloworld!</a></anchored-heading>10<scriptsrc="../js/Vue.js"></script><script>Vue.component('anchored-heading',{template:'#anchored-heading-template',render:function(createElement){returncreateElement('h'+this.level,//tagname標簽名稱this.$slots.default//子組件中的陣列)},props:{level:{type:Number,required:true})newVue({el:'#app'})</script></body></html>在組件中使用props，父組件傳遞參數(shù)level給子組件，同時還做了props驗證，level必須是Number類型。不再使用slot插槽向組件中分發(fā)內容，使用$slots.default把子元素顯示出來。8.2createElement方法createElement方法，通過render函數(shù)的參數(shù)傳遞進來。一般情況下如：createElement(tag,{},[])或者createElement(tag,{},String)，不過接收的參數(shù)不一樣,后面兩個參數(shù)都是可選的，總共有三個參數(shù)。118.2.1createElement參數(shù)【例8-3】createElement方法必須參數(shù)-{String|Object|Function}12<elem></elem></div><script>
Vue
.
component(‘elem’,
{
render:
function(createElement)
{
return
createElement(‘div’);//一個HTML標簽字符/*return
createElement({
template:
‘<div></div>’
//組件選項對象});*/
/*varfunc
=
function()
{
return
{template:
‘
<div></div>’}
};
return
createElement(
func());//一個返回HTML標簽字符或組件選項對象的函數(shù)*/}
});
new
Vue({
el:
'
#app
'
});</script></
body></html>【例8-4】createElement方法第二個參數(shù)
-{Object}13
<meta
charset="UTF-8"><titlexrender</title>
<script
src-"-./js/Vue.
js“></script><
/head><body>
<div
id="app">
<elem></elem></div><script>
Vue.
component(‘elem’,
{
render:
functi
on(
createElement)
{
return
createE
lement(‘div’,
{'class':
{
foo:
true,bar:
true
}，
style:
{
color:
'gray',fontSize:’
14px'
}，
attrs:
{
8.2.2實例化Vue對象、
運行后在頁面上渲染了一個div標簽，并且增加了id、class屬性，style行內樣式及innerHTML的內容如圖8-5所示。14【例8-5】createElement方法第三個參數(shù)-{String|Array}15<body>
<div
id="
app">
<elem></elem></div><script>
Vue
.
component('elem',
(
render:
function(
createElement)
{
var
self
=
this;
return
createElement(
‘div’,
[//由createElement函數(shù)構建而成的數(shù)組
createElement(‘h1’,
‘主標’
),//createElement函數(shù)返回Vnode對象createElement(‘h2’,
‘副標'
)
]);
};
new
Vue({
el:
'
#app'
});</script></body>
16運行后在頁面上渲染了一個<div>標簽，并渲染了兩個標題對象<h1>、<h2>如圖8-6所示。
使用模板與Render函數(shù)對比
17
模板寫法更簡單、可讀。
模板開發(fā)效率是第一位。模板使用webpack編譯，模板都會被預編譯為Render函數(shù)。8.2.3
VNodes必須唯一官方提示VNodes必須唯一，就是同一個VNode只能用在一個地方。這里的myParagraphVNode，被使用于div中的兩個VNode，這種用法是不行的，要想使用只能創(chuàng)建兩個相同的VNode對象，而不是這樣指向同一個VNode對象。18render:function(createElement)(varmyParagraphVNode.createElement('p','hi')returncreateElement('div',[myParagraphVNode,myParagraphVNode])8.3使用JavaScript代替模板功能在使用Vue模板時在模板中靈活使用v-if、v-for、v-model等指令和<slot>插槽。但在Render函數(shù)中是沒有提供專用的API。如果在Render函數(shù)中使用這些，需要使用原生的JavaScript來實現(xiàn)
198.3.1v-if和v-for
在Render函數(shù)中可以使用if/else和map來實現(xiàn)template中的v-if和v-for。換成Render函數(shù)，可以這樣寫：20<ul
v-if="items
.length">
<li
v-for="item
in
items">{{item
}}</li></ul>
<p
v-else>No
items
found.</p>Vue.
component('
item-list',
{
props:
['items
'],
render:
function
(
createElement
){
if
(this.
items.
length)
{
return
createElement('ul',
this.
items
.
map((item)
=>{
return
createEl
ement(
'
item"
))))
}else
{
return
createElement(
'p',
'No
items
found.
"
)
}}}})8.3.2v-model【例8-5】使用Render函數(shù)實現(xiàn)v-model指令<body><divid="app"><el-input:name="name"@input="val=>name=val"></el-input><div>您學習的平臺是:{{name}}</div></div><script>Vue.component('el-input',{render:function(createElement){varself=this;returncreateElement('input',{domProps:{value:self.name},on:{input:function(event){self.$emit('input',event.target.value);.}}}),實現(xiàn)數(shù)據(jù)雙向綁定8.3.3slot插槽【例8-6】this.$slots獲取VNodes列表中的靜態(tài)內容<body><divid="app"><blog-post><h1slot="header"><span>可以從this.$slots獲取VNodes列表中的靜態(tài)內容</span></h1><p>這里是一個段落</p><pslot="footer">版權所有</p><p>這里是另一個段落</p></blog-post></div><script>Vue.component('blog-post',{render:function(createElement){varheader=this.$slots.header,//返回由VNode組成的數(shù)組body=this.$slots.default,footer=this.$slots.footer;returncreateElement('div',[createElement('header',header)，createElement('main',body),createElement('footer',footer)])}});newVue({el:'#app'this.$slots.header獲取header插槽的值，this.$slots.default獲取插槽中的默認值8.3.4作用域插槽【例8-7】this.$scopedSlots作用域插槽<body><divid="app"><ele><templatescope="props"><
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 辦公室裝修合同終止協(xié)議書
- 臨床護士長月工作計劃
- 化妝品倉儲租賃協(xié)議
- 2024深圳市沙井職業(yè)高級中學工作人員招聘考試及答案
- 2024漯河市第二中等專業(yè)學校工作人員招聘考試及答案
- 成都餐飲商鋪租賃合同
- 2024河南省信陽航空服務學校工作人員招聘考試及答案
- 腦梗死護理查房醫(yī)學
- 家族企業(yè)股份轉讓合同協(xié)議
- 供應鏈合作協(xié)議合同
- 2025婚禮策劃服務的合同范本
- 模塊三 幼兒教師職業(yè)口語訓練課件 第十單元 幼兒教師教學口語
- 推動學校數(shù)字化轉型的創(chuàng)新策略與實踐路徑
- 探秘京劇臉譜（課件）六年級下冊綜合實踐活動遼師大版
- 靜脈采血操作課件
- 2024年中國勞動關系學院校聘崗位招聘考試真題
- T-CGTA 01-2024 豬飼用玉米標準
- (正式版)SH∕T 3548-2024 石油化工涂料防腐蝕工程施工及驗收規(guī)范
- 現(xiàn)澆箱梁盤扣式現(xiàn)澆支架施工方案(通過專家論證)
- 《監(jiān)督法》講座稿
- 熱質交換課第05講(習題課1)
評論
0/150
提交評論