Vue基础（3）

Vue生命周期

var vm = new Vue({
				el:'#app',
				data:{
					name:'dg'
				},
				beforeCreate(){
					console.log(this.$el)	//undefined
					console.log(this.$data) //undefined

				},
				created(){
					console.log(this.$el)	//undefined
					console.log(this.$data) //获取到
				},
				beforeMount(){
					console.log(this.$el)	//获取到数据,但还没渲染到页面
					alert(this.$el.innerHTML)
					console.log(this.$data) //获取到
				},
				//beforeMount之后将#app渲染到页面上
				mounted(){
					console.log(this.$el)	//获取到,已经渲染到页面
					alert(this.$el.innerHTML)
					console.log(this.$data) //获取到
				},
				//mounted之后,当数据发生改变的时候(页面还没重新渲染)
				beforeUpdate(){
					//更新前里面的值还是dg,updated才更新渲染
					console.log(this.name)
					console.log("更新前")
					console.log(this.$el)	//获取到
					alert(this.name) 		//数据已经改变
					alert(this.$el.innerHTML)	//并没有渲染到页面上
				},
				updated(){
					console.log("更新后")
					alert(this.name)	//数据改变
					alert(this.$el.innerHTML)	//渲染到页面
				},
				beforeDestroy(){
					console.log('销毁前')
					console.log(this.$data)				//该有的都有
					console.log(this.$el.innerHTML)		//该有的都有
				},
				destroyed() {
					console.log('销毁后')					
					console.log(this.$data)
				}
			})
			// 如果没有写el,可以通过下面方法绑定
			// vm.$mount('#app');

this.$el.innerHTML得到渲染的值this.$data 得到数据
Vue实例生命周期
创建
实例化之后，数据观测和事件配置之前
beforeCreate
实例完成之后，数据观测和事件配置完成
created
挂载
挂载之前调用
beforeMount 相关render函数首次调用
挂载之后调用
mounted
更新
数据更新时调用，发生在虚拟DOM重新渲染之前（可以进一步更改状态，不会重渲染）
beforeUpdate
调用时，DOM组件已经更新
updated 避免在此期间更改状态,如要改变使用计算属性和watcher取代
销毁
销毁前，实例依然可用
beforeDestroy
销毁后调用，调用后所有东西解绑，移除监听，子列也会销毁
destroyed
$destroy只是完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。它并不是用来清除已有页面上的DOM的。在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。

按键修饰符：

<div id="app">
			<input type="search" v-model="message" @keyup.enter.exact="change"/>			
			<button @click="clears">清除</button>
			<ul>
				<li v-for="item in list">
					{{item}}
				</li>
			</ul>
			//自身才会触发
			<div  @click.self="alts">1
				<div @click="">11</div>
			</div>
			//执行一次
			<div  @contextmenu.once="alts">1
				<div @click="">11</div>
			</div>
		</div>
		<script>
			
			var vm = new Vue({
				el:"#app",
				data:{
					message:"",
					list:[],
					count:0
				},
				methods:{
					change(){
// 						if(e.keyCode == 13)
						this.list.push (this.message);
					},
					clears(){
						var arr = [];
						this.list = arr;
					},
					alts(){
						alert('11')
					}
				}
			})
		</script>

// 按键修饰符:在事件的后面添加键盘的相关功能
//exact修饰符：精确匹配,如enter添加之后CTRL和回车无法一起使用
//事件修饰符 如阻止冒泡,默认事件等
//事件流:捕获阶段,冒泡阶段,目标阶段
//.self点自身才会触发
新出 .passive提升移动端性能