指令-使用钩子函数的第二个binding参数拿到传递的值|学习笔记

简介: 快速学习指令-使用钩子函数的第二个binding参数拿到传递的值

开发者学堂课程【Vue.js 入门与实战指令-使用钩子函数的第二个binding参数拿到传递的值】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8152


指令-使用钩子函数的第二个 binding 参数拿到传递的值


目录

一、自定义指令

二、自定义字体颜色

三、函数参数

 

一、自定义指令


如果想要搜索框颜色发生改变,这是需要找到以下自定义指令

<input type=”text”class=”form-control”v-model=”keywords”id=”search”v-focus v-color>//自定义一个设置字体颜色的指令:Vue.directive('color',{bind:function (el) {el.style.color =’red’}})

设置样式的时候,不需要考虑有没有插入到 DOM 中,只要把样式通过指令绑定给元素,元素一旦被浏览器解析,无论这个元素是否被插入到页面中去,这个元素肯定有了一个内联的样式,元素一定会显示到页面中,浏览器的渲染引擎必然会解析样式,应用给元素。

演示效果:

image.png

bind:function(el){el.focus()}inserted: function(el){el.focus()}

在 inserted 中,元素从内存渲染到页面上时立即调用 focus 这时在页面中才能获得焦点。在 bind 中元素一加载到内存中,一绑定 focus 指令,就会立即调用bind,这是在内存中调用 bind。

js 有关的操作最好在 inserted 执行,防止 js 行为不生效。和样式相关的操作一般都可以在 bind 中执行

 

二、自定义字体颜色

上面的是把字体设置成了红色,如果想要自定义颜色,则需要:

 <input type=”text”class=”form-control”v-model=”keywords”id=”search”v-focus v-color=”’blue’”>//blue 加单引号表示字符串,不加单引号表示为变量bind:function (el,binding) {//自定义指令时,通过 binding 拿到值。el.style.color =’red’}


三、函数参数

钩子函数被赋予了以下参数:

el:指令所绑定的元素,可以用来直接操作 DOM。

binding:一个对象,包含以下属性:

1.name指令名,不包括 v-前缀。

Vue.directive(‘color’,{Bind:fuction(e1,binding){e1.style.color='red'Console.log(binding.name)

image.png

此时显示的 color 就是我们制定的名称

2.value:指令的绑定值,例如:v-my-directive-"1+1”,value 的值是2。如果获取原始的值,可使用 expression 方法。

3.expression:绑定值的字符串形式,例如v-my-directive="1+1”,expression 的值是"1+1”

4.arg:传给指令的参数,例如v-my-directive:foo,arg 的值是:foo

举例:

要获取

Console.log(binding.value)Console.log(binding.expression)

image.png

可以看到,上面是 bule,下面是字符串,所以我们需要用 value

<input type=”text”class=”form-control”v-model=”keywords”id=”search”v-focus v-color=”’blue’”>中的blue值,代码演示:Bind:function(el binding){ el.style.color= binding. Value}})

其中把 blue 换成 yellow,或者 green 尝试,发现可以变换成黄色和绿色,即以上代码正确无误。

相关文章
|
机器学习/深度学习 监控 算法
图像去雾综述
图像去雾综述
|
机器学习/深度学习 算法 Python
动态规划法和策略迭代在扫地机器人中确定状态值和动作值函数的策略评估(python实现 附源码 超详细)
动态规划法和策略迭代在扫地机器人中确定状态值和动作值函数的策略评估(python实现 附源码 超详细)
246 1
|
8月前
|
前端开发
在Promise链中是否可以多次使用catch方法?
在Promise链中是否可以多次使用catch方法?
217 58
|
7月前
|
SQL 关系型数据库 MySQL
|
SQL XML 关系型数据库
入门指南:利用NHibernate简化.NET应用程序的数据访问
【10月更文挑战第13天】NHibernate是一个面向.NET的开源对象关系映射(ORM)工具,它提供了从数据库表到应用程序中的对象之间的映射。通过使用NHibernate,开发者可以专注于业务逻辑和领域模型的设计,而无需直接编写复杂的SQL语句来处理数据持久化问题。NHibernate支持多种数据库,并且具有高度的灵活性和可扩展性。
266 2
|
人工智能 搜索推荐 安全
脑机接口技术:提升人机交互的前沿探索
【9月更文挑战第29天】脑机接口(BCI)技术借助人工智能与神经科学的进步,实现了人脑与外部设备的直接连接,开辟了人机交互新纪元。该技术通过捕捉并转化神经信号,使用户能直接控制设备或接收反馈,已在医疗、教育、娱乐等领域展现巨大潜力。例如,在医疗上,它帮助患者恢复运动和语言功能;在教育中,实现个性化学习;在娱乐领域,则提供沉浸式体验。尽管面临技术、伦理及隐私挑战,但其发展前景广阔,有望革新生活方式和社会结构。
|
11月前
|
弹性计算 应用服务中间件 异构计算
阿里云服务器多少钱一小时?在哪查询1小时价格表?
阿里云服务器按量付费模式下,2核2G配置的ECS经济型e实例每小时费用为0.094元。不同配置的实例价格各异,如2核4G配置的ECS经济型e实例每小时0.225元,4核8G配置的ECS通用算力型u1实例每小时0.702元。用户可通过阿里云官网查询具体价格。包年包月模式下,2核2G3M服务器99元/年,更加经济实惠。
641 0
|
数据可视化 前端开发 JavaScript
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
|
Java Spring
Spring初始化加速的思路和方案问题之DAG分析在Spring并行初始化中面临哪些困难
Spring初始化加速的思路和方案问题之DAG分析在Spring并行初始化中面临哪些困难
185 2
|
缓存 编译器 程序员
嵌入式开发环境Vscode开发STM32单片机程序
嵌入式开发环境Vscode开发STM32单片机程序
494 1