《Vue.js3Web开发案例教程（在线实训版）》 课件全套 温谦 01 Web前端开发概述 - 18 ES6基础知识

vue.js

2024.7vue.js第1章

Web前端开发概述

Web开发简史基于前后端分离模式的Web开发Vue.js的特性MVVM（Model-View-ViewModel）模式Vue.js的核心思想Vue.js开发中常用的工具安装Vue.jsDEMO（猜一个介于1和100之间的整数）第1章

Web前端开发概述

第1章

Web前端开发概述Web开发简史早期阶段服务器端模板阶段服务器端MVC时代前后端分离时代第1章

Web前端开发概述基于前后端分离模式的Web开发从提供内容到提供服务转变

传统互联网3个特点：使用场景固定且局限“内容”为主“服务”局限于特定领域

移动互联网3个特点：使用场景触达社会每个⻆落更多事物被连接到云端海量“服务”

对技术上的3个要求：客户端需求复杂化，大量应用流行，对用户体验的期望提高。客户端渲染成为“刚需”。客户端程序不得不具备完整的生命周期、分层架构和技术栈第1章

Web前端开发概述从“单一网站”到“多终端应用”

特点：服务器端通过API输出数据，剥离“视图”。Web客户端变成独立开发和部署的程序，不再是服务器端Web程序中的“前端”层。每个客户端都倾向于拥有专门为自己量身打造、可被自己掌控的API网站。

在移动时代，一个应用往往需要适配不同的终端形态：桌面应用：传统的Windows应用、Mac应用移动应用：iOS、安卓应用Web：通过浏览器访问的应用超级APP：以微信小程序为代表的超级APP，成为新的应用程序平台。第1章

Web前端开发概述Vue.js与MVVM模式vue.js的特性轻量级数据绑定指令组件化管理插件化开发完整的工具链第1章

Web前端开发概述MVVM（Model-View-ViewModel）模式包括3个核心部分：Model：模型，核心的业务逻辑产生的数据对象，例如从数据库取出的数据，并做特定处理后得到的数据。View：视图，即用户界面。ViewModel：视图模型，用于链接匹配模型和视图之间的专用模型。第1章

Web前端开发概述Vue.js的核心思想包括两点：数据的双向绑定，View和Model之间不直接沟通，而是通过ViewModel这个桥梁进行交互。使用“声明式”的编程理念第1章

Web前端开发概述Vue.js开发中常用的工具：Chrome浏览器VSCode文本编辑器命令行控制台目前常见的浏览器内核有Trident、Gecko、Webkit、Blink这4种。浏览器内核说明Trident代表浏览器是IE，IE内核还被用在众多国内互联网公司推出的双核浏览器中，用作兼容模式Webkit代表浏览器是Safari、旧版的ChromeBlink代表浏览器是Chrome、Opera、新版的EdgeGecko代表浏览器是Firefox第1章

Web前端开发概述安装Vue.js<scriptsrc="/ajax/libs/vue/3.2.19/vue.global.js"></script>第1章

Web前端开发概述上手实践：第一个Vue.js程序第1章

Web前端开发概述DEMO第1章

Web前端开发概述

Web开发简史基于前后端分离模式的Web开发Vue.js的特性MVVM（Model-View-ViewModel）模式Vue.js的核心思想Vue.js开发中常用的工具安装Vue.jsDEMO（猜一个介于1和100之间的整数）请看第2章——

Vue开发入门vue.js

2024.7vue.js第2章

Vue开发入门

Vue应用实例DEMOVue实例的生命周期DEMO（猜数字）第2章

Vue开发入门

第2章

Vue开发入门Vue应用实例文本插值方法属性属性绑定插入HTML片段根vue实例，具体语法形式如下：const

app=Vue.createApp({

//选项对象

});第2章

Vue开发入门DEMO第2章

Vue开发入门Vue实例的生命周期beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted第2章

Vue开发入门DEMO第2章

Vue开发入门

Vue应用实例DEMOVue实例的生命周期DEMO（猜数字）请看第3章——

计算属性与侦听器vue.js

2024.7vue.js第3章

计算属性与侦听器计算属性DEMO侦听器DEMO对数组的侦听替换数组可以被侦听到使用深度侦听DEMO总结第3章

