Vue学习笔记
目录
1. Object.defineProperty()
2.计算属性
3.监视属性
4.computed和watch的区别
5.双向数据绑定
6._el和data的俩种写法
7.事件修饰符
8.键盘事件
9.条件渲染
10.列表过滤
11.过滤器
12.常用指令
13.生命周期
14.组件
15.ref属性
16.props配置
17.mixin属性
18.vue中的插件
19.WebStorage
20.消息的发布与订阅
20.Vue动画库
21.插槽
1. Object.defineProperty()
（1）给一个对象添加一个属性
Object.defineProperty()传三个参数:
- 第一个:你要给哪个对象添加参数
- 第二个:你添加的属性名
- 第三个:你添加的属性值
借助Object.defineProperty(),使number和person俩个值进行了关联
通过get()获取age,通过set去修改age
（2）数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
2.计算属性
1.定义：要通过已有属性计算得来
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
（1）初次读取fullName值时
（2）所依赖的数据发生改变时
4.优势：与methods实现相比，内部有缓存机制，效率更高，调试方便
5.备注：
（1）计算属性最终会出现在vm上，直接调用即可
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
3.监视属性
1.当被监视的属性发生变化事，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的俩种写法：
（1）new Vue时传入watch配置
（2）通过vm.$watch监视
var vm = new Vue({
watch:{
isHot:{
immediate:true, //初始化时handler调用一下
handler(newValue,oldValue){
console.log("监视了",newValue,newValue)
}
}
}
}）
// 简写形式
isHot(newValue,oldValue){
console.log("监视了",newValue,newValue)
},
vm.$watch('isHot',{
immediate:true,
handler(newValue,oldValue){
console.log("监视了",newValue,newValue)
}
})
// 简写形式
vm.$watch('isHot',function(newValue,oldValue){
console.log("监视了",newValue,newValue)
})4.深度监视
深度监视:
(1)Vue中的watch没人不监视对象内部值的改变（一层）
(2)配置deeep:true可以监测对象内部值的改变（多层）
备注：
（1）Vue自身可以监视对象内部值的改变，但Vue提供的watch默认不可以
（2）使用watch时根据数据的具体结构，决定是否采用深度监视
data(){
return{
numbers:{
a:'11',
b:'22'
}
}
},
watch:{
numbers:{
deep:true,
handler(newValue,oldValue){
console.log("深度监视")
}
}
}4.computed和watch的区别
1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
3.computed中的函数所依赖的属性没有变化时，调用时会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调
4.computed必须要有return返回，而watch不用必须用return
5.computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性
6.使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.
原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.不被vue管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象
5.双向数据绑定
v-model:只能用于表单元素
data中的数据一发生改变，vue就会重新解析模板
（1）插值方式
全名：{{firstName}} - {{lastName}}
（2）计算属性方式
全名：{{fullName}}
（3）methods方式
全名：{{fullName()}}
计算属性与methods实现相比，内部有缓存机制，效率更高，调试方便
6._el和data的俩种写法
（1）_el的俩种写法
const v = new Vue({
el:"#app", //第一种写法
data:{
num:''
}
})
v.$mount('#app') //第二种写法（2）data的俩种写法
new Vue({
el:"#app",
//第一种写法,对象式
data:{
num:''
}
})
new Vue({
el:"#app",
//第二种写法,函数式（使用组件时必须使用函数式写法，否则会报错）
data（）{
console.log(this) //vue的实例对象
return{
num:''
}
})7.事件修饰符
1.prevent :阻止默认行为（常用）
2.stop:阻止事件冒泡（常用）
3.once:事件只触发一次（常用）
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素才触发事件
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕（在移动端项目比较多）
//阻止事件冒泡
//先阻止事件冒泡再阻止默认事件
8.键盘事件
1.Vue常用的按键别名
回车 = 》enter
删除= 》delete (捕获“删除)和”退格“键
退出= 》esc
换行= 》tab
空格= 》space
上= 》up
下= 》down
左 = 》 left
右 = 》right
2.系统修饰键（用法特殊）：ctrl 、alt 、shift、meta
(1)配合keyup使用：按下修饰符的同时，再按下其他键，随后释放其他键，事件才被触发
(2)配合keydown使用：正常使用
3.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
9.条件渲染
1.v-if
写法（1）v-if = "表达式"
（2）v-else-if = "表达式"
（3）v-else="表达式"
适用于：切换不频繁的场景
特点：不展示DOM元素，直接移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打乱
2.v-show
写法：v-show = "表达式"
适用于：切换频繁的场景
特点：只是利用dispaly样式，把DOM隐藏
3.备注
(1) 使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到,
(2) v-show 在template元素中不起作用
v-show条件渲染
v-if条件渲染
111111111
222222222
333333333
（2）监视属性实现过滤
- {{item.name}}
（3）列表排序
- {{item.name}} {{item.age}}
11.过滤器
定义：对要显示的数据进行特定格式化后再显示
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})
2.使用过滤器：{{xxx | 过滤器}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器可以接受额外参数、多个过滤器也可以串联
2.并没有改变原本数据，是产生新的对应的数据
body>
现在是：{{fmtTime}}
现在是：{{getFmtTime()}}
现在是：{{time | timeFormater}}
现在是：{{time | timeFormater('YYYY年MM日DD日')}}
现在是：{{time | timeFormater('YYYY年MM日DD日') | mySlice}}