vue自定义指令(详解)
vue自定义指令,核心就是需要自己亲手去操作DOM
而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性,
所以自定义指令,就是自己亲手对原生操作dom进行了一次封装
局部指令
需求一:定义一个v-big指令,让它和v-text功能类似,把绑定的值放大10倍
我们现在自定义一个big指令,展示放大10倍的num值,让v-big指令和v-text指令作用一样
<template><div class="myDiv"><h2>当前的n值是<span v-text='num'></span></h2><h2>放大10倍的值是<span v-big='num'></span></h2><button @click="num++">点我加1</button></div>
</template><script>
export default {name: '',components:{},props:{},data(){return {num:10}},methods:{},
}
</script>
<style lang="less" scoped></style>
运行之后打开控制台,发现报错了,报错的指令是big,diective就是指令的意思
下面我们就来定义这个big指令:
定义指令呢,有一个属性diectives,所有自定义指令都在里面定义
big指令定义有2种方式:
(1)函数式
(2)对象式
【函数式定义指令 】
先讲解函数式,通过函数式,将num的值放大10倍
有人说big函数只要有个返回值就行了吧?
注意:这个指令函数不是返回值,他是接收2个参数,我们先输出这2个参数
由此看出,a是一个dom元素。
有人说,那a是真实dom还是虚拟dom呢?
答:是真实dom。
验证:我们通过 instanceof 来判断 a 是否是html上的实例
结果是true
有人问b是啥?
答:b里面有个value,value就是v-big后面的双引号的内容,这里面是个n,因此他的value就是num的值10,还有一个expression是表达式
那如果v-big是个函数,那么value就是一个函数
那么我们现在既可以拿到真实的dom元素,又可以通过.value拿到绑定的值,那么我们就可以写放大10倍的指令了。 将参数名换成官方定义的即可。
可以看到页面出来了
那问题来了。如果我们点击按钮让n的值加1,那么红框和蓝框的值都变吗,还是只有红框值变?
答:都变
篮框的变化取决于,big函数还会不会被调用了,从验证结果来看,是会调用的
那么big指令函数何时会被调用呢?
(1)指令与元素成功绑定时(一上来)
(2)指令所在的模板被重新解析时(并不是指令所用到的数据发生更新就被调用)
需求二:定义一个v-sbind指令,和v-bind功能类似,可以让其绑定的input元素默认获取焦点
首先我们给页面添加一个input框,里面设置绑定value值为num,v-bind简介形式为冒号:
效果:
我们想要用v-sbind实现相同的效果,首先先定义v-sbind指令
注意:
focus():得到焦点时使用,blur():失去焦点时使用
按理来说这就写完了,可是效果并没有实现。看下图并没有获取焦点
这是什么原因呢?
其实是focus执行时机的问题,上面说了指令与元素成功绑定时就会调用指令函数,成功绑定只是在内存中建立了这种绑定关系,并没有放入页面,而一上来input框就已经调用了指令函数,因此对input进行焦点的获取是不起作用的。
所以对于这种情况,我们必须精确到元素放入页面的时间点,而指令的函数式写法是不符合该需求的,这样就用到了指令的对象式写法。
【对象式写法】
里面包含三种固定的函数,分别代表不同时期的触发
sbind:{// 指令与元素成功绑定时(一上来)bind(){},// 指令所在元素被插入页面时inserted(){},// 指令所在的模板被重新解析时update(){}}
看下触发顺序
这三个事件同样有element和binding两个参数
因此完整写法就是:
sbind: {// 指令与元素成功绑定时(一上来)bind(element, bidding) {// 虽然没放入页面但是不影响赋值element.value = bidding.value},// 指令所在元素被插入页面时inserted(element, bidding) {// 此时我们就可以在元素插入页面时再调用获取焦点事件element.focus()},// 指令所在的模板被重新解析时update(element, bidding) {// 页面重新解析时,同样需要再次赋值,这样可以保证num的值随之变化element.value = bidding.value}}
从上面代码可以看出,bind事件和update其实是一样的,而指令的函数式就是包含的这两个方法,只不过没有inserted方法,因此遇到特殊情况就用对象式,其他情况函数式就可以满足需求~
全局指令+总结
(1)命名方式
多个单词命名用 - 分隔,例如:v-big-number
定义指令的时候用单引号包裹:'v-big-number'(){ }
(2)指令回调函数中的this指向
所有指令相关的this,不是vm是window
(3)以上我们所讲解的指令都是局部指令,只能在本vue实例中使用
假如我们相把v-sbind变为全局指令:
直接在main.js中,通过vue调用directive,将sbind对象复制进来就是全局的了,所有页面都可以使用。
Vue.directive('sbind', {// 指令与元素成功绑定时(一上来)bind(element, bidding) {// 虽然没放入页面但是不影响赋值element.value = bidding.value},// 指令所在元素被插入页面时inserted(element, bidding) {// 此时我们就可以在元素插入页面时再调用获取焦点事件element.focus()},// 指令所在的模板被重新解析时update(element, bidding) {// 页面重新解析时,同样需要再次赋值,这样可以保证num的值随之变化element.value = bidding.value}
})
vue自定义指令(详解)相关推荐
- Vue自定义指令详解
一.为什么需要自定义指令? 因为vue是MVVM模式,只需要关注于数据和业务逻辑,不需要关注DOM的操作,但是有时候面对一些特殊的业务需求时,需要进行DOM的操作,这个时候就需要进行自定义指令. 二. ...
- Vue中过滤器和自定义指令详解
目录 1,局部过滤器 1.1定义: 1.2案例 2,全局过滤器 2.1定义: 2.2案例 3.自定义指令 3.1定义: 3.2案例 3.3自定义指令全局写法 1,局部过滤器 1.1定义: Vue.js ...
- Vue高级语法(一) | 自定义指令详解
文章目录 Vue中自定义指令
- AngularJS自定义指令详解(有分页插件代码)
前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
- angular的自定义指令---详解
1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
- angularJS自定义指令详解
AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <hello></hello>或者<hello/> 2.作为一个元 ...
- Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)
参考Vue官方文档 一.需求如下: 二.代码如下 三.分步解析: 父组件给子组件传值: 子组件给父组件传值: 四.sync修饰符的使用 vue.js官方文档 如果已经使用了v-model双向绑定了一个 ...
- angular 定义对象_angular 自定义指令详解
一:指令的创建 创建module: var module1 = angular.module('module1',[]); angular.bootstrap(document.body,['modu ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- java中Freemarker list指令详解
java Freemarker中list指令主要是进行迭代服务器端传递过来的List集合. 定义 <#list nameList as names> ${names} </#list ...
最新文章
- logback配置文件
- 阚凯力:四核终端发展需软硬件相互促进
- lazyload.js详解
- 【Python爬虫】使用urllib.request下载已知链接的网络资源
- SpringCloud的GateWay网关中怎么debug得到真实的路由地址
- 基于android记事本论文,基于android平台的记事本研究与开发 开题报告
- 【SpringCloud】服务调用OpenFeign
- ubuntu中mysql怎么退出命令_Ubuntu中mysql启动和关闭
- css样式的百分比都相对于谁?
- 常用简单的sql语句
- oracle和sql server中,取前10条数据语法的区别
- Apache Flink 1.7.2 发布,流处理框架
- Windows免费录屏软件——captura
- 网上打印个人完税证明流程
- pymol怎么做底物口袋表面_高质量PyMOL作图教程
- python股票技术指标计算,python股票量化交易(3)---趋势类指标MACD
- Keil 中“last line of file ends without a newline”的解决
- Java学习——JDBC之从导Jar包到封装
- 渐变折射率(GRIN)介质的构建与建模
- Spark 内存管理堆内和堆外内存规划_大数据培训