除了核心功能默认内置的指令，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. nginx最简安装
			
    在 CentOS 6.2  下安装nginx 一:nginx所需依赖的安装 用yum安装依赖: yum -y install zlib zlib-devel openssl openssl-devel ...
    
			
    2. 
						
  2. mac设计师系列 Adobe “全家桶” 15款设计软件 值得收藏！
			
    文章素材来源:风云社区.简书 文章收录于:风云社区 www.scoee.com,提供1700多款mac软件下载 Adobe Creative Cloud 全线产品均可开放下载(简称Adobe CC 全 ...
    
			
    3. 
						
  3. python自动化开发-[第十三天]-前端Css续
			
    今日概要: 1.伪类选择器 2.选择器优先级 3.vertical-align属性 4.backgroud属性 5.边框border属性 6.display属性 7.padding,margine(见 ...
    
			
    4. 
						
  4. webpack打包进内联html
			
    用到一个新插件:html-webpack-inline-source-plugin(依赖于html-webpack-plugin) 1.安装 npm i -D html-webpack-inline- ...
    
			
    5. 
						
  5. Tensorflow做阅读理解与完形填空
			
    catalogue . 前言 . 使用的数据集 . 数据预处理 . 训练 . 测试模型运行结果: 进行实际完形填空 0. 前言 开始写这篇文章的时候是晚上12点,突然想到几点新的理解,赶紧记下来.我们 ...
    
			
    6. 
						
  6. mac 安装pip
			
    mac 安装pip报错 bogon:~ root# sudo easy_install pip Searching for pip Reading https://pypi.python.org/si ...
    
			
    7. 
						
  7. springmvc上传图片《2》
			
    创建springboot项目 编写配置 server: port: 8082 spring: application: name: upload-service servlet: multipart: ...
    
			
    8. 
						
  8. C# 主动发起请求代码
			
    本文用于写代码是给提示 private string GetHW(string uri) { string returnStr = ""; HttpWebRequest hwReq ...
    
			
    9. 
						
  9. [JDK8] Lambda
			
    本文转载原文http://www.cnblogs.com/jalja/p/7655170.html 一.使用线程 public static void main(String[] args) { // ...
    
			
    10. 
						
  10. golang channle close() x，ok := <-  c
			
    close为内置函数 close内置函数关闭一个通道channle,其效果为:在最后的值从已关闭的信道中被接收后,任何对其的接收操作都会无阻塞的成功.对于已关闭的信道使用v,ok := <-   ...
    
			
    11.