Vue中的常用选项
- 1、计算属性
computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法。里面的
计算属性简单来说，就是根据数据推算出来的值，当给这个值赋值时可以影响其他值的变化。
<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
用于检测的数据发生改变的api
和computed不同，watch可以夹杂异步逻辑
当一个值发生变化的时候，执行某个动作用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
每个 Vue 实例都会代理其 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实践的细节，例如：阻止冒泡，默认行为，判断按键
1、事件冒泡（事件不会向上传递）
<div @click="say">
parent
<div @click.stop="say">child</div>//阻止冒泡
</div>
2、阻止默认事件（不触发默认事件）
<a href="http://www.baidu.com" @click.prevent="say">百度</a>//阻止默认行为
3、指定元素触发（不包括子元素）
<a @click.stop.self.prevent="say" href="http://www.baidu.com" style="border: 10px s
olid red">
<span>2</span>
<span>1</span>
</a>
4、事件捕获方式（父->子）
<div @click='say'>parent
<div @click='say1'>
child
</div>
</div>
5、绑定事件一次（触发后移除事件）
<div @click.once='say'>say</div>
6、.capture事件默认是双向的，先捕获，在冒泡
- 按键修饰符,常见的修饰符.enter/.tab/.delete/.esc/.space/.up/.down。。键值
<input type='text' @keyup.enter='say'>
注意：'.'后面也可以使用对应键值的ASCII码值
动态绑定类名
- 动态绑定的class和原生的class可以共存，如果有覆盖，动态的覆盖静态的。
1、对象绑定方式：
:class="{类名：条件，类名：条件}"
如果条件为true，添加样式；如果条件为false，移除样式。
2、数组绑定方式：
:class="[data中的数据，"类名"，{类名：条件}]"
data:{
data中的数据:“类名”，
}
动态绑定style
1、对象绑定方式：
:style="{属性名：属性值}"
2、数组绑定方式：
:style="[data中的数据]"
data:{
data中的数据:{属性名:属性值}
}