第11章 Vue前端框架.pptx

第11章 Vue前端框架,第11章 Vue前端框架,11.1 Vue简介11.2 Vue脚手架11.3 目录结构11.4 初识setup和ref11.5 模板语法11.6 生命周期钩子11.7 reactive函数11.8 初识Vue组件,2,11.9 深入setup11.10 计算属性11.11 条件渲染11.12 列表渲染11.13 watch监视11.14 provide与inject11.15 Vue路由11.16 axios发送请求,11.1 Vue简介,与知名前端框架Angular一样，Vue.js在设计上也使用了MVVM(Model-View-ViewModel)模式。MVVM模式本质上就是MVC的改进版，View绑定到ViewModel，然后执行一些命令，再向它请求一个动作，View和ViewModel之间通过双向绑定建立联系。ViewModel跟Model通讯，告诉它更新来响应UI，这样便使得为应用构建UI非常容易。,3,11.2 Vue脚手架,vue-cli是Vue的脚手架工具，它大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，搭建了一个测试环境。使用vue-cli前，要确保已经安装了最新版的Node.js和NPM。,4,11.2 Vue脚手架,使用vue-cli构建一个项目的步骤。（1）创建自己的工作空间，这里以D盘根目录为工作空间。（2）安装vue-cli，直接在cmd命令端口中输入如下命令：D:npm install-g vue/cli 在cmd命令端口中输入如下命令查看版本：D:vue V（3）在命令端口中输入命令，创建一个基于webpack模板的新项目 D:vue create vue3-demo（4）在命令端口中，切换到项目路径 D:cd vue3-demo,5,11.2 Vue脚手架,使用vue-cli构建一个项目的步骤。（5）输入命令，就可以启动这个项目 D:vue3-demonpm run serve 项目启动成功后,控制台显示如右图所示。（6）打开浏览器，输入地址http:/localhost:8080，页面输出如下图所示。,6,11.3 目录结构,使用Visual Studio Code打开项目vue3-demo，可以查看项目的目录结构。,7,node_modules目录用于存放项目的依赖项。public目录用于存放公共静态资源，该目录下的index.html是项目的主页，即入口html页面。src是项目的核心目录，assets子目录用于存放静态资源文件，如字体、图标、图片等，components子目录用于存放公共组件，使用vue-cli构建项目时，默认会在该目录下创建组件HelloWorld.vue。App.vue是根组件，main.js是项目执行的入口js。.gitignore用来指定git提交时需要忽略的文件格式，.babel.config.js是babel配置文件，package.json用来保存项目依赖项的版本信息，package-lock.json用来保存node_modules目录下所有依赖项的具体来源、版本号和其他信息，README.md是项目的说明文档。,11.3 目录结构,main.js是项目执行的入口js文件，初始时该文件里只有三行代码：import createApp from vue import App from./App.vue createApp(App).mount(#app)在main.js文件中，通过“import.from.”这个ES6语法中的新特性，先引入一个名为“createApp”的工厂函数，再引入App.vue这个根组件。接下来通过createApp(App)创建一个应用实例对象，createApp方法的参数是根组件对象App，即创建了一个根实例对象，并调用mount方法将这个实例对象挂载到某个html的DOM节点上。一般通过id选择器的形式，指定挂载的DOM元素，这里的“#app”表示挂载到public目录下index.html这个文件中id为“app”的div节点上。,8,11.3 目录结构,打开index.html文件中，能看到这个id为“app”的div节点。启动项目并通过浏览器访问，首先访问的就是这个index.html文件，因为有一个id为app的挂载点，接着根实例对象就会挂载到这个挂载点上。,9,11.3 目录结构,初始时，根组件App.vue内容如右图所示。一个Vue组件主要包括模板、行为和样式三个部分。以根组件App.vue为例，模板是组件中template中的内容（将替代原来挂载点的内容），行为是script中的内容，样式是style中的内容。在script中，使用export default将根组件App.vue导出为一个对象，并通过name属性将导出名称指定为“App”。在其它组件中，就可以使用import引入这个导出的对象了。此外，通过components属性局部注册组件HelloWorld。当然，这个HelloWorld组件需要事先通过import进行引入。,10,同时，在根组件App.vue的template中，还需要使用这个组件。,11.4 初识setup和ref,setup是Vue3组合式API中的一个函数，在setup函数中，可以定义变量和方法等。但是，需要将这些变量和方法return 出去，否则无法在模板中使用。在组件HelloWorld.vue中，添加setup函数。,11,11.4 初识setup和ref,ref也是Vue3组合式API中的一个函数，用来定义响应式变量。在使用ref函数时，需要在组件的script中引入。import ref from vue;ref 函数接受参数并返回一个对象，并将这个参数包装在返回对象的value属性中。在组件HelloWorld.vue的setup函数中，定义一个响应式变量counter。var counter=ref(0);响应式变量counter的value属性值为0，可以使用counter.value访问或修改响应式变量的值。,12,11.4 初识setup和ref,在setup函数中，还可以自定义函数。const add=()=counter.value+;这里，使用ES6箭头函数语法，定义了函数add，对响应式变量counter进行+操作。箭头函数省略了function关键字，采用箭头“=”来定义函数。函数的参数放在箭头前面的括号中，函数体跟在箭头后面的花括号中。在setup函数中，将响应式变量counter和自定义函数add通过return返回出去，这样才能在template模板中使用。return counter,add,13,11.4 初识setup和ref,在组件HelloWorld.vue的template模板中，使用响应式变量counter和自定义函数add。在template模板中，使用了“Mustache”语法（双大括号）的文本插值，counter 将会被替代为组件实例中响应式变量counter的值。无论何时，绑定的组件实例上响应式变量counter的值发生了改变，插值处的内容都会更新。还添加了标签，并通过click给标签绑定点击事件。单击这个按钮时，会调用自定义函数add，将响应式变量counter的value值加1。,14,11.4 初识setup和ref,启动项目并通过浏览器访问，多次单击“+1”按钮，计数不断变化。,15,11.5 模板语法,Vue.js使用了基于HTML的模版语法，可以采用简洁的模板语法来声明式的将数据渲染进DOM。通过结合响应系统，在应用状态改变时，能智能地计算重新渲染组件的最小代价并应用到DOM操作上。,16,11.5.1 插值,(1)文本插值数据绑定最常见的形式就是使用.（双大括号）的文本插值，在组件HelloWorld.vue的template中，文本插值代码如下：counter,17,11.5.1 插值,(2)原始HTML双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令。示例：1)在组件HelloWorld.vue的setup函数中，先定义一个响应式变量msg1var msg1=ref(Hello Vue!);2)将变量msg1通过return返回出去return,msg1 3)在template模板中使用v-html指令，如右图所示。启动项目并通过浏览器访问，页面输出如图。,18,11.5.1 插值,(3)属性如果要动态更新HTML元素上的属性，比如id、class和style等，可以使用v-bind指令。示例：,19,1)在组件HelloWorld.vue的setup函数中，先定义一个响应式变量styleObject。2)将变量styleObject通过return返回出去。return,styleObject;3)在template模板中使用v-bind:style，给标签动态绑定样式，将其直接绑定到样式对象styleObject。,启动项目并通过浏览器访问，页面输出如右图。,11.5.1 插值,表达式 Vue.js提供了完全的JavaScript表达式支持 示例：（1）在组件HelloWorld.vue的setup函数中，先定义三个响应式变量 var flag=ref(true);var message=ref(Hello Vue!);var id=ref(10);（2）将变量这三个变量通过return返回出去（3）在template模板中，使用表达式,20,11.5.2 指令,指令(Directives)是带有“v-”前缀的特殊特性，用于在表达式的值改变时，将某些行为应用到DOM上。示例（1）在组件HelloWorld.vue的setup函数中，先定义一个响应式变量show var show=ref(true);（2）将变量show通过return返回出去 return,show;（3）在template模板中，使用v-if指令,21,11.5.2 指令,一些指令还可以接收一个参数，在指令名称之后以冒号表示。例如v-bind:href，这里href 是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。示例（1）在组件HelloWorld.vue的setup函数中，先定义一个响应式变量url var url=ref(http:/);（2）将变量url通过return返回出去 return.url;（3）在template模板中，使用v-bind:href 百度一下,22,11.5.3 用户输入,在input输入框中，可以使用v-model指令来实现双向数据绑定。示例（1）在组件HelloWorld.vue的template模板中，使用v-model message（2）在输入框中修改内容，和它绑定的值也会发生变化,23,11.5.4 缩写,Vue.js为v-bind和v-on这两个最常用的指令提供了特定简写。,24,v-on指令缩写前后的对比,v-bind指令缩写前后的对比,11.6 生命周期钩子,每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监视、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，用户可以在不同阶段添加自己的处理业务逻辑的代码。在组件的setup函数内，可以调用的生命周期钩子包括onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等。onBeforeMount在实例挂载开始之前被调用，onMounted在实例被挂载后调用，onBeforeUpdate在DOM更新前调用，onUpdated在DOM更新后调用，onBeforeUnmount在卸载组件实例之前调用，onUnmounted在卸载组件实例后调用。,25,11.6 生命周期钩子,示例（1）要使用生命周期钩子，需要先引入。在组件HelloWorld.vue的script中，使用import引入6个生命周期钩子。,26,（2）在组件HelloWorld.vue的setup函数中，添加这些生命周期钩子，并输入提示信息。,（3）启动项目并通过浏览器访问，再按下F12键，打开开发者工具，在Console中可以看到setup、onBeforeMount和onMounted这三个函数被依次调用。,import onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,from vue;,（4）单击页面中的“+1”按钮，可以看到onBeforeUpdate和onUpdated这两个函数会被调用,11.6 生命周期钩子,onBeforeUnmount和onUnmounted示例（1）在根组件App.vue的script中引入ref函数。import ref from vue;,27,（2）再添加setup函数，并定义一个响应式变量isShow，并通过return返回出去。,（3）在根组件App.vue的template中，给HelloWorld元素添加一个条件渲染指令v-if，当变量isShow的值为 true时，渲染HelloWorld元素，否则不渲染。,（4）最后添加一个用于隐藏和显示HelloWorld元素的button元素，并通过click给 button元素绑定点击事件，将变量isShow值取反。,启动项目并通过浏览器访问，再按下F12键，打开开发者工具，在Console中可以看到setup、onBeforeMount和onMounted这三个函数被依次调用；,此时，单击“隐藏/显示HelloWorld组件”按钮，在Console中可以看到onBeforeUnmount和onUnmounted这两个生命周期钩子被调用。,11.7 reactive函数,reactive用来定义一个对象类型的响应式变量，不能用来定义基本类型的响应式变量。使用reactive函数前，需要先引入。示例（1）在组件HelloWorld.vue的script中，引入reactive函数 import ref,reactive from vue;（2）在组件HelloWorld.vue的setup函数中，定义一个对象类型的响应式变量student。（3）在setup函数中，将响应式变量student通过return返回出去。,28,11.7 reactive函数,（4）在组件HelloWorld.vue的template模板中，使用响应式变量student。（5）在template模板中，通过student.name和student.age输出student对象的name和age属性值。,29,11.8 初识Vue组件,组件(Component)是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，通过可复用的小组件可以构建大型应用。组件需要注册后才能使用，注册有全局注册和局部注册两种方式。组件的创建和使用示例（1）在项目vue3-demo的components目录下，新建一个组件Child.vue。（2）在根组件App.vue的script中，先通过import引入组件Child.vue。import Child from./components/Child.vue;,30,11.8 初识Vue组件,（3）通过export default中的components属性，采用局部注册的方式，注册组件Child.vue。（4）在根组件App.vue的template模板中，添加标签，就可以使用组件Child.vue了。,31,11.9 深入setup,setup函数还可以接收props和context这两个参数。（1）props参数props参数包含父组件传递给子组件的数据，在子组件中，则需要通过props属性指定要接收的数据。示例：根组件App.vue传递数据给子组件Child.vue（1）在根组件App.vue的template中，修改标签。（2）在子组件Child.vue的export default中，先添加props属性，指定要从父组件接收的属性名为title和content。,32,11.9 深入setup,（3）修改子组件Child.vue的setup函数，给它添加一个props参数，该参数包含了从父组件传递来的title和content属性值，经过toRefs函数处理后return出去。（4）使用toRefs函数前，需要引入。在子组件Child.vue的script中，引入toRefs函数。import toRefs from vue（5）在子组件Child.vue的template模板中，通过文本插值，将从父组件App.vue接收到的title和content属性值显示出来。,33,11.9 深入setup,（2）context参数setup 函数的第二个参数是 context，表示上下文。context 是一个普通的 JavaScript 对象，它包含attrs、slots和emit这三个属性。1）attrs属性在父组件向子组件传递数据时，子组件需要通过props属性来声明父组件传递的属性名，这样才能从props获取相应的属性值。如果props属性中没有声明，则属性值会出现在context对象的attrs 里。props属性中声明的属性名，attrs里就不会出现相应的属性值。props支持支持string以外的类型，而attrs只有string类型。示例：（1）在子组件Child.vue的export default中，修改props属性，将其数组中声明的属性名称content移除，只保留title。,34,11.9 深入setup,由于props属性中没有指定content属性名，因此子组件Child.vue无法从props中获取属性content的值。（2）可以从context对象的attrs里可以获得属性content的值。修改setup函数，给setup函数添加第二个参数context，使用toRefs函数对context对象的attrs进行处理。,35,11.9 深入setup,2）slots属性context对象的slots属性用于接收父组件中定义的插槽内容。示例：slots的作用（1）在根组件App.vue的template模板中，先将自结束标签修改为包含开始和结束的Child标签，并在Child标签体部添加一个span元素。直接在父组件App.vue的标签体部定义的内容，在子组件Child.vue中不会被渲染，使用插槽就能解决这个问题。,36,11.9 深入setup,（2）在子组件Child.vue的template模板中，添加一个元素占位（默认插槽），就可以用来显示父组件标签下的内容了。在子组件Child.vue中的默认插槽中，还可以提供一个默认内容，如果父组件的标签中没有为这个插槽提供了内容，就会显示默认的内容，否则默认的内容会被替换掉。,37,11.9 深入setup,示例：具名插槽在子组件的标签上绑定属性值，通过作用域插槽，在父组件的插槽模板中可以拿到子组件绑定的这些属性值，从而实现子组件向父组件的数据传递。（1）修改子组件Child.vue的template模板中名称为“header”的具名插槽，添加一个userName属性，将其值指定为“张三”。（2）在根组件App.vue的template中，修改标签体部相应的template节点。,38,11.9 深入setup,3）emit属性 在子组件中，可以使用context.emit向父组件发送事件。示例：（1）在子组件Child.vue的template模板中，添加一个标签，并给其绑定click事件，单击这个按钮时，会触发postMsg函数。（2）在子组件Child.vue的setup函数中，添加一个postMsg函数。在postMsg函数中，通过context.emit向父组件App.vue发送自定义事件。,39,11.9 深入setup,（3）在子组件Child.vue的setup函数的return中，将函数postMsgClick返回出去。return.,postMsg;（4）在父组件App.vue的template模板中，修改标签，给其绑定自定义事件postMsgClick，该事件就是子组件发送来的。当postMsgClick事件触发时，会执行showMsg函数。（5）在父组件App.vue的setup函数中，添加一个showMsg函数。在showMsg函数中，通过js的alert函数，弹出一个警告框，显示一段提醒信息和从子组件传递来的参数userName的值。,40,11.9 深入setup,（6）在父组件App.vue的setup函数的return中，将函数showMsg返回出去。return isShow,showMsg;,41,11.10 计算属性,模板内的表达式非常便利，常用于简单运算。但在模板中放入大量的逻辑会让模板难以维护。为了解决这个问题，可以使用计算属性。使用计算属性，需要先引入。示例（1）在子组件Child.vue的script中，修改import，先引入computed函数，再引入ref函数，用于声明响应式变量。import toRefs,ref,computed from vue;（2）在子组件Child.vue的template中，添加三个标签，用于输入性、名和全名。在input输入框中，使用v-model指令来实现双向数据绑定。,42,11.10 计算属性,（3）在子组件Child.vue的setup函数中，使用ref声明响应式变量firstName和lastName，并给它们指定初始值。let firstName=ref(李);let lastName=ref(四);（4）定义一个计算属性fullName，在computed函数中，提供了get和set方法。（5）再将firstName、lastName和fullName这三个变量return出去。,43,11.10 计算属性,将“姓”输入框内容修改为张，此时全名会发生变化。将“全名”输入框内容修改为“诸葛 四”，则“姓”输入框内容也会随之发生变化。,44,11.11 条件渲染,与JavaScript的条件语句if、else、else if类似，Vue.js提供的条件渲染指令v-if、v-else、v-else-if可以根据表达式的值将DOM中元素或组件渲染或销毁。示例（1）在子组件Child.vue的template模板中，添加若干标签，分别使用v-if、v-else-if 和v-else添加渲染指令。（2）在子组件Child.vue的setup函数中，声明一个响应式变量score，并指定初始值为85。let score=ref(85);（3）将score变量return出去。return.,score;,45,11.12 列表渲染,如果想要循环显示一个数组或一个对象属性时，可以使用v-for指令。示例1（1）在子组件Child.vue的setup函数中，使用reactive函数声明一个响应式变量students，并指定初始值。（2）为了使用reactive函数，需要在子组件Child.vue的script中通过import引入。import toRefs,ref,computed,reactive from vue;（3）将students变量return出去。return.,students;,46,11.12 列表渲染,（4）在子组件Child.vue的template模板中，添加一个标签，在标签体部再添加一个标签，在标签上添加v-for指令。,47,11.12 列表渲染,除了数组外，对象的属性也可以使用v-for指令进行渲染。示例2（1）在子组件Child.vue的setup函数中，使用reactive函数声明一个响应式变量stu，并指定初始值。（2）在子组件Child.vue的template模板中，添加一个标签，在标签体部再添加一个标签，在标签上添加v-for指令。,48,