补：事件

《1-0.鼠标事件v-on》

《1-1：键盘事件》

比如我 v-on:keydown.enter="",意为我按下enter键才触发事件

《1-2.class绑定》

我提出一个要求：

 

 我想点击一下按钮，就将stu1这个样式换掉，换成下面这几个

难倒我要在methods中写

changeclass(){

　　var diver=document.quertSelector('div')

　　diver.addEventlisenter('click',()=>{})...等等写法吗?

}

在vue中尽量不要自己操作DOM，那怎么办呢？

通过：class动态绑定data中的数据divClass，其会将他当做表达式看，即读取data中divClass中的数据

然后通过methods来改变data中的数据从而不去自己动DOM

 

《1-3.条件渲染v-show and v-if (v-else-if)》

 v-show的作用是减少我在vue中操作display这个让某个元素消失，其实v-show底层也是用display来实现的

写法： <<div v-show="表达式">><</div>>

v-show=“”中与v-on=“”中一样都是写表达式，只不过v-show中表达式的结果是true/fasle

2 v-if其与v-show很像，但是其让某个元素消失时，是整个将标签删除了

《2.数据监视 watch》

 

《2.深度监视》

现在我提出一个需求：我要监视如下的递归数据：

方法一：
针对某一具体的数据
watch:{
  "number.c.c1":{    
     
   }
  
}
方法二：
如果监视的是number全部的属性，一个一个写出来是不太可能的那么要：
watch:{
    deep:true
    number:{}
}

《3.计算属性》

计算属性全写方式：

计算属性其实可以被看做计算过后的在data属性中的值来看，

为啥要有computed，可以想一下我们要由已经有的属性，组成我们要的属性

如果将属性组成表达式写在{{}}或data中当然可以，但是计算方式一旦复杂起来就不好办了，

这时就要computed;

那么其与methods属性起不是很像？确实，但是还是有不同：

实例演示：