Vue2基础 14:自定义指令

自定义指令

  • 1 函数式
    • 1.1 案例--v-text放大10倍
  • 2 对象式
    • 2.1 案例--v-fbind默认获取焦点(函数式)
    • 2.2 案例--v-fbind默认获取焦点(对象式)
  • 3 自定义指令容易犯的错
  • 4 全局指令写法(参考过滤器写法):

1 函数式

1.1 案例–v-text放大10倍

<body><div id="root"><h2>当前的n值是:<span v-text="n"></span></h2><h2>放大10倍的n值是:<span v-big="n"></span></h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,},// --------定义一个全新的配置项----------directives:{//big:function(){} 简写如下big(element,binding ){element.innerText = binding.value * 10}//big函数被调用的情况://1.指令与元素成功绑定时(初次)//2.指令所在的模板(div id ="root")重新解析时}})
</script>

innerText: 返回或设置元素中的纯文本内容,只适用于IE/Chrome

  • big函数收到的是两个参数:第一个是真实DOM
  1. 判断方法一
    big(a,b){ console.dir(a) }
    控制台输出了真实DOM身上所有的属性和方法
    在控制台的输出

补充:

  1. console.dir()console.log()的区别
  2. MDN上console:dir() 静态方法的介绍
  1. 判断方法二
    big(a,b){ console.log(a instanceof HTMLElement) }
    检测a是不是HTMLElement的实例,输出为true

MDN上instanceof的定义instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
即:
在左边的检测对象的原型链上面查找右边的构造函数的prototype属性是否出现,这个过程会沿着原型链一直找,直到找到原型链的最顶端Object.prototype还没找到,那就只能返回null了,说明该对象不是这个构造函数的实例.

  • big函数收到的是两个参数:第二个是个对象,且含有指令后面代数式的值、指令的名字、使用时指令的名字
    console.log(b)

2 对象式

2.1 案例–v-fbind默认获取焦点(函数式)

先通过案例来看一下,函数式写法会有什么问题。

<body><div id="root"><h2>当前的n值是:<span v-text="n"></span></h2><input type="text" v-fbind:value="n"><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,},//--------定义一个全新的配置项-----------directives:{fbind(element,binding ){element.value = binding.valueelement.focus()}}})
</script>

存在问题:
运行后没有获取焦点,点击按钮才有焦点。
原因:

  1. 按照顺序 指令与元素绑定页面编译 之前。
  2. 那么函数的第一次调用是指令与元素成功绑定时,是在页面上呈现input之前。
  3. 但是模板是经过vue编译才放在页面上的,绑定在编译之前,而在input出现在页面之前是无法获取焦点的。

点击按钮,n值修改,模板重新解析,重新调用指令fbind,现在input元素已在页面上,所以获取焦点。

此时fbind指令是函数形式,调用只存在以下两个时机:

  1. 指令与元素成功绑定时(初次)
  2. 指令所在的模板重新解析时

区分: span.innerText | input.value

2.2 案例–v-fbind默认获取焦点(对象式)

<body><div id="root"><h2>当前的n值是:<span v-text="n"></span></h2><input type="text" v-fbind:value="n"><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,},//--------------定义一个全新的配置项-------------directives:{fbind:{//以下函数都是固定的且常用的://指令与元素成功绑定时调用bind(element,binding){//此时可以写:样式、value值、绑定事件input.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板重新解析时update(element,binding){input.value = binding.valueelement.focus()}}}})
</script>

bind和update函数的逻辑往往是一致的,所以也就有了函数式指令,因此如果没有其他特殊要求(获取焦点、拿到父元素),可以用函数式。

