VUE进阶

最新推荐文章于 2024-06-08 19:16:04 发布

MiemieWan

最新推荐文章于 2024-06-08 19:16:04 发布

阅读量307

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/MiemieWan/article/details/101017536

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、Vue.directive 自定义组件

1.钩子函数（生命周期）

（1）bind:只调用一次，指令第一次绑定到元素时调用。

（2）inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

（3）update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。

（4）componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

（5）unbind：只调用一次，指令与元素解绑时调用。

2.钩子函数参数

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

例子：给指定元素字体设置颜色

<template>
	<div>
		<p v-setmycolor="mycolor">123</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
			mycolor: 'red',
			foo: 'backgroundColor'
		}
	},
	directives:{
		setmycolor: {
			bind: function(el, binding, vnode, oldVnode) {
				console.log(el); // <p>123</p>
				console.log(binding); //expression:"mycolor",name:setmycolor,rawName:"v-setmycolor",value:"red"
				console.log(vnode);
				console.log(oldVnode);
				el.style.color = binding.value;
			}
		}
	}
}
</script>
<style>
	
</style>

3.动态参数

例子：指定元素自定义属性设置颜色：v-setmycolor:[foo]="mycolor"

<template>
	<div>
		<p v-setmycolor:[foo]="mycolor">123</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
			mycolor: 'red',
			foo: 'backgroundColor'
		}
	},
	directives:{
		setmycolor: {
			bind: function(el, binding, vnode, oldVnode) {
				console.log(el); // <p>123</p>
				console.log(binding); //arg: "backgroundColor",expression:"mycolor",name:setmycolor,rawName:"v-setmycolor:[foo]",value:"red"
				console.log(vnode);
				console.log(oldVnode);
				el.style[binding.arg] = binding.value;
			}
		}
	}
}
</script>
<style>
	
</style>

4.简写

在 bind 和 update 时触发相同行为，可简写：

<template>
	<div>
		<p v-setmycolor:[foo]="mycolor">123</p>
	</div>
</template>
<script>
export default {
	data(){
		return {
			mycolor: 'red',
			foo: 'backgroundColor'
		}
	},
	directives:{
		setmycolor: function(el, binding, vnode, oldVnode) {
			console.log(el); // <p>123</p>
			console.log(binding); //arg: "backgroundColor",expression:"mycolor",name:setmycolor,rawName:"v-setmycolor:[foo]",value:"red"
			console.log(vnode);
			console.log(oldVnode);
			el.style[binding.arg] = binding.value;
		}
	}
}
</script>
<style>
	
</style>

二、Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。

由于Javascript的限制，Vue不能自动检测以下变动的构造器外部数组。

当你利用索引直接设置一个项时，vue不会为我们自动更新视图。
当你修改数组的长度时，vue不会为我们自动更新视图。

但使用Vue.set操作该数组时，vue会自动更新视图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set 全局操作</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
       
    </div>
    <button onclick="add()">外部添加</button>
 
    <script type="text/javascript">
     
        function add(){
            console.log("我已经执行了");
           app.arr[1]='ddd';
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>
</body>
</html>

三、事件修饰符.native:监听组件根元素的原生事件

四、Mixins

作用：

在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用.

规则：

当数据和方法重名时，组件数据和方法优先
当生命周期重复时，合并，先执行混合对象中的生命周期，再执行组件中的

<template>
	<div>
		<p>{{num}}</p>
		<button @click="add">加1</button>
	</div>
</template>
<script>
var addLog = {
	data() {
		return  {
			num:2 //重名的数据被忽略
		}
	},
	updated() { //重名的生命周期先执行
		console.log(this.num);  
	},
	methods:{
		add() { //重名的方法被忽略
			console.log('混入的方法'); 
		}
	}
}
export default {
	data() {
		return  {
			num:1
		}
	},
	methods:{
		add() {
			this.num ++;
		}
	},
	updated() {
		console.log('原本的数据');
	},
	mixins:[addLog]
}
</script>
<style>
	
</style>

全局引入：

MiemieWan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE进阶

一、Vue.directive自定义组件1.钩子函数（生命周期）（1）bind:只调用一次，指令第一次绑定到元素时调用。（2）inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。（3）update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。（4）componentUpdated：指令所在组件的 VNo...
复制链接

扫一扫

专栏目录