Vue.js前端开发框架应用（微课版） 课件 第八章 Vue.js渲染方法

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