Vue基础知识之常用属性和事件修饰符（二）

Vue中的常用选项

1、计算属性

<div id="app">
全选：<input type="checkbox" v‐model="checkAll" > <br>
<input type="checkbox" v‐for="a in checkList" v‐model="a.selected">
</div>
data:{
checkList:[{selected:true},{selected:true},{selected:false}]
},
computed:{
checkAll:{
set(val){//此处的val代表的就是全选键的值。

for(var arr of this.checkList){
arr.selected = val;
}
},
get(){
var obj = this.checkList.find(function (item) {
return !item.selected
});
return obj?false:true;
}
}
msg:function(){return }//默认是get
}

2、methods



3、watch

<div id="app">
<input type="text" v‐model="msg">
{{content}}
</div>
var vm = new Vue({
el:'#app',
data:{
msg:'hello',
content:''
},
watch:{
msg:function () {
this.content = 'waiting...';
setTimeout(()=> {
this.content = 'Hello Mrs Jiang!'
},2000);
}
}
});//修改msg的值先等待两秒后再显示。
computed适合做复杂逻辑，简单的只能给watch，当一个值改变触发某个事件时使用watch;如果是异步，并且有中间过程，用watch。

4、data

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a   // -> true
vm.a = 2          // 设置属性也会影响到原始数据
data.a            // -> 2
data.a = 3        // ... 反之亦然
vm.a              // -> 3
注意：只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data       // -> true
vm.$el === document.getElementById('example') // -> true
vm.$watch('a', function (newVal, oldVal) { // $watch 是一个实例方法
// 这个回调将在 `vm.a`  改变后调用
})
注意：不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义

实例上常用的属性

vm.$el 代表的就是获取当前的元素，可以直接操作，修改样式等

vm.$data 获取当前实例上挂载的数据

vm.$options 当前实例上自定的属性

vm.

$

watch 监控数据的变化 vm.$watch('total',function(newVal,oldVal){})//只要是data上的数据或者计算属性皆可以监控。

事件进阶-修饰符

事件处理函数只有纯粹的逻辑判断，不处理DOM实践的细节，例如：阻止冒泡，默认行为，判断按键

<div @click="say">
parent
<div @click.stop="say">child</div>//阻止冒泡
</div>

<a href="http://www.baidu.com" @click.prevent="say">百度</a>//阻止默认行为

<a @click.stop.self.prevent="say" href="http://www.baidu.com" style="border: 10px s
olid red">
<span>2</span>
<span>1</span>
</a>

<div @click='say'>parent
<div @click='say1'>
child
</div>
</div>

<div @click.once='say'>say</div>

按键修饰符,常见的修饰符.enter/.tab/.delete/.esc/.space/.up/.down。。键值

<input type='text' @keyup.enter='say'>
注意：'.'后面也可以使用对应键值的ASCII码值

动态绑定类名

动态绑定的class和原生的class可以共存，如果有覆盖，动态的覆盖静态的。

动态绑定style