计算属性与侦听器

第3章

计算属性与侦听器计算属性定义计算属性计算属性的缓存特性第3章

计算属性与侦听器DEMO第3章

计算属性与侦听器侦听器侦听器的应用场景拦截操作耗时操作侦听器的基本用法深度侦听侦听对象时获取对象原值使用immediate参数第3章

计算属性与侦听器DEMO第3章

计算属性与侦听器对数组的侦听标准方法修改数组可以被侦听到push()尾部添加pop()尾部删除unshift()头部添加shift()头部删除splice()删除、添加、替换sort()排序reverse()逆序第3章

计算属性与侦听器替换数组可以被侦听到filter()

过滤concat()

拼接slice()从已有的数组中返回选定的元素第3章

计算属性与侦听器使用深度侦听可以侦听到数组的某些变化：直接通过下标的方式去修改数组，例如vm.items[5]=newValue。直接通过修改数组的length属性的方式，例如vm.items.length=10。第3章

计算属性与侦听器DEMO第3章

计算属性与侦听器总结：如果彻底替换为一个新的数组，那么可以被侦听到。如果侦听器已通过“{deep:true}”设置为“深度侦听”的，那么当修改对象元素的属性时，可以被侦听到。如果是数组本身被修改，也可以被侦听到。虽然通过length属性可以修改数组长度，但尽量不要这样修改，建议改用其他标准方法显示数组长度的变化。第3章

计算属性与侦听器计算属性DEMO侦听器DEMO对数组的侦听替换数组可以被侦听到使用深度侦听DEMO总结请看第4章——

控制页面的CSS样式vue.js

2024.7vue.js第4章

控制页面的CSS样式

绑定class属性DEMO绑定style属性DEMO第4章

控制页面的CSS样式

第4章

控制页面的CSS样式绑定class属性对象方式绑定class属性将class属性与对象变量绑定以数组方式绑定class属性动态改变class属性值在数组中使用对象第4章

控制页面的CSS样式DEMO第4章

控制页面的CSS样式绑定style属性以对象方式绑定style属性将style属性与对象变量绑定以数组方式绑定style属性动态改变style属性值第4章

控制页面的CSS样式DEMO第4章

控制页面的CSS样式

绑定class属性DEMO绑定style属性DEMO请看第5章——

事件处理vue.js

2024.7vue.js第5章

事件处理

标准DOM中的事件事件对象使用Vue.js处理事件DEMODEMO（监视鼠标移动）事件修饰符DEMO修饰符使用说明按键修饰符DEMO第5章

事件处理

第5章

事件处理标准DOM中的事件事件与事件流事件对象第5章

事件处理事件对象标准DOM类型读/写说明altKeyBoolean读写按下ALT键则为true，否则为falsebuttonInteger读写鼠标事件，值对应按下的鼠标键，详见6.4.1节cancelableBoolean只读是否可以取消事件的默认行为stopPropagation()FunctionN/A可以调用该方法来阻止事件向上冒泡clientXInteger只读鼠标在客户端区域（当前窗口）的水平坐标，不包括工具栏、滚动条等clientYInteger只读鼠标在客户端区域（当前窗口）的垂直坐标，不包括工具栏、滚动条等ctrlKeyBoolean只读按下Ctrl键则为true，否则为falserelatedTargetElement只读鼠标所离开的元素relatedTargetElement只读鼠标正在进入的元素第5章

事件处理事件对象标准DOM类型读/写说明charCodeInteger只读按下按键的Unicode值keyCodeInteger读写keypress时为0，其余为按下按键的数字代号。detailInteger只读鼠标按钮点击的次数preventDefault()FunctionN/A可以调用该方法来阻止事件的默认行为screenXInteger只读鼠标相对于屏幕的水平坐标screenYInteger只读鼠标相对于屏幕的垂直坐标shiftKeyBoolean只读按下Shift键则为true，否则为falsetargetElement只读引起事件的元素/对象typeString只读事件的名称第5章

