Vue进阶（九十一）：自定义指令_vue自定义指令bind和update同时写

二、如何声明自定义指令？

正如vue全局组件和局部组件一样，vue指令也分全局自定义指令和局部自定义指令。

// demoDirective.js
let Opt = {
    bind:function(el,binding,vnode){ },
    inserted:function(el,binding,vnode){ },
    update:function(el,binding,vnode){ },
    componentUpdated:function(el,binding,vnode){ },
    unbind:function(el,binding,vnode){ },
}

对于全局自定义指令的创建，我们需要使用 Vue.directive接口

Vue.directive('demo', Opt)

在单独JS文件demoDirective.js中定义好以上自定义指令后，然后在main.js入口文件中加以引入即可，

// main.js
import './directive/demoDirective.js'

接下来即可在需要应用的组件中应用，应用示例如下所示：

<dialog v-demo/>

对于局部组件，我们需要在组件的钩子函数directives中进行声明

Directives: {
    Demo:Opt
}

Vue指令可以简写，上面Opt是一个对象，包含5个钩子函数，我们可以根据需要只写其中几个函数。如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子，你可以将Opt改为一个函数。

let Opt = function(el,binding,vnode){ }

下面定义了一个v-test指令绑定数据name。

<template>
  <div class="hello">
  	<div v-test='name'></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
     name:'我是名字',
    }
  },
  directives:{
  	test:{
	    inserted: function (el,binding) {// 指令的定义
	       / /el为绑定元素，可以对其进行dom操作
	       console.log(binding) //一个对象，包含很多属性
	    },
	    bind: function (el, binding, vnode) {
		    el.innerHTML =binding.value
		}
  	}
  },
  created:function(){
  },
  mounted:function(){ 
  },
  methods:{
  }
}
</script>

下面以全局自定义指令v-red，来修改HTML元素的背景色为红色为例:

<div id="box">
   hello<span v-red> welcome</span>
</div>
<script type="text/javascript">
 Vue.directive('red',{
 inserted:function(el){
 el.style.background = 'red';
 }
 });
 var vm = new Vue({
 data:{},
 }).$mount('#box'); 
### 自学几个月前端，为什么感觉什么都没学到？？

----------------------------------------------------------------------------------

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。



这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/15be8206a9f6e5bd9e8e930303b613ee.png)



还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。



所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。