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

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.jsscriptsrc=/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实例，具体语法形式如下：constapp=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章计