Vue企业开发-初识Vue.js课件.pptx

1、第四章 初识Vue.js 本章目标了解Vue.js的开发模式掌握Vue生命周期函数掌握插值表达式掌握Class与Style绑定 Vue.js是什么Vue.js官方介绍它是简单小巧的核心，渐进式技术栈，足以应付任何规模的应用主要内容部分MVVM模式Vue.js的开发模式单文件组件的使用MVVM模式2-1MVVM模式（Model-View-ViewModel）Model:负责数据存储View:负责页面展示ViewModel:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示MVVM模式2-2MVVM模式开发优势低耦合q视图（View）可以独立于Model变化和修改，一个ViewM

2、odel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变可重用性q可以把一些视图逻辑放在一个ViewModel里面，让多个view重用这段视图逻辑独立开发Vue.js的开发模式首先通过Vue-cli快速搭建一个项目，在HelloWorld.vue写入下面的完整的代码来快速体验Vue.js的开发模式 book.name export default data()return books:name:JavaScript 高級程序设计高級程序设计,name:JavaScript 语言精粹语言精粹,name:JavaScript 经典实例经典

3、实例 ;演示示例1：dm 单文件组件的使用2-1Vue.js 自定义了一种.vue文件，把HTML、CSS、JS 写到一个文件中，实现对一个组件的封装，一个.vue 文件就是一个单独的组件。单文件组件的构成template 标签中是HTML代码，它定义了在页面中显示的内容script标签中都是JS 代码，它定义组件中所需要的数据和及其操作style标签里面是CSS样式，定义组件的样式，scoped 表明这里写的css 样式只适用于该组件 单文件组件的使用2-2在.vue文件中，export default 后面的对象是定义组件所需要的数据（data）以及操作数据的方法等，更为全面的一个expo

4、rt default 对象组成还有methods、data、computed等在.vue 组件,data必须是一个函数，它return返回一个对象，返回的对象数据供组件实现 Vue实例与数据绑定实例与数据插值表达式的使用生命周期 实例与数据3-1Vue实例是Vue框架的入口，其实也是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等/main.js中中new Vue(el:#app,router,components:App,template:)演示示例2：dm 实例与数据3-2选项对象中的配置项el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,可以是

5、CSS 选择器，也可以是一个 HTMLElement 实例router：这里的router是省略写法，正常是router：router，因为属性名和属性值一样，所以可以省略成router，代表传入路由的实例对象，把配置的路由功能运用在整个项目中components：包含 Vue 实例可用组件的哈希表template:一个字符串模板作为 Vue 实例的标识使用,模板将会 替换 挂载的元素 实例与数据3-3使用Vue-cli新建一个项目，打开项目模板自带的单文件组件HelloWorld.vue，展示核心代码 msg export default name:HelloWorld,data()retu

6、rn msg:Welcome to Your Vue.js App 演示示例3：demo 插值表达式2-1插值表达式可以理解为使用双大括号来包裹 js 代码构成插值表达式，作用是将双大括号中的数据替换成对应属性值进行展示双大括号语法也叫模板语法（Mustache语法），Mustache 是一款经典的前端模板引擎 js表达式表达式 语法语法 插值表达式2-2插值表达式中可以写入的内容JSON数据数字字符串插值表达式 msg 10 string 1+1 hello+name 23?true:false 演示示例4：demo 生命周期2-1什么是实例的生命周期所谓“生命周期”，是指实例对象从构造函数

7、开始执行（被创建）到被GC（Garbage Collection：垃圾回收）回收销毁的整个存在的时期什么是生命周期钩子在生命周期中被自动调用的函数叫做生命周期函数，也被形象的称为钩子函数 生命周期2-2生命周期钩子的用途在对象从创建到被回收的整个过程中会在不同的时期有不同的钩子函数，我们可以利用不同时期的钩子函数去完成不同的操作钩子函数有哪些beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed钩子函数介绍生命周期函数含义beforeCreate（创建前）组件实例刚被创建，组件属

8、性计算之前，比如data属性等等created（创建后）组件实例刚创建完成，属性已经绑定，当时DOM还未生成，$le属性还不存在beforeMount(载入前)模板编译、挂载之前mounted（载入后）模板编译、挂载之后beforeUpdate（更新前）组件更新之前updated（更新后）组件更新之后beforeDestroy（销毁前）组件销毁前调用destroyed（销毁后）组件销毁后调用钩子函数使用beforeCreate加一些loading事件created结束loading事件，还做一些初始化，实现函数自执行等mounted发起后端请求，取回数据接收页面之间传递的参数子组件向父组件传递

9、参数演示示例5：democlass与style绑定了解v-bind指令绑定class的方式绑定内联样式了解v-bind指令2-1指令指令（Directive）是特殊的带有 v-前缀的特性，指令的作用是当表达式的值改变时，将某些行为应用到DOM上为什么要使用指令使用指令可以帮简化操作，可以更加方便的完成一些业务代码指令书写位置可以是任意 HTML 元素的开始标签内，可写入多个指令，多个指令间使用空格分隔全部全部了解v-bind指令2-2v-bind指令主要用法是动态更新HTML元素上的属性在compontents文件夹下新建Directive.vue组件演示示例6：demo 链接链接 链接链接

10、绑定class的方式4-1对象语法给v-bind:class设置一个对象，可以动态的切换class对象语法对象语法.active border:1px solid#000;演示示例7：demo绑定class的方式4-2对象中也可以传入多个属性，来动态切换class，另外特别强调一点，动态绑定的class可以与普通的class共存对象语法对象语法多个属性的多个属性的对象语法对象语法演示示例8：demo绑定class的方式4-3数组语法当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表数组语法数组语法演示示例9：demo绑定class的方式4-4可以使

11、用三元表达式来根据条件切换class三元表达式的数组语三元表达式的数组语法法演示示例10：demo绑定内联样式2-1使用v-bind:style(即:style)可以给元素绑定内联样式，方法与:class类似绑定内联样式绑定内联样式演示示例11：demo绑定内联样式2-2大多数情况下，直接写一长串的样式不便于阅读和维护，实际的开发中一般是写在data或者computed里，下面以data的形式来改写 绑定内联样式绑定内联样式/data 部分部分data()return styles:border:1px solid#000,fontSize:22+px ;总结Vue.js是什么Vue实例与数据绑定class与style绑定了解v-bind指令绑定class的方式绑定内联样式大觅项目的路由配置MVVM模式Vue.js的开发模式单文件组件的使用实例与数据插值表达式生命周期