事件处理事件对象浏览器支持的事件种类是非常多了，可以分为几类：用户界面事件：涉及与BOM交互的通用浏览器事件。焦点事件：在元素获得或者失去焦点时触发的事件。鼠标事件：使用鼠标在页面上执行某些操作时触发的事件。滚轮事件：使用鼠标滚轮时触发的事件。输入事件：向文档中输入文本时触发的事件。键盘事件：使用键盘在页面上执行某些操作时触发的事件。输入法事件：使用某些输入法时触发的事件。移动设备出现以后，又增加了“触摸”事件。第5章

事件处理使用Vue.js处理事件以内联方式响应事件事件处理方法在Vue.js中使用事件对象第5章

事件处理DEMO第5章

事件处理动手练习：监视鼠标移动案例结合了一下本章前面学到的几个知识点：1.鼠标事件的处理2.事件对象中获取信息3.计算属性4.将计算属性绑定到了元素的CSS样式上。第5章

事件处理DEMO第5章

事件处理事件修饰符.stop.self.capture.once.prevent第5章

事件处理DEMO第5章

事件处理修饰符使用说明独立使用事件修饰符<!--只有修饰符--><formv-on:submit.prevent></form>串联使用事件修饰符<!--修饰符可以串联--><av-on:click.stop.prevent="doThat"></a>第5章

事件处理按键修饰符与按键相关的3个事件keydownkeypresskeyup按键名系统修饰符.ctrl.alt.shift.meta鼠标按钮修饰符.left：鼠标左键被按下.right：鼠标右键被按下.middle：鼠标中间键被按下按键名说明.enter回车键.tab制表符.delete捕获“删除”和“退格”键.esc退出键.space空格键.up上键.down下键.left左键.right右键第5章

事件处理DEMO第5章

事件处理

标准DOM中的事件事件对象使用Vue.js处理事件DEMODEMO（监视鼠标移动）事件修饰符DEMO修饰符使用说明按键修饰符DEMO请看第6章——

表单绑定vue.js

2024.7vue.js主讲：温谦第6章

表单绑定输入文本的绑定DEMO选择类表单元素的绑定DEMO修饰符DEMO第6章

表单绑定

第6章

表单绑定输入文本的绑定文本框多行文本框第6章

表单绑定DEMO第6章

表单绑定选择类表单元素的绑定单选按钮复选框下拉框多选列表框键值对绑定第6章

表单绑定DEMO第6章

表单绑定修饰符.lazy修饰符.number修饰符.trim修饰符第6章

表单绑定DEMO第6章

表单绑定输入文本的绑定DEMO选择类表单元素的绑定DEMO修饰符DEMO请看第7章——

结构渲染vue.js

2024.7vue.js主讲：温谦第7章

结构渲染条件渲染指令v-ifDEMO列表渲染指令v-forDEMO第7章

结构渲染

第7章

结构渲染条件渲染指令v-ifv-if与v-elsev-else-ifv-if与v-show第7章

结构渲染DEMO第7章

结构渲染列表渲染指令v-for基本列表迭代对象数组对象属性列表数值范围数组更新检测v-for中的key属性有何作用v-for与v-if一同使用时的注意事项第7章

结构渲染DEMO第7章

结构渲染条件渲染指令v-ifDEMO列表渲染指令v-forDEMO请看第8章——

网页汇率计算器和番茄钟vue.js

2024.7vue.js主讲：温谦第8章

网页汇率计算器和番茄钟DEMO（网页汇率计算器）番茄钟状态图DEMO（番茄钟）第8章

网页汇率计算器和番茄钟

第8章

网页汇率计算器和番茄钟案例一：网页汇率计算器第8章

网页汇率计算器和番茄钟DEMO第8章

网页汇率计算器和番茄钟案例二：番茄钟本案例用到的几个知识点：class属性的绑定条件渲染v-if循环渲染v-for事件处理数据绑定v-model字体图标fontAwesome音频播放器第8章

网页汇率计算器和番茄钟番茄钟状态图出发状态动作到达状态停止状态开始计时状态停止状态编辑编辑状态计时状态停止停止状态计时状态暂停暂停状态暂停状态开始计时状态暂停状态停止停止状态暂停状态编辑编辑状态编辑状态保存停止状态编辑状态取消停止状态编辑状态取消暂停状态第8章

