除了核心功能默认内置的指令，Vue也允许注册自定义指令

页面加载后，让文本框自动获取焦点，原生js做法是获取文本框元素后调用focus()方法，但Vue不建议手动操作DOM元素，所以此时要自定义指令

这里需要注意的是v-on指令绑定focus事件的方式是实现不了上面需求的，区别就像onfocus和focus()，前者是事件绑定，当元素获得焦点时去执行事件处理函数，而后者是方法，调用后会让元素获得焦点，onclick和click()同理

自定义全局指令

Vue.directive( ' 自定义指令名 ' , { } )

参数一是指令的名字，注意定义的时候指令前不需要加 v- 前缀，但调用的时候必须加上这个前缀

参数二是一个对象，在这对象身上有一些指令相关的函数，这些函数可以在特定阶段执行相关的操作，叫钩子函数　

<body>

<div id="app">

    <input type="text" id="text" v-focus><!--自定义全局指令后可在标签内直接使用这个指令-->

</div>

<script>

    //注册一个全局自定义指令

    Vue.directive('focus', {

        //每当指令绑定到元素上时，会立即执行这个bind函数，只执行一次

        bind: function () {

        },

        //inserted表示元素插入到DOM中时，会执行inserted函数，只触发一次，el表示被绑定的那个原生js对象

        inserted: function (el) {

            el.focus()

        },

        //当VNode更新时会执行updated，可能触发多次

        updated:function(){

        }

    })

    var vm = new Vue({

        el: '#app',

        data: { }

    })

</script>

</body>

钩子函数我觉得跟原生事件注册方式相似 dom.onclick = function(){ } ，就是有些状态会被Vue捕捉并贴上名字（如bind这个名字代表指令绑定到了元素上），名字是为了让我们可以将自定义处理函数“钩”在上面，这样，我们就可以决定哪种状态做哪种事

在这个案例中，el.focus()不可放在bind函数里，因为指令虽然绑定到了元素上，但元素还没有插入到DOM中也就是元素还在内存中没有被渲染到页面上，这时在内存调用focus方法没有作用，而inserted则表示元素已经加载到网页上了，此时使用focus才是有效的

自定义全局指令，指定文本框文字颜色

 Vue.directive('color', {

     bind: function (el) {  //钩子函数的第一个参数都是被绑定的DOM元素

         el.style.color = 'red'

    }

})

因为是样式，所以不需要元素插入到DOM中，就好像link引入CSS文件时并不关心元素是否加载

和js行为有关的操作，最好在inserted中执行，和样式相关的操作都可在bind中执行

钩子函数第一个参数是被绑定的原生DOM元素，第二个元素是一个binding对象，该对象有三个重要的属性name、value和expression

<div id="app">

    <!--#ff4200如果不用单引号引上的话会被当作data里的变量，数字则无影响-->

    <input type="text" id="text" v-color="'#ff4200'">

</div>


Vue.directive('color', {

    bind: function (el,binding) {  //形参名字可随意，但一般是这么写

        console.log(binding.name)   //color

        console.log(binding.value)  //#ff4200

    }

})




自定义私有指令


自定义私有指令跟自定义过滤器的套路是一样的，在构造函数里定义




var vm = new Vue({

    el: '#app',

    directives: {

        'color': { //指令名要加上引号

            bind: function (el, binding) {

                el.style.color = binding.value

            }

        }

    }

})    




函数简写




也就是如果只用到bind或update，就可省略指令定义对象的书写
												


											
Vue -自定义指令&钩子函数的更多相关文章
	

    
								
  1. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
		
    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
    
		
    2. 
						
  2. vue自定义指令VNode详解(转)
		
    1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...
    
		
    3. 
						
  3. vue自定义指令实例使用（实例说明自定义指令的作用）
		
    在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...
    
		
    4. 
						
  4. vue 自定义指令的使用案例
		
    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
    
		
    5. 
						
  5. 每个人都能实现的vue自定义指令
		
    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
    
		
    6. 
						
  6. Vue自定义指令使用场景
		
    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
    
		
    7. 
						
  7. Vue自定义指令使用方法详解 和 使用场景
		
    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
    
		
    8. 
						
  8. 使用Vue自定义指令实现Select组件
		
    完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
    
		
    9. 
						
  9. vue 自定义指令的魅力
		
    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JDBC工具类
			
    package com.shundong.uitl; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...
    
			
    2. 
						
  2. Cubase独占声卡问题
			
    打开Cubase之后,这个软件会独占声卡,其他软件都没有声音了.只需要设置一下即可.设备>设备设置,在VST音频处勾选释放后台驱动即可,如图
    
			
    3. 
						
  3. C++回顾day01---<const常量重点>
			
    一:定义常整型数 const int a;(或者int const a;)  不涉及指针 不可改变值(也不可通过指针修改) 二:定义一个指向常整型数的指针 const int* c;   可改指针指向 ...
    
			
    4. 
						
  4. 5句话搞定ES5作用域
			
    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
    
			
    5. 
						
  5. SpringCloud微服务之跨服务调用后端接口
			
    SpringCloud微服务系列博客: SpringCloud微服务之快速搭建EurekaServer:https://blog.csdn.net/egg1996911/article/details ...
    
			
    6. 
						
  6. HDU 1025(最长上升子序列)
			
    题意是要在两条平行线间连点,要在线不交叉的前提下尽可能多的连线,问最多能连多少条线. 现假定题中所给的是 9 组点,分别是:1—3,2—8,3—5,4—9,5—2,6—4,7—6,8—7,9—1,如图 ...
    
			
    7. 
						
  7. python+selenium 模拟登陆，自动下单
			
    目前写的实在太粗糙,留着,以后来写上
    
			
    8. 
						
  8. 'DataVisualization' does not exist in the namespace 'System.Web.UI'一例解决办法
			
    之前项目是vs2010 aspx项目,用vs2017打开后,非运行状态下有一行错误:CS0234 C# The type or namespace name 'DataVisualization' d ...
    
			
    9. 
						
  9. SpringBoot入门笔记(一)、HelloWorld
			
    本文是一篇SprintBoot学习入门笔记 1.打开Eclipse,版本为Oxygen 4.7.0 2.新建项目NewProject->MavenProject->Next->Nex ...
    
			
    10. 
						
  10. Docker（五）如何构建Dockerfile
			
    摘自 https://mp.weixin.qq.com/s/_hq9dPe6390htN8BTkoQeQ 一.Dockerfile的指令集 由于Dockerfile中所有的命令都是以下格式:INSTR ...
    
			
    11.