VUE [入门篇(三)]

Vue入门

1.6.自定义指令

1、示例代码

1.6.自定义指令

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

1、示例代码

<!DOCTYPE html>
	<html lang="en">
		<head>
		<meta charset="UTF-8">
			<title>Vue入门之自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-test="color">
			{
   
   {num}}
				</div>
</div>
<button onclick="unbindApp()">解绑</button>

<script type="text/javascript">
	// 解绑
	function unbindApp() {
	app.$destroy();
}

// 自定义指令
Vue.directive("test",{
	//1-被绑定
	bind:function (el, binding, vnode) {
		console.log("1-bind 被绑定");
		console.log("el:",el);
		console.log("binding:",binding);
		console.log("vnode:",vnode);
		el.style.color = binding.value;
	},
	//2-被插入
	inserted:function (el, binding, vnode) {
		console.log("2-inserted 被插入");
	},
	//3-更新
	update:function (el, binding, vnode) {
		console.log("3-update 更新");
	},
	//4-更新完成
	componentUpdated:function (el, binding, vnode) {
		console.log("4-componentUpdated 更新完成");
	},
	//5-解绑
	unbind:function (el, binding, vnode) {
		console.log("5-unbind 解绑");
	}
});

var app = new Vue({
	el:'#app',
	data:{
		num: 123,
		color:'red'
	}
})
</script>
</body>
</html>

2、调试步骤

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

3、参数说明

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

4、生命周期

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

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

1.7.组件基础

1、组件注册

（1）全局注册

// script
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: '<button v-on:click="count++">全局组件显示： {
   
   { count }}</button>'
});

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

// html使用
<button-counter></button-counter>

（2）局部注册

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

// html使用
<button-inner></button-inner>

2、props属性传值

（1）属性取值

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

// html使用
<button-props here="hello" from-here="world"></button-props>

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

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

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

// html使用
<button-props v-bind:here="message" :from-here="message"></button-props>

3、父子组件

// script
// 子组件
var city = {
	template:`<div>Sichuan of China</div>`
}
// 父组件
var parent = {
	template:
	`<div>
	<p> Panda from China!</p>
	<city></city>
	</div>`,
	components:{
		"city": city
	}
}

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

// html使用
<parent></parent>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 全局组件 -->
			<div>
				<button-counter></button-counter>
			</div>
			<!-- 局部组件 -->
			<div>
				<button-inner></button-inner>
			</div>
			<!-- 常规属性传值 -->
			<div>
				<button-props here="hello" from-here="world"></button-props>
			</div>
			<!-- v-bind传值 -->
			<div>
				<button-props v-bind:here="message" :from-here="message"></button-props>
			</div>
			<!-- 父子组件调用 -->
			<div>
				<parent></parent>
			</div>

		</div>

		<script type="text/javascript">
			// 定义全局组件
			Vue.component('button-counter', {
				data: function() {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">全局组件显示： {
   
   { count }}</button>'
			});

			// 子组件
			var city = {
				template: `<div>Sichuan of China</div>`
			}
			// 父组件
			var parent = {
				template: `<div>
                <p> Panda from China!</p>
                <city></city>
            </div>`,
				components: {
					"city": city
				}
			}

			// 实例化
			new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				// 定义局部组件
				components: {
					"button-inner": {
						data: function() {
							return {
								inner: 0
							}
						},
						template: '<button v-on:click="inner++">局部组件显示： {
   
   { inner }}</button>'
					},
					// 取值
					"button-props": {
						template: `<div style="color:red;">参数1： {
   
   { here }}:---参数2： {
   
   {fromHere}}</div>`,
						props: ['here', 'fromHere']
					},
					// 组件注册
					"parent": parent
				}
			});
		</script>
	</body>
</html>

1.8.制作模板

vue中的模板使用template来实现

1、选项模板

<div id="app">
</div>

<script type="text/javascript">
    // 实例化
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        template:`<h1 style="color:red">我是选项模板</h1>`
    });
</script>

2、<template>标签模板

<div id="app">
    <template id="demo2">
        <h2 style="color:red">我是template标签模板</h2>
    </template>
</div>

<script type="text/javascript">
    // 实例化
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        template:'#demo2'
    });
</script>

3、<script>标签模板

<div id="app">
</div>

<script type="x-template" id="demo3">
    <h2 style="color:red">我是script标签模板</h2>
