Vue核心

一、事件处理

事件基本使用：绑定事件@click="add"，methods中的函数必须用普通函数（不能用箭头函数），否则对象就会由vm变为window

不传参数时，默认event值，传参之后会覆盖event，想要调用需写上参数$event
事件修饰符:
1. prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4. capture:使用事件的捕获形式
5. self:只有event.target是当前操作的元素时才触发事件
6. passive:事件的默认行为立即执行，无需等待事件回调执行完毕
? 注意：修饰符可以连续写，比如@click.once.stop
键盘事件：@keyup.enter
1. Vue中常用的按键别名：
  
  回车：enter
  
  删除：delete(捕获“删除”和"退格"键)
  
  退出:esc
  
  空格：space
  
  换行：tab（必须配合keydown)
  
  上下左右：up down left right
2. Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3. 系统修饰键(用法特殊)：ctrl、alt、shift、meta(win键)
  
  (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其它键，事件才被触发(如果要ctrl y 触发，则@keyup.ctrl.y)
  
  (2)配合keydown使用：正常触发事件
4. 使用keyCode去指定具体的按键(不推荐)
5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

二、计算属性与侦听属性

计算属性computed
```
 computed:{
        fullName: {
          //get什么时候调用?1.初次读取fullName时 2.所依赖的数据发生变化时
          get(){
            return this.firstName + '-' + this.lastName
             
          },
          //set在被修改时调用
          set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName  =arr[1]
          }
        }
      }
```
1. 定义：要用的属性不存在，要通过已有的属性计算得来
2. 原理：底层借助了Object.defineproperty方法提供了getter和setter
3. get函数什么时候执行?1.初次读取fullName时 2.所依赖的数据发生变化时
4. 优势：与methods相比，内部有缓存机制(复用),效率更高，调试方便
5. 备注：
  1. 计算属性最终会出现在vm身上，直接读取即可
  2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

如果确定只读不改，可以简写为fullName:function(){return this.firstName + '-' + this.lastName}，但是调用时注意还是写出{{fullName}}，不能写成函数!

监视属性watch
1. 当监视的属性发生变化时，回调函数handler自动调用，进行相关操作
2. 监视的属性必须存在，才能进行监视
3. 监视的两种写法：传入watch配置；vm.$watch()
深度监视：

? (1)vue中的watch默认不监测对象内部值的改变(一层)

? (2)配置deep:true可以监测对象内部值改变(多层)

备注：

? (1)vue自身可以监测对象内布值的改变，但Vue提供的watch默认不可以

? (2)使用watch的时候根据数据的具体结构，决定是否采用深度监视
computed和watch的区别：
1. computed能完成的功能，watch都可以完成
2. watch能完成的功能，computed不一定能完成,例如：watch可以进行异步操作
两个重要的小原则：
1. 所被Vue管理的函数，最好写出普通函数，这样this的指向才是vm或组件实例
2. 所有不被Vue所管理的函数(定时器的回调函数，ajax的回调函数),最好写出箭头函数，这样this的指向才是vm或组件实例对象

##三、class与style绑定

绑定样式:
1. class样式：
  
  写法：:class='xxx' xxx可以是字符串、对象、数组
  
  字符串写法适用于:类名不确定，要动态获取。
  
  对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
  
  数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2. style样式：
  
  :style="{fontSize:xxx + 'px'}",其中xxx是动态值
  
  :style="[a,b]",其中a,b是样式对象

三、条件渲染

v-if

写法：(1) v-if=“表达式” (2)v-else-if=“表达式” (3) v-else=“表达式”

适用于：切换频率比较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

v-if可以和标签一起使用，使结构模板化
v-show

写法：v-show=“表达式”

适用于：切换频率比较高的场景
备注：使用v-if时,元素可能无法获取到，而使用v-show一定可以获取到

四、列表渲染

使用v-for指令：
1. 用于展示列表数据
2. 语法：v-for=“(item,index) in xx” :key=“yyy”(key是唯一的)
3. 可遍历数组、对象、字符串(用的很少)、指定次数(用的很少)
key的内部原理(r面试题：eact、vue中的key有什么作用?)

1.虚拟DOM中key的作用：

? key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】

? 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

? (1)旧虚拟DOM中找到了与新虚拟DOM相同的key:

? ① 若虚拟DOM中内容没变，直接使用之前的真实DOM

② 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

? (2)旧虚拟DMOM中未找到与新的虚拟DOM相同的key

? 创建新的真实DOM,随后渲染到页面

3.用index作为key可能会引发的问题：
```
  	1. 若对数据进行逆序添加、删除等破坏性顺序操作：会产生没有必要的真实DOM更新=>界面效果没问题，效率低
  	2. 如果结构中还包含输入类的DOM,会产生错误DOM更新=>界面有问题
```
4.开发中如何选择key?
1. 最好使用每条数据的唯一标识作为key，比如id，手机号，身份证号，学号等唯一值
2. 如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染列表展示，用index作为key是没问题的

五、监测数据

Vue监视数据原理：

vue会监视data中所有层次的数据
如何测试对象中的数据?

通过setter实现监控，且要在new vue时就要传入要监测的数据。

(1)对象中后追加的属性，Vue默认不做响应式处理

(2)如需给后添加的属性做响应式，请使用如下API:
```
 Vue.set(target,propertyName/index,value) or 
```
? vm.$set(target,propertyName/index,value)
如何监测数组中的数据?

通过包裹数组更新元素的方法实现，本质上就是做了两件事：

? (1)调用了原生对应的方法对数组进行更新

? (2)重新解析模板，进而更新页面
在Vue中修改数组中的某个元素一定要用如下方法：
1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2. Vue.set() or vm.$set()

特别注意：Vue.set()和vm.$set() 不能给vm或vm的根数据对象(data)添加属性

六、收集表单元素

若：<input type="text"/>,则v-model收集的是value的值，用户输入的就是value的值

若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox"/>

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值)
配置input的value属性：

(1)v-model的初始值是非数组，那么收集的就是value组成的数组

(2)v-model的初始值是数组，那么收集的就是check(勾选 or 未勾选,是布偶值)

v-model的三个修饰符:

? lazy:失去焦点再收集数据

? number：输入字符串转为有效数字

? tirm：输入首位空格过滤

七、过滤器

定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法：
1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或v-bind:属性 = “xxx | 过滤器名”

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原来的数据，而是产生新的对应的数据

八、内置指令

v-text({{}})
v-html:向指定节点中渲染包含html结构内容（有安全性问题，容易遭xss攻击,cookie）
v-cloak指令(没有值):
1. 本质上是一个特殊属性，Vue实例出啊关键完毕并接管容器后，会删掉v-cloak属性
2. 使用css属性配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令：在初次动态渲染后就视为静态内容，以后数据改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令：跳过其节点的编译过程(不解析)，可以利用它跳过没有使用指令语法和插值语法的节点加快编译

九、自定义指令

定义语法：

(1)局部指令：new Vue({

directives:{

指令名:配置对象

}

or

directives(element,binding){

}

})

(2)全局指令:Vue.directive(指令名，配置对象) or Vue.directive(指令名，回调函数)
配置对象中常用的三个回调

(1)bind():指令和元素成功绑定时调用

(2)inserted():指令所在元素被插入页面时调用

(3)update():指令所在模板结构被重新解析时调用