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)
		}
	}
})