VUE基礎篇Part1 Part2（生命週期鉤子，指令，過濾器）

VUE基礎篇，包括以下內容：
1、生命週期、鉤子
2、指令
3、過濾器

1、生命週期、鉤子

生命週期：
Vue實例從創建到銷燬的過程，就是生命週期。
從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命週期。

生命週期鉤子：
就是可以讓你在頁面生成的不同階段執行動作的api，作用就是隻要頁面到了這個階段就會觸發這個對應鉤子裏的js

鉤子共分爲8個階段：
1.beforeCreate — created
2.beforeMount — mounted
3.beforeUpdate — updated
4.beforeDestroy — destroyed
總共分爲8個階段創建前/後，載入前/後，更新前/後，銷燬前/後。

創建前/後： 在beforeCreated階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，el還沒有。

載入前/後： 在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後： 當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後： 在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在

2、指令

今天學習的基礎的指令有四個：
1、v-text: 解析文本
2、v-html：解析html
3、v-bind: 綁定元素屬性
4、v-on: 綁定事件

舉例說明：
1、v-text： 解析文本
//頁面中輸出 蘋果

<div id="app">
	<span v-text:"apple"></span>
</div>

var app = new Vue({
	el:"#app",
	data:{
		apple:"蘋果"
	}
})

2、v-html 解析html
// 看我會不會變藍 這幾個字變爲藍色

<span v-html:"blue"></span>

data:{
	blue:'<span style="color:blue">看我會不會變藍</span>'
}

3、v-bind 綁定元素
//頁面出現一塊高度爲30px寬度爲100%的紅色方塊

<style>
	.changeRed{
		height:30px;
		background:red;
	}
</style>
<div v-bind:class="className"></div>

data:{
	className:'changeRed'
}

4、v-on 綁定事件
//每次點擊按鈕都會加1

<button v-on:click="addNum">{{num}}</button>

data:{
	num:0
},
methods:{	//方法要放在與data同級的methods當中
	addNum:function(){
		this.num = this.num + 1 //vue中的this就是這個實例本身
	}
}

3、過濾器

過濾器：傳入一個值，可以選擇性的過濾掉不需要顯示的數據（如網站上顯示的時間）

<div id="app">
	{{time | formateDate}}
</div>

var addZero = function(value){	//如果小於10的話就往前面補個0
	return value > 10? value : '0' + value
}
var app = new Vue({
	el: "#app",
	data: {
		time: new Date()
	},
	filters:{	//定義一個過濾器
		formateDate:function(value){	//必須傳入一個值用來過濾，默認是value
			var time = new Date(value)
			var year = time.getFullYear()
            var month = addZero(time.getMonth() + 1)   //這裏的月份會比實際月份少1，所以加上1
            var day = addZero(time.getDay())
            var hour = addZero(time.getHours())
            var min = addZero(time.getMinutes())
            var sec = addZero(time.getSeconds())

			return year + '-' + month + '-' + day + '   ' + hour + ':' + min + ':' + sec
		}
	},
	//讓這個時間每秒鐘會在網站上自動更新,mounted表示渲染完成後的狀態
	mounted:function{
		var _this = this
		this.timer = setInterval(()=>{
			_this.time = new Date()
		},1000) 
	},
	//定時器每次用完之後要銷燬，所以用beforeDestory
	beforeDestory:function{
		if(this.timer){
			clearInterval(this.timer)
		}
	}
})