Vue.js实战基础篇

Vue.js实战基础篇

生命周期钩子

created:Vue实例创建完后调用，此时还未完成dom元素挂载vue实例，通常用在初始化一些操作；
mounted:挂载完成后调用；
beforeDestroy:实例销毁之前调用，主要用来解绑一些使用addEventListener监听的实践。

组件注册

1. 全局注册

Vue.component('my-component',{
template:'<div>这里是全局注册组件的内容</div>'
});

var Vue = new vue({el:'#app'})

2. 局部注册

var Child = {
template:'<div>这里是局部注册组件的内容</div>'
}

var Vue = new vue({
el:'#app',
components:{
'my-component':Child
}
})

父子组件通信

方法1：通过props传值，$emit传事件方法2：通过$parent访问父组件属性，可以递归向上无限访问（不安全，尽量避免父组件的内容被修改，最好还是通过props传值，$emit传事件）。通过$refs访问子组件（并非响应式的，属于应急方案，尽量避免在模板或计算属性中使用$refs）

非父子组件通信

1. bus中央事件总线

<script>
var bus = new Vue();

Vue.component('component-a',{
template:'<button @click="handleEvent">传递事件</button>',
methods:{
	handleEvent:(){
		bus.$emit('on-message','msg参数')
	}
}
});

var vue = new Vue()({
	el:'#app',
	data():{
		return {	
			message:'',
		}
	},
	mounted:(){
		var _this = this;
		// 监听on-message事件
		bus.$on('on-message',() => {
			_this.message = msg;
		});
	}
})

</script>

2. vuex状态管理

slot

1. 匿名slot
2. 具名slot
3. 作用域slot
   用于复用子组件slot，可以在父组件中向子组件slot传递不同内容

自定义指令

1. 注册
   （1）全局注册

Vue.directive('focuse',{
// 指令选项
})

其中指令选项是由几个钩子函数组成的，每个都是可选的：
bind:只调用一次，指令第一次绑定到元素时调用；
inserted:被绑定元素插入父节点时调用；
update:被绑定元素所在的模板更新时调用；
componentUpdated:被绑定的元素所在的模板完成一次更新周期时调用；
unbind:只调用一次，指令与元素解绑时调用；
（2）局部注册

var app = new Vue({
	el:'#app',
	directives:{
		focus:{
			inserted:(el, binding){
			// 聚焦元素
			el.focus();
			}
		}
	}
})

3. 参数说明
   el:指令所绑定的DOM元素
   binding:一个对象，包含以下属性：
   name:指令名，不包括v-前缀；
   value:指令绑定的值
   oldValue:指令绑定的前一次值；
   。。。。在此不多列举，见Vue.js实战p120
   vnode:Vue编译生成的虚拟结点

自定义指令也可以传入一个对象作为参数，例如：

v-focus="{msg:'haha', name:'jack'}"