Vue.js前端開發框架應用Vue.js渲染方法目

錄虛擬節點渲染方法JavaScript代替模板功能目

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

tag:"div",//節點的標簽名data:{attrs:{id:"app"}},//節點數據

children:[//子節點數組，每個子節點也是VNode

{

tag:'a',

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

children:[...],

},

{

tag:undefined,

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

children:undefined,

...

}

],

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

錄虛擬節點渲染方法JavaScript代替模板功能渲染方法一、渲染方法使用渲染方法創建HTML，可通過聲明渲染方法render來代替template設置需要展示的內容。舉例，注冊組件user，通過渲染方法render代替template設置需要展示的內容：ponent('user',{render:function(){return'hello';}});<user></user>render函數返回字符串渲染方法一、渲染方法使用渲染方法創建HTML，可通過聲明渲染方法render來代替template設置需要展示的內容。舉例，注冊組件user，通過渲染方法render代替template設置需要展示的內容：ponent('user',{render:function(){return['hello','world']}});<user></user>render函數返回數組渲染方法一、渲染方法使用渲染方法創建HTML，可通過聲明渲染方法render來代替template設置需要展示的內容。舉例，注冊組件user，通過渲染方法render代替template設置需要展示的內容：ponent('user',{render:function(){varaVNode=Vue.h('a',{href:''},'鏈接可點擊');returnaVNode;}});<user></user>render函數返回VNode渲染方法一、渲染方法【案例】，商品購買數量：<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>目

錄虛擬節點渲染方法JavaScript代替模板功能JavaScript代替模板功能一、v-if和v-for當使用渲染函數代替模板時，可通過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使用渲染函數而非模板,結合v-model來實現按數據的雙向綁定根據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【案例】，書籍查找：<divid="app"><searchv-model:name="bookName"v-model:publisher="publisher":publisher-list="publisherList"></search><p>輸入的書籍名稱：{{bookName}}</p><p>選擇的出版社：{{publisher}}</p></div>JavaScript代替模板功能二、v-model【案例】，書籍查找：<divid="app"><searchv-model:name="bookName"v-model:publisher="publisher":publisher-list="publisherList"></search><p>輸入的書籍名稱：{{bookName}}</p><p>選擇的出版社：{{publisher}}</p></div>ponent('search',{props:["name","publisher","publisherList"],emits:["update:name","update:publisher"],render(){varself=this;//書籍名稱輸入框varbookNameNode=h("input",{placeholder:"請輸入書籍名稱",style:{marginRight:"20px",marginLeft:"10px"},value:,oninput:function($event){self.$emit("update:name",$event.target.value);}});...}})JavaScript代替模板功能三、slots在模板中，<slot>元素作為承載內容分發的出口。而在渲染函數中，通過this.$slots訪問靜態插槽的內容【案例】，頁面布局：JavaScript代替模板功能三、slots在模板中，<slot>元素作為承載內容分發的出口。而在渲染函數中，通過this.$slots訪問靜態插槽的內容.【案例】，頁面布局：<divid="app"><base-layout><templatev-slot:header><div>這是頁面的頭部</div></template><templatev-slot:sideBar><div>這是頁面的側邊欄</div></template><templatev-slot:main><div>這是頁面的主要內容</div></template></base-layout></div>ponent('base-layout',{render:fun