网页汇率计算器和番茄钟DEMO第8章

网页汇率计算器和番茄钟DEMO（网页汇率计算器）番茄钟状态图DEMO（番茄钟）请看第9章——

组件基础vue.js

2024.7vue.js主讲：温谦第9章

组件基础自定义组件与HTML标记DEMO全局组件与局部组件DEMO第9章

组件基础

第9章

组件基础自定义组件与HTML标记组件的名称组件的属性组件的内容在组件中处理事件第9章

组件基础DEMO第9章

组件基础全局组件与局部组件使用范围全局组件：可以在页面中任何位置使用局部组件：只能在定义Vue应用实例中使用，不能再其他位置使用，否则就无法生效定义组件的方法全局组件：可以使用app.component(tagName,options)定义全局组件局部组件：可以通过Vue应用实例中component属性定义局部组件第9章

组件基础DEMO第9章

组件基础自定义组件与HTML标记DEMO全局组件与局部组件DEMO请看第10章——

单文件组件vue.js

2024.7vue.js第10章

单文件组件基础知识DEMO安装VueCLI脚手架工具项目目录结构DEMO（投票页面）单页应用和多页应用DEMO第10章

单文件组件

第10章

单文件组件基础知识每一个文件都是以.vue结尾的，并由template、script和style这3个部分，分别用于定义这个组件的结构、逻辑和样式。遵循了“高内聚、低耦合”的思想，对开发效率的提升有很大的帮助。第10章

单文件组件DEMO第10章

单文件组件安装VueCLI脚手架工具安装淘宝镜像命令如下：npminstall-gcnpm--registry=安装vue-cli脚手架：cnpminstall@vue/cli-g注：生产环境中，一般会对代码进行处理：合并和压缩第10章

单文件组件VueCLIv5.0.8?Pleasepickapreset:(Usearrowkeys)>Default([Vue3]babel,eslint)Default([Vue2]babel,eslint)Manuallyselectfeatures创建完之后，进入项目目录，运行npmrunserve命令，待运行完成之后，会给出一个访问地址，用浏览器访问即可，默认是：http://localhost:8080/。注：组合键“Ctrl+C”可以终止服务器的运行。这是一个菜单，使用键盘上的方向键可以上下移动左侧的大于号，在三个选项中进行选择，默认选中的是第1个选项：Default([Vue3]babel,eslint)。我们直接按回车键确认，即可选中第1个选项。第10章

单文件组件

项目目录结构：第10章

单文件组件动手实践：投票页面第10章

单文件组件DEMO第10章

单文件组件单页应用和多页应用单页面多页面页面结构一个页面+许多模块的组件很多完整页面体验效果页面切换流畅，体验效果佳页面切换慢，网速不好的时候，体验效果很不好资源文件组件公共的资源只需要加载一次每个页面都要加载一次公共资源路由模式可以使用hash，也可以使用history普通链接跳转适用场景对体验效果和流畅度有较高要求的应用不利于SEO（搜索引擎收录，可借助服务器端渲染技术优化SEO）适用于对SEO要求较高的应用内容更新相关组件的切换，即局部更新整体HTML的切换相关成本前期开发成本较高，后期维护较为容易前期开发成本低，后期维护就比较麻烦，可能一个功能需要改很多地方第10章

单文件组件DEMO第10章

单文件组件基础知识DEMO安装VueCLI脚手架工具项目目录结构DEMO（投票页面）单页应用和多页应用DEMO请看第11章——

AJAX与axios（上）vue.js

2024.7vue.js第11章AJAX与Axios（上）AJAX基础概念AJAX技术的好处AJAX传输数据的方式AJAX的组成部分用原生方法获取异步数据DEMO第11章

AJAX与Axios（上）

第11章

AJAX与Axios（上）AJAX的基本概念第11章

AJAX与Axios（上）AJAX技术的好处：减轻服务器的负担，加快浏览速度带来更好的用户体验基于标准化并被广泛支持的技术，不需要下载插件或小程序促进页面呈现与数据分离第11章

AJAX与Axios（上）AJAX传输数据的方式：一种是在服务器上直接生成HTML文档的片段，然后传递到浏览器上，进行局部更新。另一种是服务器上生成的是数据，而不是文档，但是绝对大多数都是用JSON数据格式，而不是XML数据格式。第11章