3 自定义指令容易犯的错

  1. 指令命名多个词用-连接(kebab-case),而不是写成驼峰命名法(camelCase),且directives配置项需要加‘’,定义时不加v-,但是使用时需要加。
    例如定义一个input元素的指令
    <input type="text" v-bigNumber:value="n">
    应写成
    <input type="text" v-big-number:value="n">
    对应Vue实例中配置项的函数式:
    'big-number'(){}
    实际上big-number为directives对象里的key,当出现-时不可简写
  2. 指令相关的回调函数的this不是vm而是Window
    console.log('fbind',this)
    输出为window
  3. 自定义指令为局部指令,只给有定义的vue实例使用
    即使用的模板的<div>中的id 和Vue实例中的el相对应
<script type="text/javascript">//对象式new Vue({directives:{指令名:{配置对象}}})//函数式new Vue({directives:{指令名(参数1,...){回调函数}}})
</script>

4 全局指令写法(参考过滤器写法):

  • 对象式:
<script type="text/javascript">
Vue.directive('fbind',{bind(element,binding){input.value = binding.value},inserted(element,binding){element.focus()},update(element,binding){input.value = binding.valueelement.focus()}
})
</script>
  • 函数式
<script type="text/javascript">
Vue.directive('fbind',function(element,binding){element.value = binding.valueelement.focus()
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

零基础开始学习鸿蒙开发-读书app简单的设计与开发(我的消息)

目录 1.新建一个MyMessage页面 2.确定布局方式,显然我们用线性布局会比较好 3.具体布局就不详细图标大小调整就不做详细介绍了 4.给我的消息添加路由跳转。 5.如图效果 1.新建一个MyMessage页面 // Index.ets @Entry @Component export struct find {@State message: str…

Go 依赖注入设计模式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

《昇思25天学习打卡营第6天 | mindspore 函数式自动微分常见用法》

1. 背景&#xff1a; 使用 mindspore 学习神经网络&#xff0c;打卡第6天&#xff1b; 2. 训练的内容&#xff1a; 使用 mindspore 的函数式自动微分常见用法&#xff1b; 3. 常见的用法小节&#xff1a; 函数式自动微分支持一系列常用的函数 3.1 损失函数&#xff1a; …

系统重装

待更新 重置win11 双系统删除其中一个&#xff0c;并将格式化后的空间并入

HTTP请求详解及其在嵌入式系统中的应用

前言 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是互联网中最广泛使用的应用层协议&#xff0c;用于客户端和服务器之间的数据传输。了解HTTP请求的工作原理对于开发网络应用和嵌入式系统中的网络通信至关重要。本文将详细介绍HTTP请…

跟着峰哥学java 第四天 商品分类 前后端显示

1.后端 1.1mybatis-plus分页查询配置 在商品热卖数据中&#xff0c;只让其显示八条数据 将要使用分页 也就是service.page方法 此时需要配置 mp拦截器 Configuration public class MybatisPlusConfig {Beanpublic PaginationInterceptor paginationInterceptor() {return …

模型训练之数据集

我们知道人工智能的四大要素&#xff1a;数据、算法、算力、场景。我们训练模型离不开数据 目标 一、数据集划分 定义 数据集&#xff1a;训练集是一组训练数据。 样本&#xff1a;一组数据中一个数据 特征&#xff1a;反映样本在某方面的表现、属性或性质事项 训练集&#…

星辰宇宙动态页面vue版,超好看的前端页面。附源码与应用教程(若依)

本代码的html版本&#xff0c;来源自“山羊の前端小窝”作者&#xff0c;我对此进行了vue版本转换以及相关应用。特此与大家一起分享~ 1、直接上效果图&#xff1a; 带文字版&#xff1a;文字呼吸式缩放。 纯净版&#xff1a; 默认展示效果&#xff1a; 缩放与旋转后&#xf…

mysql5.6的安装步骤

1.下载mysql 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 在这里我们下载zip的包 2.解压mysql包到指定目录 3. 添加my.ini文件 # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-configurat…

tongweb+ths6011测试websocket(by lqw)

本次使用的tongweb版本7049m4&#xff0c;测试包ws_example.war&#xff08;在tongweb安装目录的samples/websocket下&#xff09;&#xff0c;ths版本6011 首先在tongweb控制台部署一下ws_example.war,部署后测试是否能访问&#xff1a; 然後ths上的httpserver.conf的參考配…

腾讯centos mysql安装

腾讯centos mysql安装 腾讯云提供了一系列的云计算服务&#xff0c;包括操作系统、数据库、服务器等。在腾讯云上安装CentOS操作系统和MySQL数据库可以按照以下步骤进行&#xff1a; 登录腾讯云控制台&#xff08;登录 - 腾讯云&#xff09;。在控制台页面上方的搜索框中输入…

vue数组变化的侦测***

数组变化的侦测 变更方法 vue能够侦听响应式数组的变更方法&#xff0c;并在他们被调用时触发相关更新。这些变更方法包括&#xff1a; push()pop()shift()unshift()splice()sort()reverse() 替换一个数组 变更方法&#xff0c;顾名思义&#xff0c;就是会对调用他们的原数组进…

Vue 路由传参 query方法 bug 记录

问题描述 vue 路由传参 踩坑 this.$router.push({path: "xxxxxxx",query: {opportunity_id:row.opportunity_id,constructor:row.constructor,},});解决方案&#xff1a; 上述方法传入新页面时&#xff0c;访问的 this.$route.query 会有bug 每一次刷新都会在最后一…

DNS服务器

DNS服务器 一、DNS简介&#xff1a; DNS&#xff08;Domain Name System&#xff09;是一种用于将域名解析为IP地址的系统。 在DNS中&#xff0c;正向解析将域名转换为IP地址&#xff0c;而反向解析将IP地址转换为域名。正向解析是DNS系统最常用的解析方式&#xff0c;它允许…

本地部署到服务器上的资源路径问题

本地部署到服务器上的资源路径问题 服务器端的源代码的静态资源目录层级 当使用Thymeleaf时&#xff0c;在templates的目录下为返回的html页面&#xff0c;下面以两个例子解释当将代码部署到tomcat时访问资源的路径配置问题 例子一 index.html&#xff08;在templates的根目录…

VBA初学:零件成本统计之三(获取材料外协的金额)

第三步&#xff0c;从K3的数据库中获取金额 我这里是使用循环&#xff0c;通过任务单号将金额汇总出来&#xff0c;如果使用数组的话&#xff0c;还要按任务单写GROUP&#xff0c;还要去对应&#xff0c;不如循环直接一点 获取材料和外协金额的表格Sub getje()Dim rowcount A…

leetcode-每日一题

3101. 交替子数组计数https://leetcode.cn/problems/count-alternating-subarrays/ 给你一个 二进制数组 nums 。 如果一个 子数组 中 不存在 两个 相邻 元素的值 相同 的情况&#xff0c;我们称这样的子数组为 交替子数组 。 返回数组 nums 中交替子数组的数量。 示例 …

算法力扣刷题 三十四【71.简化路径】

前言 栈和队列篇。 记录 三十四【71.简化路径】 一、题目阅读 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 ‘/’ 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c…

3-2 梯度与反向传播

3-2 梯度与反向传播 主目录点这里 梯度的含义 可以看到红色区域的变化率较大&#xff0c;梯度较大&#xff1b;绿色区域的变化率较小&#xff0c;梯度较小。 在二维情况下&#xff0c;梯度向量的方向指向函数增长最快的方向&#xff0c;而其大小表示增长的速率。 梯度的计算 …

使用Python实现深度学习模型:模型解释与可解释人工智能

在深度学习领域,模型解释和可解释性人工智能(XAI)正变得越来越重要。理解深度学习模型的决策过程对于提高模型的透明度和可信度至关重要。本文将详细介绍如何使用Python实现模型解释和可解释性人工智能,包括基本概念、常用方法、代码实现和示例应用。 目录 模型解释与可解…