除了核心功能默认内置的指令，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. （贪心 优先队列）P1090合并果子 洛谷
			
    题目描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和.可 ...
    
			
    2. 
						
  2. 图论分支-Tarjan初步-点双连通分量
			
    上一次我们讲到了边双,这次我们来看点双. 说实话来说,点双比边双稍微复杂一些: 学完边双,我们先看一道题 第一问都不用说了吧,多余的道路,明显的割边. 是不是首先想到用边双,但是我们来看一个图: 有点 ...
    
			
    3. 
						
  3. 网络设备监控-Catic添加H3C的监控图解
			
      网络设备监控-Catic添加H3C的监控图解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 首先,我要声明满足2个条件才能作本篇笔记的操作:第一:你得有台cacti服务器,第二 ...
    
			
    4. 
						
  4. C#设计模式（5）——建造者模式
			
    1.建造者模式介绍 在软件开发中,有时我们要创建一个复杂的对象,这个对象由几个子部件按一定的步骤组合而成,这时候我们就可以使用建造者模式了.说到建造者我们首先想到的是盖房子,盖房子简单的说有三个步骤: ...
    
			
    5. 
						
  5. spring MVC页面的重定向
			
    如图,一个jsp页面跳转到下一个jsp页面通常需要上一个页面发出带有参数得请求,我们都知道spring MVC是不能直接跳页面的. 需要配置视图解析器,通过返回视图名再跳转到相应得JSP页面. 即使这 ...
    
			
    6. 
						
  6. [leetcode-128] 最长连续序列
			
    给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). 示例: 输入: [100, 4, 200, 1, 3, 2] 输出: 4 解释: 最长连续序列是 [1, 2,  ...
    
			
    7. 
						
  7. 从零开始搭建高性能高可用Tomcat服务器
			
    目标: Tomcat+Nginx+Memcached Ubuntu 16.04 64位测试通过 动静分类.负载均衡.集群.Javolution序列化.高性能.高可用 配置环境(目前均为最新稳定版):  ...
    
			
    8. 
						
  8. Kafka 简要使用说明
			
    Kafka 简要使用说明 参考文章 Kafka背景及架构介绍http://www.infoq.com/cn/articles/kafka-analysis-part-1 Apache kafka 工作 ...
    
			
    9. 
						
  9. 实惠VPS推荐
			
    1. Topmain 2. Virmach 3. BanwagonHost  [备用地址1] [备用地址2] 4. HiFormance  (跑路) 5. my.hosteons.com 6. . 以 ...
    
			
    10. 
						
  10. 解决yum安装mysql时Requires: libc.so.6(GLIBC_2.17)(64bit)
			
    1.yum install mysql-community-server 1 2 3 4 5 6 7 Error: Package: mysql-community-libs-5.7.17-1.el7 ...
    
			
    11.