VUE [入门篇(三)]

Vue入门

目录

Vue入门

1.6.自定义指令

1、示例代码

2、调试步骤

3、参数说明

4、生命周期

1.7.组件基础

 1、组件注册

2、props属性传值

3、父子组件

4、完整示例代码

1.8.制作模板

1、选项模板

2、标签模板

 

 

 

 

 

 

 

 

1.6.自定义指令

vue中的自定义指令通过Vue.directive来实现，主要完成内置指令不能完成的一些事情

1、示例代码

	
		
		
			



	

		

			{{num}}
				

解绑

2、调试步骤

（1）chrome打开控制器查看
（2）控制台输入“app.num=’通过控制台设置的新name’”
（3）点击解绑按钮

3、参数说明

• el：指令所绑定的元素，可以用来直接操作DOM
• binding： 一个对象，包含指令的很多信息
• vnode:：Vue编译生成的虚拟节点

4、生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind，说明如下：

1. bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作
2. inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用
5. unbind：只调用一次，指令与元素解绑时调用

1.7.组件基础

 1、组件注册

（1）全局注册

// script
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: '全局组件显示： {{ count }}'
});

new Vue({
	el: '#app'
});

// html使用

（2）局部注册

// script
new Vue({
	el: '#app',
	components:{
		"button-inner":{
			data: function() {
				return {
					inner: 0
				}
			},
			template: '局部组件显示： {{ inner }}'
		}
	}
});

// html使用

2、props属性传值

（1）属性取值

// script
new Vue({
	el: '#app',
	components:{
		"button-props":{
			template:`
参数1： {{ here }}:---参数2： {{fromHere}}
`,
			props:['here', 'fromHere']
		}
	}
});

// html使用

PS：如果属性带“-”，props中需要驼峰取值

（2）在构造器向组件传值（v-bind）

// script
new Vue({
	el: '#app',
	data: {
		message: 'hello'
	},
	components:{
		"button-props":{
			template:`
参数1： {{ here }}:---参数2： {{fromHere}}
`,
			props:['here', 'fromHere']
		}
	}
});

// html使用

3、父子组件

// script
// 子组件
var city = {
	template:`
Sichuan of China
`
}
// 父组件
var parent = {
	template:
	`

	
 Panda from China!
	
	
`,
	components:{
		"city": city
	}
}

// 实例化
new Vue({
	el: '#app',
	// 定义局部组件
	components:{
		// 组件注册
		"parent": parent
	}
});

// html使用

4、完整示例代码

1.8.制作模板

vue中的模板使用template来实现

1、选项模板

2、