Vuejs前端开发实战全套教学课件.pptx

Vue.js前端开发实战;第1章 Vue基础入门;学习目标;目录;知识架构;知识架构;知识架构;知识架构;HTML：HTML主要用来编写网页的结构，例如a/a表示超链接。 CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。 JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。;jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。 Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。;1.1 初识Vue;1.1 初识Vue;1.1 初识Vue;1.1 初识Vue;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.2 Vue开发环境;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;1.3 webpack打包工具;目录结构;目录结构;1.3 webpack打包工具;;第2章 Vue开发基础（上）;学习目标;目录;目录;知识架构;知识架构;知识架构;知识架构;知识架构;知识架构;Vue实例：通过new关键字实例化Vue({})构造函数。;Vue实例配置对象：;Vue实例配置对象：;el唯一根标签：在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。;案例展示：;;data初始数据：Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。;案例展示：;案例实现：在data中定义name的初始数据为“定义初始数据”。;methods基本概念： methods属性用来定义方法，通过Vue实例可以直接访问这些方法 在定义的方法中，this指向Vue实例本身 定义在methods属性中的方法可以??为页面中的事件处理方法使用 当事件触发后，执行相应的事件处理方法;案例展示：;案例实现：编写初始页面结构。;案例实现：在methods选项中定义showInfo()方法，实现页面内容的更新。;案例实现：单击页面中的“请单击”按钮，更新页面内容。;computed计算属性：计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。;案例展示：根据商品单价和数量计算出商品的总价格。;案例实现：首先编写总价格页面结构。;案例实现：在computed中定义totalPrice函数返回计算后的总价格。;案例展示：通过watch获取cityName的新值和旧值。;;案例实现：首先定义vm实例对象。;案例实现：在Vue配置对象中定义watch监听cityName属性。;案例实现：在浏览器查看运行效果。;filters过滤器：在页面中直接操作数据，返回最终结果。;案例展示：在插值表达式中使用filters过滤器，将小写字母转换成大写字母。;;;;案例展示： 在v-bind属性绑定中使用filters过滤器。;;案例实现： 首先定义vm实例对象。;案例实现： 在vm实例对象中定义filters，并在filters中定义formatId()方法实现属性的过滤。;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;;;;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2 Vue数据绑定;2.2