第十三单元(指令的作用,指令的钩子函数)

#课程目标

1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数

#知识点

#一、认识自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。

举例说明:当页面加载时,input就将获得焦点 。

1、全局定义指令:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
 

2、局部定义指令:

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
 

3、自定义指令的使用:

<input v-focus>
1

#二、钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  1. bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  2. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  3. update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
  4. componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  5. unbind:只调用一次,指令与元素解绑时调用。

#三、钩子函数的参数

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

注:除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

举例:

<template>
<div>
<h1 v-color:bg="'red'">自定义指令-参数演示</h1>
<h1 v-color:font="'red'">自定义指令-参数演示</h1>
</div>
</template> <script>
export default {
directives: {
color: {
//设置文字颜色指令
inserted: (el, binding) => {
console.log(el, binding);
if(binding.arg==='bg'){
el.style.backgroundColor=binding.value
}else{
el.style.color=binding.value
}
}
}
}
};
</script>
 

效果展示:

参数对比:

#授课思路

#案例作业

1、自定义指令实现登录框的校验

代码参考:

<template>
<div>
<p>
<input type="text" placeholder="6-8位数字字母" v-input="/^[0-9a-zA-Z]{6,8}$/" />
<span v-if="show&&flag" style="color:green">成功</span>
<span v-if="show&&!flag" style="color:red">失败</span>
</p>
</div>
</template> <script>
export default {
data() {
return {
flag: false,
show: false
};
},
directives: {
input: {
bind: (el, binding, vnode) => {
let _this = vnode.context; //获取当前vm实例
el.addEventListener("blur", () => {
_this.show = true;
if (binding.value.test(el.value)) {
el.style.border = "1px solid green";
_this.flag = true;
} else {
el.style.border = "1px solid red";
_this.flag = false;
}
});
}
}
}
};
</script>
 

2、通过指令实现画布的绘制

vue第十三单元(指令的作用,指令的钩子函数)的更多相关文章

  1. Vue (表单、斗篷、条件、循环指令,分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数)

    表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  2. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  3. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  4. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  5. 【js】vue 2.5.1 源码学习 (四) 钩子函数 资源选项 watch 的合并策略

    大体思路 (三)    1.钩子函数 自定义策略       LIFECYCLE_HOOKS= []      created = [function(){} , function(){}] 组装方法 ...

  6. [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

    一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...

  7. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

  8. Vue(十三)自定义指令

    自定义指令 分类:全局指令.局部指令 1. 自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 2. 自定义局部指令   <!DOCTYPE html> < ...

  9. vue自定义指令实例使用(实例说明自定义指令的作用)

    在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...

随机推荐

  1. [head first 设计模式]第二章 观察者模式

    [head first 设计模式]第二章 观察者模式 假如我们有一个开发需求--建造一个气象观测站展示系统.需求方给我们提供了一个WeatherObject对象,能够自动获得最新的测量数据.而我们要建 ...

  2. java面试官最爱问的垃圾回收机制,这位阿里P7大佬分析的属实到位

    前言 JVM 内存模型一共包括三个部分: 堆 ( Java代码可及的 Java堆 和 JVM自身使用的方法区). 栈 ( 服务Java方法的虚拟机栈 和 服务Native方法的本地方法栈 ) 保证程序 ...

  3. 在IDM上设置防止过度抓取网站信息

    在使用Internet Download Manager(IDM)下载器时,有时会发现IDM自带的抓取功能过于强大,以至于有时会抓取一些无效的链接.那么,该如何避免IDM的过度抓取呢? 图1:IDM的 ...

  4. 网络系列之 jsonp 百度联想词

    jsonp 可以跨域,ajax 不可以,ajax 会受到浏览器的同源策略影响,何为同源策略? 同源策略就是,如果 A 网站 想拿 B网站里的资源, 那么 有三个条件, 你得满足才能拿. 第一个:域名相 ...

  5. DNS系列—dig命令的使用

    目录 如何安装dig dig常见用法 dig的基本语法 简单dig查询域名 指定DNS服务器查询 反查IP对应域名 如何安装dig dig是bind下面常见的工具,在linux系统上经常回用的一个dn ...

  6. linux常见目录

  7. P6631 [ZJOI2020] 序列

    可以将问题用形象的方式来表述.给定一排点,第 \(i\) 个点有它需要的覆盖次数 \(a_i\).有两种线段,一种能覆盖连续的一些点,称其为连续线段:另一种能覆盖相邻间隔为 \(1\) 的一些点,称其 ...

  8. JQuery案例:购物车编辑

    购物车编辑 实现了:商品的加减,总价的变动 实现了:全选/全不选(使用prop而不是attr) 实现了:删除(遮罩层) <html> <head> <meta chars ...

  9. java集合源码分析(三):ArrayList

    概述 在前文:java集合源码分析(二):List与AbstractList 和 java集合源码分析(一):Collection 与 AbstractCollection 中,我们大致了解了从 Co ...

  10. B. Irreducible Anagrams【CF 1290B】

    思路: 设tx为t类别字符的个数. ①对于长度小于2的t明显是"YES"②对于字符类别只有1个的t明显是"YES"③对于字符类别有2个的t,如左上图:如果str ...