Vue.js前端開(kāi)發(fā)框架應(yīng)用（微課版） 課件 第八章 Vue.js渲染方法

Vue.js前端開(kāi)發(fā)框架應(yīng)用Vue.js渲染方法目

錄虛擬節(jié)點(diǎn)渲染方法JavaScript代替模板功能目

錄虛擬節(jié)點(diǎn)渲染方法JavaScript代替模板功能虛擬節(jié)點(diǎn)一、DOM節(jié)點(diǎn)樹(shù)在頁(yè)面的渲染流程中，瀏覽器根據(jù)HTML文檔創(chuàng)建DOM節(jié)點(diǎn)樹(shù)，而該DOM節(jié)點(diǎn)樹(shù)決定要渲染頁(yè)面的內(nèi)容和結(jié)構(gòu)。舉例，以如下的HTML代碼片段為例，對(duì)應(yīng)的DOM節(jié)點(diǎn)樹(shù)如圖所示：根據(jù)HTML結(jié)構(gòu)，DOM節(jié)點(diǎn)之間以父子關(guān)系建立起聯(lián)系，構(gòu)成DOM節(jié)點(diǎn)樹(shù)。DOM節(jié)點(diǎn)樹(shù)<div><h1>我的標(biāo)題</h1>這是一段文本<ahref=”#”>點(diǎn)擊跳轉(zhuǎn)</a><div>HTML代碼片段虛擬節(jié)點(diǎn)二、虛擬DOM當(dāng)原生JavaScript或者jQuery通過(guò)操作DOM來(lái)更新某個(gè)節(jié)點(diǎn)時(shí)，瀏覽器將從構(gòu)建DOM節(jié)點(diǎn)樹(shù)開(kāi)始，從頭到尾執(zhí)行一遍頁(yè)面的渲染流程，于是，頻繁操作DOM將會(huì)降低頁(yè)面中的交互響應(yīng)速度，影響用戶體驗(yàn)。使用傳統(tǒng)方法更新DOM節(jié)點(diǎn)比較低效，于是，虛擬DOM應(yīng)運(yùn)而生，實(shí)現(xiàn)頁(yè)面的高效更新。以虛擬節(jié)點(diǎn)（VNode）來(lái)表示真實(shí)的DOM節(jié)點(diǎn)，而虛擬DOM則是對(duì)整個(gè)虛擬節(jié)點(diǎn)（VNode）樹(shù)的稱呼。虛擬節(jié)點(diǎn)二、虛擬DOM舉例，以如下的HTML代碼段為例，構(gòu)造出的虛擬節(jié)點(diǎn)如圖所示：tag：節(jié)點(diǎn)的標(biāo)簽名data：節(jié)點(diǎn)數(shù)據(jù)，包含屬性相關(guān)的數(shù)據(jù)children：由多個(gè)虛擬節(jié)點(diǎn)構(gòu)成，描述真實(shí)DOM節(jié)點(diǎn)間的層級(jí)關(guān)系。<divid="app"><ahref="">點(diǎn)擊跳轉(zhuǎn)</a>這是一段文字</div>{

tag:"div",//節(jié)點(diǎn)的標(biāo)簽名data:{attrs:{id:"app"}},//節(jié)點(diǎn)數(shù)據(jù)

children:[//子節(jié)點(diǎn)數(shù)組，每個(gè)子節(jié)點(diǎn)也是VNode

{

tag:'a',

data:{attrs:{href:''}},

children:[...],

},

{

tag:undefined,

text:'\n這是一段文字\n',

children:undefined,

...

}

],

...}HTML代碼片段虛擬節(jié)點(diǎn)虛擬節(jié)點(diǎn)二、虛擬DOMVue項(xiàng)目在運(yùn)行時(shí)，渲染器根據(jù)虛擬DOM樹(shù)來(lái)構(gòu)建真實(shí)的DOM節(jié)點(diǎn)樹(shù)。當(dāng)開(kāi)發(fā)者使用類(lèi)如v-if、v-model、v-show等指令來(lái)更新頁(yè)面內(nèi)容時(shí)，將會(huì)觸發(fā)虛擬DOM樹(shù)的變化。而這些變化將會(huì)應(yīng)用于真實(shí)DOM節(jié)點(diǎn)樹(shù)。Vue項(xiàng)目中，開(kāi)發(fā)者們無(wú)需手動(dòng)操作真實(shí)DOM。虛擬節(jié)點(diǎn)三、創(chuàng)建VNode使用Vue.js提供的h函數(shù)，可手動(dòng)創(chuàng)建虛擬節(jié)點(diǎn)VNode。語(yǔ)法如下：type：必填參數(shù)。指定節(jié)點(diǎn)的類(lèi)型，一般為HTML標(biāo)簽名稱。props：選填參數(shù)。數(shù)據(jù)類(lèi)型為對(duì)象，用于配置節(jié)點(diǎn)的多個(gè)屬性，如id、class、style、onClick等屬性。children：選填參數(shù)。設(shè)置子節(jié)點(diǎn)。Vue.h(type,props,children);{id:‘box’,class:‘box’,style:{width:‘10px’,height:‘10px’}}//節(jié)點(diǎn)的子節(jié)點(diǎn)為文本:varvnode=Vue.h('a',{href:''},'鏈接可點(diǎn)擊');//節(jié)點(diǎn)包含兩個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn)（這是一段話），VNode（vnode）varvnode2=Vue.h('div',{},['這是一段話',vnode]);虛擬節(jié)點(diǎn)三、創(chuàng)建VNode【案例】，根據(jù)HTML代碼，創(chuàng)建虛擬節(jié)點(diǎn)：<divid="app"><pstyle="color:red">這是一段話</p><ahref="">這是一個(gè)鏈接</a><buttononClick="alert('你好')">這是一個(gè)按鈕</button></div>HTML代碼片段varpVnode=Vue.h('p',{style:{color:'red'}},'這是一段話');varaVnode=Vue.h('a',{href:''},'這是一個(gè)鏈接');varbuttonVnode=Vue.h('button',{onClick:function(){alert('你好')}},'這是一個(gè)按鈕');vardivVnode=Vue.h('div',{id:'app'},[pVnode,aVnode,buttonVnode]);目

