Vue学习教程1--Vue核心

---

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是样式对象

三、 条件渲染

1. v-if

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

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

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

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

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

2. v-show

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

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

3. 备注：使用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监视数据原理：

1. vue会监视data中所有层次的数据

2. 如何测试对象中的数据?

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

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

   (2)如需给后添加的属性做响应式，请使用如下API:

    Vue.set(target,propertyName/index,value) or 
   

   ​ vm.$set(target,propertyName/index,value)

3. 如何监测数组中的数据?

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

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

   ​ (2)重新解析模板，进而更新页面

4. 在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"/>

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

2. 配置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():指令所在模板结构被重新解析时调用

1.指令定义时不加v-,但使用时要加v-

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用calmCase命名

十、生命周期

具体可查看生命周期图示

• 别名：生命周期回调函数，生命周期函数，生命周期钩子
• 是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数
• 生命周期函数的名称不可更改，使函数的具体内容使程序员根据需求编写的
• 生命周期函数中this的指向是vm 或 组件实例对象

常用的生命周期钩子：

1. mounted: 发送ajax请求，启动定时器，绑定自定义事件，订阅消息等(初始化操作)
2. beforedestroy: 清除定时器，解绑自定义事件，取消订阅消息等(首尾工作)

关于销毁Vue实例：

1. 销毁后借助Vue开发者工具看不到任何信息
2. 销毁后自定义事件会失效，但原生DOM事件依然有效
3. 一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

---