Vue -自定义指令&钩子函数
除了核心功能默认内置的指令，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 -自定义指令&钩子函数的更多相关文章
- Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- vue自定义指令VNode详解(转)
1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...
- vue自定义指令实例使用（实例说明自定义指令的作用）
在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- vue 自定义指令的魅力
[第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
随机推荐
- Map的嵌套
package cn.lijun.demo2; import java.util.HashMap; import java.util.Iterator; import java.util.Set; p ...
- C# 实现身份验证之WCF篇（1）
WCF身份验证一般常见的方式有:自定义用户名及密码验证.X509证书验证.ASP.NET成员资格(membership)验证.SOAP Header验证.Windows集成验证.WCF身份验证服务(A ...
- MapReduce框架原理-MapTask工作机制
MapReduce框架原理-MapTask工作机制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. maptask的并行度决定map阶段的任务处理并发度,进而影响到整个job的处理速 ...
- Unity 如何检测鼠标双击事件
代码如下: void OnGUI(){ Event e=Event.current; )) Debug.Log("用户双击了鼠标"); }
- 01--STL算法（算法基础）
一:算法概述 算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中 ...
- mysql安装绑定my.ini
Windows操作系统中,我们安装Mysql有两个选择: 一是下载MSI点击运行,利用windows系统安装程序的方法按部就班的来安装: 二是下载ZIP,解压出来就能立即使用. 在使用ZIP安装时,安 ...
- 细说java系列之泛型
什么是范型 简言之,范型是Java支持在编译期进行类型检查的机制. 这里面包含2层含义:其一,可以使用范型进行类型检查:其二,在编译期进行类型检查. 那么,什么叫做在编译期进行类型检查?可以在运行时进 ...
- JS中var、let、const区别？ 用3句话概括
使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象: 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升: 使用const声明的是常量,在后面出现的代码中不能再修 ...
- 四.HashSet原理及实现学习总结
在上一篇博文(HashMap原理及实现学习总结)详细总结了HashMap的实现过程,对于HashSet而言,它是基于HashMap来实现的,底层采用HashMap来保存元素.所以如果对HashMap比 ...
- SQL Server进阶（三）单表查询
示例数据库 点我下载 一条完整的sql语句 select top | distinct 字段, 表达式, 函数, ... from 表表达式 where 筛选条件 group by 分组条件 havi ...