錄虛擬節(jié)點(diǎn)渲染方法JavaScript代替模板功能渲染方法一、渲染方法使用渲染方法創(chuàng)建HTML，可通過(guò)聲明渲染方法render來(lái)代替template設(shè)置需要展示的內(nèi)容。舉例，注冊(cè)組件user，通過(guò)渲染方法render代替template設(shè)置需要展示的內(nèi)容：ponent('user',{render:function(){return'hello';}});<user></user>render函數(shù)返回字符串渲染方法一、渲染方法使用渲染方法創(chuàng)建HTML，可通過(guò)聲明渲染方法render來(lái)代替template設(shè)置需要展示的內(nèi)容。舉例，注冊(cè)組件user，通過(guò)渲染方法render代替template設(shè)置需要展示的內(nèi)容：ponent('user',{render:function(){return['hello','world']}});<user></user>render函數(shù)返回?cái)?shù)組渲染方法一、渲染方法使用渲染方法創(chuàng)建HTML，可通過(guò)聲明渲染方法render來(lái)代替template設(shè)置需要展示的內(nèi)容。舉例，注冊(cè)組件user，通過(guò)渲染方法render代替template設(shè)置需要展示的內(nèi)容：ponent('user',{render:function(){varaVNode=Vue.h('a',{href:''},'鏈接可點(diǎn)擊');returnaVNode;}});<user></user>render函數(shù)返回VNode渲染方法一、渲染方法【案例】，商品購(gòu)買(mǎi)數(shù)量：<ul><liv-for="iteminfruits"><div>{{item.goodsName}}<spanclass="unit">({{item.unit}})</span>：</div><count-update:count="item.count"@update="updateCount":id="item.id"></count-update></li></ul>目

錄虛擬節(jié)點(diǎn)渲染方法JavaScript代替模板功能JavaScript代替模板功能一、v-if和v-for當(dāng)使用渲染函數(shù)代替模板時(shí)，可通過(guò)JavaScript代碼代替v-if和v-for指令【案例】，商品列表展示：<divid='app'><goods-list:list='goodsList'></goods-list></div>ponent('goods-list',{props:['list'],render:function(){if(this.list.length===0){returnh('p','這里空空如也');}varvNodes=this.list.map(function(item){returnh('li',{key:item.id},item.goodsName);});returnh('ul',vNodes);}});列表不為空列表為空v-ifv-forJavaScript代替模板功能二、v-model使用渲染函數(shù)而非模板,結(jié)合v-model來(lái)實(shí)現(xiàn)按數(shù)據(jù)的雙向綁定根據(jù)Vue.js官方文檔，其固定格式如下所示{props:['modelValue'],emits:['update:modelValue'],render(props,{emit}){returnh(SomeComponent,{modelValue:props.modelValue,'onUpdate:modelValue':(value)=>emit('update:modelValue',value)});}}自定義組件input、select等表單元素JavaScript代替模板功能二、v-model【案例】，書(shū)籍查找：<divid="app"><searchv-model:name="bookName"v-model:publisher="publisher":publisher-list="publisherList"></search><p>輸入的書(shū)籍名稱：{{bookName}}</p><p>選擇的出版社：{{publisher}}</p></div>JavaScript代替模板功能二、v-model【案例】，書(shū)籍查找：<divid="app"><searchv-model:name="bookName"v-model:publisher="publisher":publisher-list="publisherList"></search><p>輸入的書(shū)籍名稱：{{bookName}}</p><p>選擇的出版社：{{publisher}}</p></div>ponent('search',{props:["name","publisher","publisherList"],emits:["update:name","update:publisher"],render(){varself=this;//書(shū)籍名稱輸入框varbookNameNode=h("input",{placeholder:"請(qǐng)輸入書(shū)籍名稱",style:{marginRight:"20px",marginLeft:"10px"},value:,oninput:function($event){self.$emit("update:name",$event.target.value);}});...}})JavaScript代替模板功能三、slots在模板中，<slot>元素作為承載內(nèi)容分發(fā)的出口。而在渲染函數(shù)中，通過(guò)this.$slots訪問(wèn)靜態(tài)插槽的內(nèi)容【案例】，頁(yè)面布局：JavaScript代替模板功能三、slots在模板中，<slot>元素作為承載內(nèi)容分發(fā)的出口。而在渲染函數(shù)中，通過(guò)this.$slots訪問(wèn)靜態(tài)插槽的內(nèi)容.【案例】，頁(yè)面布局：<divid="app"><base-layout><templatev-slot:header><div>這是頁(yè)面的頭部</div></template><templatev-slot:sideBar><div>這是頁(yè)面的側(cè)邊欄</div></template><templatev-slot:main><div>這是頁(yè)面的主要內(nèi)容</div></template></base-layout></div>ponent('base-layout',{render:fun