Vue中directive的使用

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

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
二、钩子函数参数
指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
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 来进行。

使用：

// Vue组件中使用
<div><button v-myTest='"123"'>按钮1</button>
</div>
<script>
export default {directives: {myTest: {bind (el, binding) {// 为123就不显示，不是就显示if (binding.value === '123') el.style.display = 'none'}}}
}
</script>

Vue中directive的使用相关推荐

vue中directive
一.自定义指令 vue 作者允许开发者自己创建一些指令,指令的类型分为全局自定义指令和局部自定义指令指令的生命周期钩子函数: 1.bind(el,binding){} 指令第一次绑定到元素的时候触发 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
vue中点击事件的写法_vue中的事件：原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue 中常见的面试题/知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚 ...
vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...

Vue中directive的使用

Vue中directive的使用相关推荐

最新文章

热门文章