Vue第四天复习(1)

哈希值

• 负责选项卡切换页面根据hash值算出数据 #/名字

this.hash = window.localtion.hash.slice(2) || 'all'
window.adddEventListener('hashchange',()=>{
	this.hash = window.localtion.hash.slice(2) || 'all'
},false)
//负责页面哈希值变化的时候触发的页面

Vue的生命周期

• 根实例初始化的时候会调用很多方法（钩子函数）
• beforeCreate created
• beforeMount mounted
• beforeUpdated updated
• beforDestroyed destroyed

1. 初始化内部的方法在beforeCreate()但是还没有data属性，数据还没有渲染了

   		let vm = new Vue({
   			beforeCreate(){
   				debugger;
   		}	
   	})
   

2. create中有了数据和get和set的方法

   		let vm = new Vue({
   				data:{a:1}
   				created(){    //获取Ajax和初始化操作
   					debugger;
   			}	
   		})
   

3. beforeMount 必须保证有编译的元素

   			let vm = new Vue({
   						el:#app;
   						beforeMount(){//没有什么实际意义
   							debugger;
   						}
   						template:{
   									'<div>{{a}}</div>'//如果有template属性会用模板替换掉外部html属性，只能用一个根元素，不能是文本节点
   							}
   					})
   	//或者是 vm.$mount('#app')保证有编译元素beforeMount才会执行
   

4. mounted() 这个方法可以操作dom元素了因为真实dom操作完了
5. beforeUpdate()更新之前，更新之后
6. updated()更新后 一般会用watch：替换掉
7. beforeDestroy()销毁前 清除定时器 清除事件绑定
8. destroyed()销毁后 移除后

monuted() 详细说明

HTML:
<div id='app'>
	<p ref="myp">{{msg}}</p>
</div>

vue:
let vm = new Vue({
	el:"#app",
	data:{
	msg:'hellow'	
}
//dom完成之后执行的函数，异步方法this.$nextTick()
//this.$data, this.$el,this.$set,this.$options把所有属性都打印出来
mounted(){
		this.$nextTick(()=>{//dom完成之后执行的函数，异步方法，如果你像改变数据后马上获取到最新的数据值那么就需要用到此函数。
			console.log(vm)
		})
		this.$ref.myp//可以取dom元素，如果dom元素不是通过v-for循环的 只能获取一个，通过v-for循环出来的就可以获取多个
	}
})