第二章 Vue开发基础（上）

@TOC

2.1Vue实例

2.1.1创建Vue实例

通过new关键字实例化Vue({})构造函数

var vue=new Vue({})

Vue实例配置对象：

2.1.2 el唯一根标签

在创建Vue实例时，el表示唯一根标签，通过指定class或id选择器可用来将页面结构与Vue实例对象vm进行绑定
绑定的这个元素，作为Vue实例在界面上的根元素
Vue的数据只能在el绑定的元素内部使用

2.1.3 data初始数据

Vue实例的数据对象为data，Vue会将data属性转换为getter、setter，从而让data的属性能够响应数据变化

2.1.4 methods定义方法

在定义的方法中，this指向Vue实例本身
定义在methods选项中的方法可以作为页面中的事件处理函数使用

2.1.5 computed计算属性

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果
计算属性虽然叫属性，但其实是一个方法，在用的时候当属性来用
当有一些数据需要随着其他数据变动时，就需要使用computed计算属性
计算属性需要将结果返回
注：computed默认是只读属性，只有get，如果想完成set，如下所示：

2.1.6 watch状态监听

用来监测Vue实例中的数据变动，会调用当前数据所绑定的事件处理方法
监测哪个属性名就要把该属性名作为watch中的方法名
应用场景：要在数据变化的同时进行异步操作或者是开销比较大的场景

2.1.7 filters过滤器

数据的变化除了在Vue逻辑层进行操作外，还可以通过过滤器来实现，即在页面中直接操作数据，返回最终结果

对数据进行格式化，比如字符串首字母变大写，日期格式等等
用法1：
在插值表达式中使用filters过滤器
|是管道符，其之前的代码执行结果会传到后边作为参数进行处理

<div id='app'>
	<div>{{msg | toUppercase }}</div>
</div>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			msg:'helloworld'
		},
		filters:{
			toUppercase(value){
				return value?value.toUpperCase():'';
			}
		}
	})
</script>

注：过滤器函数必须定义第一个参数，此参数就是使用过滤器的数据，将格式化的结果返回
用法2：
在v-bind属性绑定中使用filters过滤器

<div id='app'>
	<div v-bind:id='dataId | formatId'>helloworld</div>
</div>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			dataId:'dff1'
		},
		filters:{
			formatId(value){
				return value?value.charAt(1)+value.indexOf('d'):'';
			}
		}
	})
</script>

补充：
1.Vue中computed和methods的区别：
computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不是

2.Vue中computed和watch的区别
如果一个数据需要经过复杂计算就用computed
如果一个数据需要被监听并且对数据做一些操作就用watch
当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的

3.Vue中methods和watch的区别
methods根据用户所需自行定义，通过鼠标、键盘事件等触发条件来触发；watch自动监听当前Vue对象的状态变化，触发

2.2Vue数据绑定

2.2.1样式绑定

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方法实现

1.绑定内联样式/绑定行内样式style

①绑定单个属性
②绑定对象

注：可以添加多个样式对象，放到数组中即可，如：

<div v-bind:style="[myDiv1,myDiv2]"></div>

为什么要进行样式绑定？
绑定之后，可以通过操作data数据，来改变样式

2.绑定类样式class

绑定样式总结：
①字符串绑定方式
②布尔绑定方式
③变量的绑定方式（数组）
④综合的写法

2.2.2内置指令

1.常用内置指令

2.v-model指令

主要实现数据双向绑定，通常用在表单元素上，例如：input、textarea、select等
注：双向绑定即数据改变页面也会改变，页面改变数据也会改变

3.v-text指令

v-text是在DOM元素内部插入文本内容
单向绑定：数据改变影响界面
除了v-model其他的数据绑定都是单向的

4.v-html指令

是在DOM元素内部插入HTML标签内容
v-html是将元素内部HTML与data属性进行单向数据绑定

5.v-bind指令

v-bind可以实现属性单向数据绑定

6.v-on指令

v-on是事件监听指令，负责给DOM元素绑定事件，配合事件类型使用

注：v-text和插值表达式可以相互替换

7.v-for指令

