Vue学习中知识点

1.遍历数组和对象

for(let index in person){
	console.log(person[index])
}

2.Object.defineProperty

Object.defineProperty(person,'age',{//第一个参数表示需要修改的对象名称，第二个参数是需要添加的属性，第三个参数是配置项
	value:18,
	enumerable:true,//控制属性是否可以枚举，默认值是false
	writable:true,//控制属性是否可以被修改，默认值是false
	configrable:true,//控制属性是否可以被删除，默认值是false
	get(){//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
		return number
	}，
	set(value){//当有人修改person的age属性时，set函数（setter）就会被调用，且收到修改的具体值
		number=value
	}
})

3.事件修饰符

1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式（默认是冒泡模式，先捕获后冒泡，冒泡阶段才触发事件）

4.键盘事件

@keydown和@keyup
常用按键别名：
回车=>enter
删除=>delete（捕获“删除”和“退格”键）
退出=>esc
空格=>space
换行=>tab（特殊，必须配合keydown使用）
上=>up
下=>down
左=>left
右=>right
系统修饰键（用法特殊）：ctrl alt shift meta(徽标键)
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随和释放其他键，事件才被触发
（2）配合客运动完、使用：正常触发事件。
系统修饰键和其他键组合，keyup.ctrl.y（keyup事件，ctrl+y才能触发事件）

5.侦听属性

复杂形式
watch:{
	number:{
		handler(newvalue,oldvalue){}//监听数据变化
		immediate:true,//进入页面时就触发，默认是改变之后才触发监听
		deep:true,//深度监视，就算是对象里面的数据改变也会触发
	}
}
简写形式（不考虑immediate和deep时）
number(newvalue,oldvale){
	//业务逻辑
}

6.计算属性

复杂形式
computed:{
	fullName:{
		get(){//读取fullName时触发
			return 需要的数据
		},
		set(){//fullName改变时触发
			//对指定数据进行赋值
		}
	}
}
简写形式（当不需要修改fullName的时候可以使用简写形式）
computed:{
	fullName(){
		return 需要的数据
	}
}

7.普通函数和箭头函数的区别

普通函数：普通函数拥有自己的this指向，如果是Vue所管理的普通函数，函数内的this指向就是Vue实例
箭头函数：箭头函数没有自己的this指向，只能往外层结构找，如果外层没有其他的this，最终会指向Windows

8.绑定class样式

字符串写法：适用于样式的类名不确定，需要动态指定
<div class="basic" :class="mood"></div>
数组写法：适用于要绑定的样式个数不确定、名字也不确定
<div class="basic" :class="classArr"></div>
对象写法：适用于要绑定的样式个数确定、名字也确定，但要动态决定用不用
<div class="basic" :class="classObj"></div>
Vue中的数据
data(){
	return {
		classObj:{
			atguigu1:false,
			atguigu2:true
		}
	}
}

9.条件渲染

v-if和v-show的区别
v-show=false隐藏时，结点是不会消失的，如果需要频繁的隐藏和显示，推荐使用
v-if=false隐藏时，结点是会消失的，如果不需要频繁显示和隐藏，推荐使用
v-if配套语法
v-if、v-else-if、v-else（且使用对应的div必须写在一起，不允许中断）
注：<template></template>标签只能配合v-if使用

10.列表渲染

v-for指令
<div v-for="(p,index) in persons" :key="p.id"></div>

key的取值，假设persons是数组
index（不推荐使用）：使用每一个选项值的下标作为key值，当插入的数据使得数组元素的顺序改变了，就不可使
用index作为key值
id（唯一标识）：使用id作为唯一标识，vue进行diff算法时，就可以复用虚拟dom，提高刷新效率

11.收集表单数据

<input type="text"/>，则v-model收集的是value值，用户输入的就是value值
<input type='radio'/>，则v-model收集的是value值，且要给标签配置value值
<input type='checkbox'/>
1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
2.配置input的value属性
(1)v-model的初始值是非数组，那么收集的就是checked
(2)v-model的初始值是数组，那么收集的就是value组成的数组
注：v-model的三个修饰符
lazy：失去焦点再收集数据
number：输入字符串转为有效数字
trim：输入首尾空格过滤

12.生命周期回调函数

mounted()
调用时机：Vue完成模板解析并把初始的真实DOM元素放入页面后(挂载完毕)
beforedistroyed()
调用时机：Vue即将销毁实例之前，可以访问到原有的数据或方法，但已经无法再进行更新