</script>

<script type="text/javascript">
    // 实例化
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        template:'#demo3'
    });
</script>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- template标签模板 -->
			<template id="demo2">
				<h2 style="color:red">我是template标签模板</h2>
			</template>
		</div>

		<!-- script标签模板 -->
		<script type="x-template" id="demo3">
			<h2 style="color:red">我是script标签模板</h2>
</script>

		<script type="text/javascript">
			// 实例化
			new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				// 选项模板
				//template:`<h1 style="color:red">我是选项模板</h1>`
				//template:'#demo2'
				template: '#demo3'
			});
		</script>
	</body>
</html>

1.9.插槽slot

插槽，也就是slot，是组件的一块HTML模板(占位符)，一个slot最核心的两个问题是显不显示和怎样显示

1、单个slot

单个插槽，别名默认插槽、匿名插槽，不用设置name属性

<div id="app">
	<children1>
	<span>12345</span>
</children1>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		components: {
			children1: {
				template: "<button><slot></slot>单个插槽</button>"
			}
		}
	});
</script>

2、具名slot

插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置

<div id="app">
	<children2>
	<span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
</children2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		methods: {
			tobeknow: function () {
				console.log("It is the parent's method");
			}
		},
		components: {
			children2: {//这个无返回值，不会继续派发  
				template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
			}
		}
	});
</script>

3、作用域slot

vue2.5版本中slot-scope取代了scope，来实现作用域插槽，主要用在组件调用中，具体在template标签上面使用slot-scope来获取插槽slot上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在element-ui的组件中经常看到。

<div id="app">
	<!-- 将数据传递给组件 -->
	<tb-list :data="data">
		<!-- 获取slot上面的值 -->
		<template slot-scope="scope">
			<p>索引：{
   
   {JSON.stringify(scope)}}</p>
			<p>索引：{
   
   {scope.$index}}</p>
			<p>姓名:{
   
   {scope.row.name}}</p>
			<p>年龄: {
   
   {scope.row.age}}</p>
			<p>性别: {
   
   {scope.row.sex}}</p>
		</template>
	</tb-list>
</div>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			data: [{
				name: 'kongzhi1',
				age: '29',
				sex: 'man'
			}]
		},
		components: {
			// 作用域slot
			'tb-list': {
				template:
				`<ul>
				<li v-for="(item, index) in data">
				<slot :row="item" :$index="index"></slot>
				</li>
				</ul>`,
				// 获取值
				props: ['data']
			}
		}
	});
</script>

4、完整示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue入门之slot</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<children1>
				<span>12345</span>
			</children1>
			
			<children2>
				<span slot="first" @click="tobeknow">12345</span>
				<span slot="second">56789</span>
			</children2>
			
			<!-- 将数据传递给组件 -->
			<tb-list :data="data">
				<!-- 获取slot上面的值 -->
				<template slot-scope="scope">
<p>索引：{
   
   {JSON.stringify(scope)}}</p>
<p>索引：{
   
   {scope.$index}}</p>
<p>姓名:{
   
   {scope.row.name}}</p>
<p>年龄: {
   
   {scope.row.age}}</p>
<p>性别: {
   
   {scope.row.sex}}</p>
				</template>
			</tb-list>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					data: [{
						name: 'kongzhi1',
						age: '29',
						sex: 'man'
					}]
				},
				methods: {
					tobeknow: function() {
						console.log("It is the parent's method");
					}
				},
				components: {
					// 单个slot
					children1: {
						template: "<button><slot></slot>单个插槽</button>"
					},
					// 具名slot
					children2: {
						template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
					},
					// 作用域slot
					'tb-list': {
						template: `<ul>
						<li v-for="(item, index) in data">
						<slot :row="item" :$index="index"></slot>
			</li>
			</ul>`,
						// 获取值
						props: ['data']
					}
				}
			});
		</script>
	</body>
</html>

Vue入门

1.6.自定义指令

1、示例代码

2、调试步骤

3、参数说明

4、生命周期

1.7.组件基础

1、组件注册

2、props属性传值

3、父子组件

4、完整示例代码

1.8.制作模板

1、选项模板

2、<template>标签模板

3、<script>标签模板

4、完整示例代码

1.9.插槽slot

1、单个slot

2、具名slot

3、作用域slot

4、完整示例代码

猜你喜欢