AJAX与Axios（上）AJAX的组成部分技术在AJAX中扮演的角色JavaScriptJavaScript是通用的脚本语言，用来嵌入在某种应用之中。Ajax应用程序是使用JavaScript编写的。CSSCSS为Web页面元素提供了可视化样式的定义方法。Ajax应用中，用户界面的样式可以通过CSS独立修改。DOM通过JavaScript修改DOM，Ajax应用程序可以在运行时改变用户界面，或者局部更新页面中的某个节点。XMLHttpRequest对象XMLHttpRequest对象允许开发人员从Web服务器上获取数据。数据的格式通常是JSON、XML或者文本。第11章

AJAX与Axios（上）Ajax的组成部分第11章

AJAX与Axios（上）用原生方法获取异步数据letxmlHttp=newXMLHttpRequest();xmlHttp.open("GET","http://demo-api.geekfun.website/vue/ajax-test.aspx",true);xmlHttp.onreadystatechange=()=>{if(xmlHttp.readyState==4&&xmlHttp.status==200)this.msg=xmlHttp.responseText;};xmlHttp.send(null);第11章AJAX与Axios（上）DEMO第11章

AJAX与Axios（上）AJAX基础概念AJAX技术的好处AJAX传输数据的方式AJAX的组成部分用原生方法获取异步数据DEMO请继续学习第11章——

AJAX与Axios（下）vue.js

2024.7vue.js主讲：温谦第11章AJAX与Axios（下）认识AxiosAxios的基础用法DEMOGET与POSTDEMO嵌套请求与并发请求DEMOAxios的进阶用法实例的相关配置错误处理和拦截器DEMO实现自动提示的文本框模拟百度的“数据加载中”效果第11章

AJAX与Axios（下）

第11章AJAX与Axios（下）认识Axios如果使用VueCLI脚手架工具创建的项目，可以使用npm安装Axios：npminstallaxios--save如果为了调试一些简单页面，也可以直接在页面中引入axios.js文件，或者直接使用CDN：<scriptsrc="/axios/dist/axios.min.js"></script>第11章AJAX与Axios（下）Axios的基础用法importAxiosfrom'axios'Axios.get(url[,config]).then()Axios.post(url[,data[,config]]).then()第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）GET与POSTGET和POST区别POST请求参数的传递方式HTTP方法与RESTGETPOSTPUTDELETEOPTIONSHEADTRACECONNENT第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）嵌套请求与并发请求并发请求：

Axios.all([Axios.get(get1),Axios.get(get2)]).then(Axios.spread((Res1,Res2)=>{console.log(Res1,Res2)}))嵌套请求：

//外层Axios.get(URL).then(//内层(response)=>Axios.get(URL,参数).then((response)=>{

//请求成功后要执行的内容}))第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）Axios的进阶用法创建实例其语法如下：constaxios=axios.create({baseURL:'http://localhost:8080',timeout:1000,//设置超时时长。默认请求未返回超过一秒，接口就超时了,//其他配置项……});第11章AJAX与Axios（下）实例的相关配置配置项举例说明url'/user'用于请求服务器的URLmethod'get'创建请求时使用的方法，还可以是'post','put','patch','delete',默认是getbaseURL'http://localhost:8080'将自动加在url前面，除非url是一个绝对URLheaders{'content-type':'application/x-www-form-urlencoded'}是即将被发送的自定义请求头params{id:1}请求参数拼接在url后面data{id:1}请求参数放在请求体里timeout1000指定请求超时的毫秒数(0表示无超时时间)，如果请求花费了超过timeout的时间，请求将被中断，为了不阻塞后面要执行的内容responseType'json'表示希望服务器响应的数据类型，还可以是'arraybuffer','blob','document','text','stream'，默认是json第11章AJAX与Axios（下）错误处理响应异常请求异常拦截器请求拦截器响应拦截器第11章AJAX与Axios（下）实例：实现自动提示的文本框第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）练习：模拟百度的“数据加载中”效果第11章AJAX与Axios（下）DEMO第11章

