《Vue.js3Web开发案例教程（在线实训版）》 课件 01 Web前端开发概述 -06 表单绑定

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选择类表单元素的绑定