可以实现页面列表渲染，常用来循环数组
语法：v-for=“(value,key)” in xxx

8.v-if和v-show指令

用来控制元素显示或隐藏，属性为布尔值
v-if决定元素是否渲染，不渲染的话该元素就不存在
而v-show与v-if的区别在于前者隐藏后还存在，只是display属性变为none，而后者是不渲染，压根就不存在

v-show操作元素的display属性，v-if会对元素进行删除和重新创建，所以v-if在性能上步入v-show

2.3Vue事件

2.3.1事件监听

1.v-on绑定事件

在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法
语法：
①v-on:事件名=‘事件函数’
②v-on:事件名=‘js代码’

2.使用按键enter修饰符监听按键

监听哪个键盘按下/抬起
v-on:keyup.按键修饰符=“xxx”
按键修饰符其实就是按键名，代表监听哪个按键
创建vm实例对象并在methods中定义submit()事件处理函数

2.3.2事件修饰符

事件修饰符是自定义事件行为

1.常用事件修饰符

2. .stop事件修饰符

在前端开发中，复杂的页面结构需要很多事件来完成交互行为
默认的事件传递方式是冒泡，同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以使用.stop修饰符阻止事件冒泡行为

3. .prevent事件修饰符

HTML标签具有自身特性，例如，标签被单击时会自动跳转。在实际开发中，如果标签的默认行为与事件发生冲突时，此时可以使用.prevent修饰符来阻止标签的默认行为

4. .capture事件修饰符

事件捕获的执行顺序是由外部向内部结构执行，与事件冒泡的顺序相反

要添加在父元素上，在子元素上没有作用
注：冒泡是由内向外，捕获是由外向内

5. .self事件修饰符

事件修饰符.self用来实现只有DOM元素本身会触发事件
即只能通过自身触发而不能通过事件冒泡触发
跟.stop的区别在于，.self添加在父元素身上，.stop添加在子元素身上，前者是从源头阻止，后者是从终结点阻止

6. .once修饰符

只触发一次事件处理函数

2.4Vue组件

2.4.1什么是组件

在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能
Vue.component()表示注册组件的API，参数my-component为组件名称，该名称与页面中的标签名对应。
组件名还可以用驼峰法，如在注册组件时，将参数修改为：myComponent
组件中的数据，必须是一个函数，并返回初始数据，每个实例可以维护一份被返回对象的独立的拷贝

2.4.2局部注册组件

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现

全局组件在项目中的任何界面都可以使用
局部组件只能在当前界面使用
定义组件时如果是驼峰，在使用组件时必须换成短横线

2.4.3template模板

Vue提供了< template >标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率

两个title的作用域不一样，自定义组件的title只能是组件内部的data，自定义组件的data是以方法的形式存在的

2.4.4组件之间的数据传递

组件之间的依赖关系：组件实例具有局部作用域，组件之间的数据传递需要借助一些工具（如props属性）来实现父组件向子组件传递数据信息

1.props传值

props即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息
propertys，属性，意为通过属性传值

my-parent是父组件，而div是子组件

2.$emit传值

$ emit能够将子组件中的值传递到父组件中去，$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成

$emit就是用来触发自定义事件的

2.4.5组件切换

Vue中的页面结构是由组件构成的，不同的组件可以表示不同页面，适合进行单页应用开发

2.5Vue生命周期

2.5.1钩子函数

钩子函数用来描述Vue实例从创建到销毁的整个生命周期

2.5.2实例创建

beforeCreate和created：创建实例对象之前或者实例对象创建之后执行

beforeCreate：此时数据不能使用
created：此时数据可以使用

2.5.3页面挂载

beforeMount和mounted：在实例创建后，如果挂载点el存在，就进行页面挂载

beforeMount：无法展示数据
mounted：可以展示数据

2.5.4数据更新

beforeUpdate和updated：Vue实例挂载完成之后，当数据发生变化时，会执行beforeUpdate和updated钩子函数

2.5.5实例销毁

beforeDestroy和destroyed：生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数


vue销毁后仍然存在
befordDestroy：可以操作DOM
destroyed：无法操作DOM