除了核心功能默认内置的指令，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-刷题冲刺】Contest 6
			
    Task 1:子集 [问题描述]  若一个集合S中任意两个元素x和y,都满足x⊕y<min⁡(x, y) ,则称集合S是"好的".其中⊕为按位异或运算符.现在给定一个大小为n ...
    
			
    2. 
						
  2. (数学) PTA 1005 继续(3n+1)猜想 （25 分)
			
    1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...
    
			
    3. 
						
  3. 爬虫之requests请求库高级应用
			
    1.SSL Cert Verification #证书验证(大部分网站都是https) import requests respone=requests.get('https://www.12306. ...
    
			
    4. 
						
  4. 测试一下多线程同时往list中添加元素会不会出问题
			
    # encoding: utf-8 import decimal import requests import logging import logging.config import random  ...
    
			
    5. 
						
  5. 16.Linux-LCD驱动(详解)
			
    在上一节LCD层次分析中,得出写个LCD驱动入口函数,需要以下4步: 1) 分配一个fb_info结构体: framebuffer_alloc(); 2) 设置fb_info 3) 设置硬件相关的操作 ...
    
			
    6. 
						
  6. MySQL8常见客户端和启动相关参数
			
    MySQL8常见客户端和启动相关参数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL常见的客户端 1>.使用MySQL服务自带的mysql连接工具 2>. ...
    
			
    7. 
						
  7. Hbase记录-zookeeper部署
			
    #官网下载二进制包解压到/usr/app下,配置/etc/profile: export ZOOKEEPER_HOME=/usr/app/zookeeper export PATH=$PATH:$ZO ...
    
			
    8. 
						
  8. 学习总结：CSS(一)定义方式、选择器、选择器权重
			
    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...
    
			
    9. 
						
  9. maven打包可执行jar文件运行报错
			
    起因 项目中同时依赖了Spring和MyBatis,并使用mybatis-spring集成MyBatis和Spring. 使用maven打包为可执行jar文件运行,打包插件为:maven-shade- ...
    
			
    10. 
						
  10. 【八】虚拟机工具 01 jps命令详解
			
    JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...
    
			
    11.