AJAX与Axios（下）认识AxiosAxios的基础用法DEMOGET与POSTDEMO嵌套请求与并发请求DEMOAxios的进阶用法实例的相关配置错误处理和拦截器DEMO实现自动提示的文本框模拟百度的“数据加载中”效果请看第12章——

过渡动画vue.js

2024.7vue.js第12章

过渡动画CSS过渡DEMO单元素过渡transition组件过渡的类名DEMODEMO（可折叠的多级菜单）列表过渡DEMODEMO（待办事项）第12章

过渡动画

第12章

过渡动画CSS过渡CSS提供了transition属性来实现过渡动画效果，使用过渡需要满足两个条件：元素必须具有状态变化必须为每个状态设置不同的样式第12章

过渡动画DEMO第12章

过渡动画单元素过渡在下列情形中，可以给任何单元素和组件添加进入/离开过渡效果：条件渲染(使用v-if)条件展示(使用v-show)动态组件组件根节点第12章

过渡动画transition组件过渡的类名第12章

过渡动画DEMO第12章

过渡动画动手实践：可折叠的多级菜单第12章

过渡动画DEMO第12章

过渡动画列表过渡使用transition-group组件时还需要注意以下几点：内部元素总是需要提供唯一的key属性值。CSS过渡的类将会应用在内部的元素中，而不是这个组件本身。第12章

过渡动画DEMO第12章

过渡动画动手实践：待办事项第12章

过渡动画DEMO第12章

过渡动画CSS过渡DEMO单元素过渡transition组件过渡的类名DEMODEMO（可折叠的多级菜单）列表过渡DEMODEMO（待办事项）请看第13章——

路由vueroutervue.js

2024.7vue.js第13章

路由VueRouter基本用法命名路由：使用name属性给路由命名DEMO路由动态匹配DEMO编程式导航重命名和别名进阶用法——导航守卫DEMO进阶用法——路由元信息DEMOhistory模式第13章

路由VueRouter

第13章

路由VueRouter基本用法安装：npminstallvue-router命名路由：使用name属性给路由命名

{path:'/',name:'Home',component:()=>import('../views/home.vue'),}第13章

路由VueRouterDEMO第13章

路由VueRouter路由动态匹配路由参数多路由参数与侦听路由查询参数捕获所有路由模式匹配路径$route.params/product/:id/product/1{id:1}/product/:page/:tag/product/1/0{page:1,tag:0}{path:'/:pathMatch(.*)*',name:'Page404',component:()=>import('../views/page404.vue')}第13章

路由VueRouterDEMO第13章

路由VueRouter编程式导航//字符串router.push('home')//对象router.push({path:'home'})//命名的路由router.push({name:'product',params:{id:'123'}})//带查询参数，变成/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})constid='123'router.push({name:'product',params:{id}})//->/product/123router.push({path:`/product/${id}`})//->/product/123//这里的params不生效router.push({path:'/product',params:{id}})//->/product第13章

路由VueRouter重定向和别名重定向别名constroutes=[{path:'/a',redirect:'/b'},//字符串路径{path:'/a',redirect:{name:'foo'}},//路径对象{path:'/a',redirect:to=>{//接收目标路由作为参数//返回重定向的字符串路径/路径对象}}

]{path:'/product/:id',name:'ProductDetails',component:()=>import('../views/product-detail.vue'),

alias:'/product/details/:id'}第13章

