除了核心功能默认内置的指令，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. 2018 icpc-ecfinal后记
			
    打完这场终于可以回校0基础预习一个学期的课程了.    安详.jpg 可惜了,差了点罚时没有拿银,不过有了徐州差一分钟银牌的经历之后,已经没有什么能让我遗憾了. 仿佛又打了一场半年前的西安邀请赛,区别 ...
    
			
    2. 
						
  2. centos之Too many open files问题-修改linux最大文件句柄数
			
    linux服务器大并发调优时,往往需要预先调优linux参数,其中修改linux最大文件句柄数是最常修改的参数之一. 在linux中执行ulimit -a 即可查询linux相关的参数,如下所示: [ ...
    
			
    3. 
						
  3. 【.NET】asp.net Redirect 图片路径
			
    #需求: 前端通过<img>的src向服务端请求图片信息,如果不存在想要的图片,那么就返回一张默认路径下的图片: #实现: <img class="related_reso ...
    
			
    4. 
						
  4. [JDK8] Lambda
			
    本文转载原文http://www.cnblogs.com/jalja/p/7655170.html 一.使用线程 public static void main(String[] args) { // ...
    
			
    5. 
						
  5. bash guide
			
    Table of Contents Basic Operations 1.1. File Operations 1.2. Text Operations 1.3. Directory Operatio ...
    
			
    6. 
						
  6. java枚举(enum)
			
    1. 创建枚举类型要使用 enum 关键字,隐含了所创建的类型都是 java.lang.Enum (抽象类) 类的子类. enum AccountType { SAVING, FIXED, CURRE ...
    
			
    7. 
						
  7. request 和 response 对象
			
    Request 对象 request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性 常见属性 /* req.app:当callback为外部文件时,用req.app ...
    
			
    8. 
						
  8. 利用C#访问注册表获取软件的安装路径
			
    文章地址:https://blog.csdn.net/yl2isoft/article/details/17332139
    
			
    9. 
						
  9. C JAVA你可能不知道的那些编程细节
			
    关于printf的格式化字符 %* *与其它占位符结合使用, *将首先被一个 int 变量值代替后再被格式化. 如 printf("%.*s.", 2, "Hello&q ...
    
			
    10. 
						
  10. Express 体验 路由、模板引擎、中间件
			
    http://expressjs.com/en/4x/api.html#req.method http://expressjs.com/en/guide/routing.html [Route pat ...
    
			
    11.