一：監聽器
概述：watch監聽器的用法相當於是我們監視一個數據的變化，在這個數據變化時執行一些操作，這個操作可以是任何操作
監聽者里面有三個參數：
1.handler :function(newVal,oldVal){} 操作者 代表這個數據改變的時候執行什么操作 有兩個參數 newVal （改變后的數據）oldVal（改變前的數據）
2.deep:false, 如果監聽的是一個引用類型的數據（對象/數組），需要深度監聽，true是深度監聽，false是淺監聽，默認是false
3.immediate:true, 實例創建的時候是否執行watch 為true時代表 監聽的數據第一次被綁定的時候就開始監聽。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>監聽器練習</title>
</head>
<body>
<div id="app">
<input type="text" v-model="conten">
<div>{{showconten}}</div>
<button @click="obj.name='小紅'">改變數據</button>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
conten: "",
obj: {
age: 12,
name: "小明"
},
num: 0
},
computed: {
showconten() {
return "輸入的內容是" + this.conten;
}
},
watch: { //監聽input框的變化情況
//在input框每次輸入內容的時候,這一行在后台都會打印值:改變后的數據---改變前的數據
'conten': { //定義在watch里的conten代表監控數據conten
handler: function(newVal, oldVal) { //操作者
console.log(newVal, "---", oldVal)
},
},
//監聽對象中name屬性
'obj.name': {
//剛剛進入頁面時 數據沒有改變,默認undefined,后台打印 小明 # undefined
//當點擊改變數據的時候,后台打印 小紅 # 小明
handler: function(newVal, oldVal) {
console.log(newVal, '#', oldVal)
},
deep: true, //深度監聽，可以監聽這個對象的某個屬性比如說監聽 'obj.name'
immediate: true, //監聽的數據第一次被綁定的時候就開始監聽
},
}
})
</script>
</body>
</html>
此外：
監聽器可以定義在實例外面，調用vm.$watch方法來進行數據監測.
第一個參數是監聽的數據，第二個參數就是一個{}里面有三個參數（跟定義在實例里面的寫法一樣），也可寫成簡寫形式（只有一個handler）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>監聽器練習2</title>
</head>
<body>
<div id="app">
<button @click="num++">改變num</button>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
num: 0
},
watch: {
//如果一個監聽器不需要deep和immediate參數的時候可以直接寫handler
'num': function(newVal, oldVal) {
console.log(newVal, '===', oldVal)
}
}
})
vm.$watch("num", {
handler: function(newVal, oldVal) {
console.log(newVal, '====', oldVal)
}
})
vm.$watch("num", function(a, b) {
console.log(a, '===', b)
})
</script>
</body>
</html>
二：過濾器
概述：過濾器filters可以在插值語句和屬性綁定v-bind的時候用 用法是 原本的值|過濾器，過濾器默認的第一個參數是你要過濾的數據
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>過濾器練習</title>
</head>
<body>
<div id="app">
<p v-for="count in 4">{{count|add("￥")}}</p>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
// 局部過濾器
filters:{
//要過濾的是在每個數字后面加￥,寫法如下
add(msg,x){//msg是過濾的數據
console.log(msg)
return msg+x;
},
}
})
</script>
</body>
</html>
此外：局過濾器,在所有的實例里都能用，若全局跟局部過濾器重名的話，會優先使用局部的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>過濾器全局寫法</title>
</head>
<body>
<div id="app">
<img :src="src1|getimg" alt="">
</div>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
//我們要的是../01.jpg,過濾如下:
Vue.filter("getimg",function(msg){
return "../"+msg;
})
var vm=new Vue({
el:"#app",
data:{
src1:"01.jpg"
}
})
</script>
</body>
</html>