路由VueRouter进阶用法——导航守卫全局前置守卫：router.beforeEach(function(to,from,next){

//要执行的内容

})每个守卫方法接收三个参数：to:Route：即将要进入的路由from:Route：当前导航正要离开的路由next:Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。next()next(false)next('/')或者next({path:'/'})next(error)路由中配置前置守卫：{path:'/product',name:'Product',component:Product,

beforeEnter:(to,from,next)=>{//...}}第13章

路由VueRouterDEMO第13章

路由VueRouter进阶用法——路由元信息constroutes=[{path:'/product',name:'Product',component:()=>import('../views/product.vue'),

meta:{requireLogin:true//为true表示需要登录才能访问}},...省略...];第13章

路由VueRouterDEMO第13章

路由VueRouterhistory模式import{createRouter,createWebHistory}from'vue-router';constrouter=newVueRouter({

history:createWebHistory(),routes:[...]})hash模式history模式http://localhost:8080/#/producthttp://localhost:8080/product第13章

路由VueRouter基本用法命名路由：使用name属性给路由命名DEMO路由动态匹配DEMO编程式导航重命名和别名进阶用法——导航守卫DEMO进阶用法——路由元信息DEMOhistory模式请看第14章——

状态管理vue.js

2024.7vue.js第14章

状态管理store模式DEMOVuex的基本用法DEMO单文件组件中使用VuexDEMOaction与mutationDEMODEMO（改进版的“待办事项”（TodoList））第14章

状态管理

第14章

状态管理store模式编写整体页面结构创建store对象使用store对象第14章

状态管理DEMO第14章

状态管理Vuex的基本用法conststore=Vuex.createStore({state:{},getters:{},mutations:{

},actions:{},modules:{}});状态管理流程图第14章

状态管理DEMO第14章

状态管理单文件组件中使用Vuex使用VueCLI脚手架工具创建项目，完成后，目录结构如下：第14章

状态管理DEMO第14章

状态管理action与mutation：在action提交的是mutation，而不是直接变更状态。action可以包含任意异步操作，而mutation不能包含异步操作。改造store对象：ordinary：平常的状态waiting：向服务器发起了下单请求，正在等待结果success：下单成功error：下单失败第14章

状态管理DEMO第14章

状态管理动手练习：改进版的“待办事项”（TodoList）第14章

状态管理DEMO第14章

状态管理store模式DEMOVuex的基本用法DEMO单文件组件中使用VuexDEMOaction与mutationDEMODEMO（改进版的“待办事项”（TodoList））请看第15章——

案例—“豪华版”待办事项vue.js

2024.7vue.js第15章

案例—“豪华版”待办事项用到的知识点使用vueCLI搭建项目实现页面结构和样式组件化核心功能的实现实现各项功能DEMO（“豪华版”待办事项）第15章

案例—“豪华版”待办事项

第15章

案例—“豪华版”待办事项用到的知识点：class属性的绑定条件渲染列表渲染数据绑定事件处理计算属性和侦听器组件表单状态管理Vuex拖拽插件vuedraggable字体图标FontAwesome第15章

案例—“豪华版”待办事项使用vueCLI搭建项目实现页面结构和样式组件化核心功能的实现定义Todo类使用Vuex管理任务列表实现各项功能添加待办事项显示任务列表动态化筛选项修改任务状态编辑任务删除任务调整任务顺序持久化任务第15章

案例—“豪华版”待办事项DEMO第15章

案例—“豪华版”待办事项用到的知识点使用vueCLI搭建项目实现页面结构和样式组件化核心功能的实现实现各项功能DEMO（“豪华版”待办事项）请看第16章——

案例—网页图片剪裁器vue.js

2024.7vue.js第16章

案例—网页图片裁剪器用户的使用场景页面HTML结构和CSS样式实现核心逻辑DEMO（网页图片裁剪器）第16章

案例—网页图片裁剪器

第16章

案例—网页图片裁剪器用户的使用场景如下：可以选取自己电脑上的一张图片用于剪裁。选取要剪裁的图片区域，即设定一个矩形的“选区”。可以调整选区的位置。可以调整选区的大小。确定选区后，按下回车键，在页面上会显示剪裁出的新图片。第16章

案例—网页图片裁剪器页面HTML结构和CSS样式实现核心逻辑定义基础类定义Cropper类创建（绘制）选区移动选区调整选区大小裁剪图片选取操作总结使用vue.js处理交互初始化图像绘制选区移动选区调整选区大小将手柄封装为组件最终裁剪第16章

案例—网页图片裁剪器DEMO第16章

案例—网页图片裁剪器用户的使用场景页面HTML结构和CSS样式实现核心逻辑DEMO（网页图片裁剪器）请看第17章——

案例—电子商务网站vue.js

2024.7vue.js第17章

案例—电子商务网站设定基本目标省略的功能介绍本案例的20个步骤文件首页产品列表页和加入购物车产品详情页和加入购物车订单详情页订单列表页项目目录结构安装BootstrapDE