過濾器，就是vue允許開發者自定義的文本格式化函數，可以使用在兩個地方：輸出内容和操作資料中。
共有兩種定義方式
1.使用Vue.filter()進行全局定義Vue.filter("RMB1", function(v){
//就是來格式化(處理)v這個資料的
if(v==0){
return v
}
return v+"元"
})
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
vue提供了一個計算屬性(computed)，可以讓我們把調整data資料的代碼存在在該屬性中。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
str1: "abcdefgh"
},
computed:{ //計算屬性：裡面的函數都必須有傳回值
strRevs: function(){
var ret = this.str1.split("").reverse().join("");
return ret
}
}
});
}
</script>
</head>
<body>
<div id="app">
<p>{{ str1 }}</p>
<p>{{ strRevs }}</p>
</div>
</body>
</html>
偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值一般是函數，當偵聽的data資料發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的資料值，第二個是變化後的資料值。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:20
},
watch:{
num:function(newval,oldval){
//num發生變化的時候，要執行的代碼
console.log("num已經發生了變化！");
}
}
})
}
</script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++">按鈕</button>
</div>
</body>
</html>
每個Vue對象在建立時都要經過一系列的初始化過程。在這個過程中Vue.js會自動運作一些叫做生命周期的的鈎子函數，我們可以使用這些函數，在對象建立的不同階段加上我們需要的代碼，實作特定的功能。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:0
},
beforeCreate:function(){
console.log("beforeCreate,vm對象尚未建立,num="+ this.num); //undefined
this.name=10; // 此時沒有this對象呢，是以設定的name無效，被在建立對象的時候被覆寫為0
},
created:function(){
console.log("created,vm對象建立完成,設定好了要控制的元素範圍,num="+this.num ); // 0
this.num = 20;
},
beforeMount:function(){
console.log( this.$el.innerHTML ); // <p>{{num}}</p>
console.log("beforeMount,vm對象尚未把data資料顯示到頁面中,num="+this.num ); // 20
this.num = 30;
},
mounted:function(){
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("mounted,vm對象已經把data資料顯示到頁面中,num="+this.num); // 30
},
beforeUpdate:function(){
// this.$el 就是我們上面的el屬性了，$el表示目前vue.js所控制的元素#app
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("beforeUpdate,vm對象尚未把更新後的data資料顯示到頁面中,num="+this.num); // beforeUpdate----31
},
updated:function(){
console.log( this.$el.innerHTML ); // <p>31</p>
console.log("updated,vm對象已經把過呢更新後的data資料顯示到頁面中,num=" + this.num ); // updated----31
},
});
}
</script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="num++">按鈕</button>
</div>
</body>
</html>
使用.stop和.prevent
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 200px;
height: 200px;
background: #ccc;
}
.box2{
width: 100px;
height: 100px;
background: pink;
}
</style>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{}
})
}
</script>
</head>
<body>
<div id="app">
<div class="box1" @click="alert('box1')">
<div class="box2" @click.stop.prevent="alert('box2')"></div> <!-- @click.stop來阻止事件冒泡 -->
</div>
<form action="#">
<input type="text">
<input type="submit">
<input type="submit" value="送出02" @click.prevent=""> <!-- @click.prevent來阻止表單送出 -->
</form>
</div>
</body>
</html>
![laydate元件 無法傳值_Vue元件間通信6種方式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)