JavaEE框架整合开发创新·协作·分享TIPCC教案第十五章Vue3进阶授课教师：陈恒大连外国语大学TIPCC教案本章目标1.了解render函数的原理2.了解静态模块打包工具webpack的用法3.了解组合API的用法4.掌握路由vue-router的基本用法5.掌握Vue.js应用程序开发的状态管理模式2TIPCC教案本章内容315.1render函数15.2组合API15.3使用webpack15.4路由vue-router15.5状态管理与VuexTIPCC教案15.1render函数15.1.1什么是render函数15.1.2h()函数4TIPCC教案15.1.1什么是render函数render函数与模板template一样，都是创建HTML。在多数情况下，Vue推荐使用模板template来创建HTML。然而在一些应用场景中，需要使用JavaScript创建HTML。这时可以用渲染函数render，它比模板更方便。【例ch15-1】根据不同等级的锚点，显示不同的标题。5代码没有任何问题，但是缺点非常明显：代码冗长、重复率高。？请思考为什么学习render函TIPCC教案【例15-2】使用render函数改写【例15-1】6app.component('anchored-heading',{render(){returnVue.h('h'+this.level,//tag参数[//children参数Vue.h('a',//tag参数{//props参数href:'#'+this.title},this.$slots.default()//children参数)])},props:{level:{……},title:{……}}})app.mount('#app')render函数通过Vue的h函数来创建虚拟DOM，代码精简很多。TIPCC教案15.1render函数15.1.1什么是render函数15.1.2h()函数7TIPCC教案15.1.2h()函数h()函数是一个用于创建虚拟节点（VNode）的程序。也许可以更准确地将其命名为createVNode()，以便简洁使用，被称为h()。81．tag参数代表一个HTML标签（String）、一个组件（Object）、一个函数（Function）或者null。使用null将渲染一个注释。这是一个必选参数。例如，【例15-2】中的'a’。2．props参数一个与attribute、prop和事件相对应的对象（Object），用于向创建的节点对象设置属性值，在模板中使用。这是一个可选参数。例如，【例15-2】中的{href:'#'+this.title}。3．children参数子Vnodes，使用h()函数构建，或使用字符串获取“文本Vnode”（String|Array）或者有slot的对象（Object）。这是一个可选参数。例如，【例15-2】中的代码：[//childrenVue.h('a',//tag{//propshref:'#'+this.title},this.$slots.default()//children)]TIPCC教案本章内容915.1render函数15.2组合API15.3使用webpack15.4路由vue-router15.5状态管理与VuexTIPCC教案15.2组合API15.2.1setu...
