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中的數據:{屬性名:屬性值}
}