阶段4_6_Vue vue_教案

VUE学习目标能够掌握VUE常用的指令能够掌握VUE中AJAX的请求方式能够掌握综合案例的编写学习指南VUE的入门VUE的常用指令VUE中的异步请求方式VUE的综合案例1 第一堂课本节知识点 今日课程内容介绍课程资料说明vue概述和MVVM说明vue入门案例的前期准备vue的入门案例本节目标能够知道MVVM的含义及解决的问题能够准备vue开发的环境，创建一个web项目能够完成vue的入门案例视频时间：27分23秒1.1 今日课程内容介绍1.1.1 知识概述今日内容介绍1.1.2 视频详情1.1.3 总结与补充1、Vue概述2、Vue的快速入门3、Vue的语法插值表达式事件的绑定数据的显示逻辑判断和循环输出4、Vue的生命周期8个生命周期的执行点4个基本的4个特殊的5、axios的ajax异步请求它和jquery的ajax比较相似6、综合案例实现用户的查询列表和更新操作前端：Vue后端：ssm1.1.4 课堂提问与练习无1.1.5 习题答案无1.2 课程资料说明1.2.1 知识概述介绍目前提供的资料1.2.2 视频详情1.2.3 总结与补充介绍目前提供的资料其中目录：代码vuedemo练习 部分需要供学员练习使用1.2.4 课堂提问与练习无1.2.5 习题答案无1.3 vue概述和MVVM说明1.3.1 知识概述介绍vue，并且画图说明了MVVM的含义1.3.2 视频详情1.3.3 总结与补充1.1 VueJS介绍Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。1.2 MVVM模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷1.3.4 课堂提问与练习无1.3.5 习题答案无1.4 vue入门案例的前期准备1.4.1 知识概述环境准备，创建web项目1.4.2 视频详情1.4.3 总结与补充环境准备，创建一个web项目，空项目即可导入提前准备好的练习到项目的webapp目录下1.4.4 课堂提问与练习无1.4.5 习题答案无1.5 vue的入门案例1.5.1 知识概述无1.5.2 视频详情1.5.3 总结与补充1.5.4 课堂提问与练习无1.5.5 习题答案无2 第二堂课本节知识点 vue的插值表达式vue的v-on绑定点击事件vue的v-on键盘事件和阻止事件默认行为vue的v-on鼠标移动事件和阻止事件传播本节目标能够掌握插值表达式的使用方式能够掌握v-on绑定点击事件的语法能够使用v-on的键盘事件和阻止事件的默认行为能够掌握v-on:mouseover的使用视频时间：33:032.1 vue的插值表达式2.1.1 知识概述插值表达式的使用2.1.2 视频详情2.1.3 总结与补充插值表达式支持数据显示,三元表达式，数学运算2.1.4 课堂提问与练习无2.1.5 习题答案无2.2 vue的v-on绑定点击事件2.2.1 知识概述2.2.2 视频详情2.2.3 总结与补充可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码2.2.4 课堂提问与练习无2.2.5 习题答案无2.3 vue的v-on键盘事件和阻止事件默认行为2.3.1 知识概述2.3.2 视频详情2.3.3 总结与补充 2.3.4 课堂提问与练习2.3.5 习题答案无2.4 vue的v-on鼠标移动事件和阻止事件传播2.4.1 知识概述2.4.2 视频详情2.4.3 总结与补充事件名称 就是 v-on:事件名称的简写方式mouseover它就等同于v-on:mouseover2.4.4 课堂提问与练习2.4.5 习题答案3 第三堂课本节知识点vue中的事件修饰符vue中v-text和v-html以及v-bind的使用vue中的按键修饰符vue中的v-for的使用vue中的v-model的使用本节目标能够掌握vue中定义的事件修饰符能够掌握v-text，v-html，v-bind的使用能够vue中按键修饰符的使用能够掌握v-for的使用能够掌握v-model的作用视频时间：27:513.1 vue中的事件修饰符3.1.1 知识概述3.1.2 视频详情3.1.3 总结与补充Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。.stop .prevent .capture .self .once3.1.4 课堂提问与练习无3.1.5 习题答案无3.2 vue中v-text和v-html以及v-bind的使用3.2.1 知识概述3.2.2 视频详情3.2.3 总结与补充v-text：原样输出v-html:解析html内容输入v-bind的使用v-bind简写方式.3.2.4 课堂提问与练习无3.2.5 习题答案无3.3 vue中的按键修饰符3.3.1 知识概述3.3.2 视频详情3.3.3 总结与补充Vue 允许为 v-on 在监听键盘事件时添加按键修饰符全部的按键别名：.enter.tab.delete (捕获 删除 和 退格 键).esc.space.up.down.left.right.ctrl.alt.shift.meta3.3.4 课堂提问及练习3.3.5 习题答案3.4 vue中的v-for的使用3.4.1 知识概述3.4.2 视频详情3.4.3 总结与补充遍历简单的数组遍历js对象遍历复杂数组3.4.4 课堂提问及练习3.4.5 习题答案3.5 vue中的v-model的使用3.5.1 知识概述3.5.2 视频详情3.5.3 总结与补充v-model绑定变量3.5.4 课堂提问及练习3.5.5 习题答案4 第四堂课本节知识点 vue中的v-show和v-if的使用vue的声明周期介绍vue的ajax以及案例的介绍案例-创建数据库和工程本节目标能够掌握v-show和v-if的使用方式能够了解vue的整个生命周期能够掌握vue的ajax方式的get和post请求格式能够根据文档创建数据库及web工程视频时间：27:024.1 vue中的v-show和v-if的使用4.1.1 知识概述4.1.2 视频详情4.1.3 总结与补充v-if是根据表达式的值来决定是否渲染元素v-show是根据表达式的值来切换元素的display css属性4.1.4 课堂提问与练习无4.1.5 习题答案无4.2 vue的声明周期介绍4.2.1 知识概述4.2.2 视频详情4.2.3 总结与补充vue在生命周期中有这些状态，beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子请查看案例 demo14.htmlvue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容l beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象l created ：数据已经绑定到了对象实例，但是还没有挂载对象l beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点l mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作l 当我们的data发生改变时，会调用beforeUpdate和updated方beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新l beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动4.2.4 课堂提问与练习无4.2.5 习题答案无4.3 vue的ajax以及案例的介绍4.3.1 知识概述4.3.2 视频详情4.3.3 总结与补充4.1 vue-resourcevue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。vue-resource的github: /pagekit/vue-resource4.2 axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github:/axios/axios4.2.1 引入axios首先就是引入axios,如果你使用es6，只需要安装axios模块之后import axios from axios;/安装方法npm install axios/或bower install axios当然也可以用script引入get请求/通过给定的ID来发送请求axios.get(/user?ID=12345).then(function(response)console.log(response);).catch(function(err)console.log(err););/以上请求也可以通过这种方式来发送axios.get(/user,params:ID:12345).then(function(response)console.log(response);).catch(function(err)console.log(err););post请求axios.post(/user,firstName:Fred,lastName:Flintstone).then(function(res)console.log(res);).catch(function(err)console.log(err););为方便起见，为所有支持的请求方法提供了别名axios.request(config)axios.get(url, config)axios.delete(url, config)axios.head(url, config)axios.post(url, data, config)axios.put(url, data, config)axios.patch(url, data, config)4.3.4 课堂提问与练习无4.3.5 习题答案无4.4 案例-创建数据库和工程4.4.1 知识概述4.4.2 视频详情4.4.3 总结与补充创建数据库及数据库中的表和数据创建web项目，导入资料中的pom坐标4.4.4 课堂提问与练习无4.4.5 习题答案无5 第五堂课本节知识点 案例-编写实体类持久层和业务层代码案例-导入spring配置文件并编写测试类测试案例-导入springmvc的配置并编写控制器代码本节目标能够完成实体类和业务代码的编写能够导入spring配置文件及完成测试代码导入springmvc配置及编写controller代码视频时间：24:545.1 案例-编写实体类持久层和业务层代码5.1.1 知识概述5.1.2 视频详情5.1.3 总结与补充编写实体类UserDaoUserServiceUserServiceImpl5.1.4 课堂提问与练习无5.1.5 习题答案无5.2 案例-导入spring配置文件并编写测试类测试5.2.1 知识概述5.2.2 视频详情5.2.3 总结与补充1,导入资料中的spring相关的配置文件及properties属性配置文件2,编写代码测试5.2.4 课堂提问与练习无5.2.5 习题答案无5.3 案例-导入springmvc的配置并编写控制器代码5.3.1 知识概述5.3.2 视频详情5.3.3 总结与补充1,导入案例中的所有页面前端相关2，导入springmvc配置，同时导入web.xml文件3，编写UserController5.3.4 课堂提问与练习无5.3.5 习题答案无6 第六堂课本节知识点 案例-修改页面中引入资源的路径并让vue接