vue01-指令-事件修饰符-过滤器-值改变页面检测

1.指令

v-cloack:当vue.js没有被加载时，v-cloak会被识别成普通的自定义属性，让我们添加了该元素的元素display:none即可一旦vue。js加载完毕，v-cloak就会被识别成vue的指定，会自动取出之前的效果
v-class:
语法:
:class=‘class名’
:class=‘{class名:true}’
:class=‘{class名:是否表达式}’
在data中设置class名:true
v-style:不可设置是否，但是可以在data中描述
v-href
v-html,v-text
v-for：
对象：v-for(val,key,index)数组:v-for(val,index)
v-if,v-else,v-else-if,
v-show，v-if
v-on,v-keydown,v-mousedoun,v-contextmenu**
a.传参必须加()
b.若没加(),默认第一个形参为事件对象event
c.加(),需要通过传入$event获取事件对象

2.事件修饰符

@事件名.修饰符1.修饰符2.修饰符3.=‘’
普通事件修饰符：阻止冒泡stop,阻止默认事件prevent,一次性事件once
键盘事件修饰符:left,right,up,down,up,enter…
鼠标事件:left,right,middle

<div @contextmenu="oneEvent" id="one">
<div @contextmenu.stop.prevent.once="twoEvent"  id="two">啦啦啦</div>
</div>
<!--键盘修饰符:只有按下space,left,right,w键才会执行(ctrl,shift无作用)-->
<input @keydown.space.left.right.w="threeEvent"></input>
<!--鼠标修饰符:只有按下鼠标右键才会执行。不可以组合用，只可以设置一个-->
<div @mousedown.right="fourEvent"></div>

3.过滤器

{{需要处理的变量|过滤器名(参数1，参数2…)}}
实例…filter(‘过滤器名’,function(val,参数1，参数2){
return 过滤后的结果
})

 <h1>{{123.533|currency(['我的支付宝里还剩','元'],2)}}</h1>

Vue.filter('currency',function (value,str,n) {
        return str[0]+value.toFixed(n)+str[1];
    })

4.数组和对象的检测（修改data中的值）

1. 数组：
   push向末尾添加一个 pop删除末尾
   unshift 在首部添加 shift删除首个
   splice添加 sort排序 reverse颠倒--------------这些方法改变原数组
   join concat map slice filter-------------不改变原数组，页面不更新。
   直接修改数组中的元素，页面不更新。
   a.重新覆盖数组
   b.Vue.set(数组，下标，新值)
   c.vue实例.$set(数组，下标，新值)
2. 对象
   新增属性，不可更新
   解决方法：
   a.Vue.set(对象，新key，新val)
   b.vue实例.$set(对象，新key，新值val)
   c.原对象=Object.assign({},对象，新增键值对对象)