自定义指令

有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

<div id="directive-demo">
<input v-focus />
</div>
  • 全局注册

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

    new Vue({
    el:'#directive-demo',
    directives: {
    focus: {
    inserted: function (el) {
    el.focus()
    }
    }
    }
    })

指令钩子函数

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

<!-- //bind(el[,binding[,vnode[,oldVnode]]]) -->
<!--
// el: 指令所绑定的元素,可以用来直接操作 DOM(读写)。
// binding: {name, value, oldValue, expression, arg, modifiers}
/**
** name: 指令名,不包括 v- 前缀。
** value: 指令的绑定值, 绑定值为表达式时显示结果。如果指令需要多个值,可以传入一个 JavaScript 对象字面 ****量。记住,指令函数能够接受所有合法的 JavaScript 表达式。
** oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。
** expression: 字符串形式的指令表达式,绑定值为表达式时显示表达式。
** arg: 传给指令的参数。形式:v-my-directive:foo。
** modifiers: 一个包含修饰符的对象。
**** 例如: v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
**/
// vnode: Vue 编译生成的虚拟节点。
//oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。--> <div id="hook-args-demo" v-demo:foo.a.b="message"></div>
<script>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ')
}
}) new Vue({
el: '#hook-args-demo',
data: { message: 'hello!' }
})
</script>

函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为。

Vue.directive('color', function (el,binding) {
el.style.backgroundColor = binding.value;
})

动态指令参数

指令的参数可以是动态的。例如,在 v-mydirective:[argument]="value" 中,argument 参数可以根据组件实例数据进行更新!

<div id="dynamicexample">
<h3>Scroll down inside this section ↓</h3>
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left</p>
</div>
<script>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
el.style[binding.arg] = binding.value + 'px';
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {direction: 'left'}
}
})
</script>

VUE学习-自定义指令的更多相关文章

  1. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  2. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  3. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  4. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  5. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  6. VUE2第五天学习---自定义指令

    阅读目录 1.理解VUE中的自定义指令 回到顶部 1.理解VUE中的自定义指令 默认核心指令有 (v-model 和 v-show), 但是有时候我们需要用到自定义指令,在vue中,代码复用主要形式和 ...

  7. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  8. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  9. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  10. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

随机推荐

  1. JavaWeb项目编译前后的目录结构

    JavaWeb项目编译前后的目录结构 编译前 页面和视图都放在webapp目录下 编译后 webapps WEB-INF

  2. Java开发网络安全常见问题

    Java开发网络安全常见问题 等闲识得东风面,万紫千红总是春 1.敏感信息明文传输 用户敏感信息如手机号.银行卡号.验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输. 如下图中小红书APP 的 ...

  3. ArcGIS插件 - 易至天工影像加载插件

    众所周知,谷歌地图由于其分辨率高.更新速度快,且一直免费,受到行业内外各种人士的青睐,也正因如此,有人利用,有人嫉妒,导致它在国内市场无法再继续下去了.各大相关软件产商也主动或被动下架相关服务,可还是 ...

  4. NET-async-await是否会创建新线程

    title: .NET async/await是否会创建新线程 date: 2022-12-06 10:36:46 tags: - .NET 先上结论 CPU密集型操作,比如计算,如果不使用Task, ...

  5. [Untiy]贪吃蛇大作战(五)——游戏主界面

    接着上一节: 4.AI蛇的设计 这里AI蛇大部分代码都可以参照主角的代码,我这里的实现其实还可以进行改进.基本原理就是蛇创建之后给蛇一个随机方向的单位向量,AI蛇的蛇头添加一个比蛇头大两三倍大小的碰撞 ...

  6. 这可能是Matplotlib和Seaborn最全的入门文档

    matplotlib是python第一个数据可视化库,在数据分析,可视化领域的地位和贡献是无法磨灭的.但也正是因为有了这位老大哥的出现给后续基于matplotlib实现的绘图库实现了可能. 而对于绘图 ...

  7. VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

    VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...

  8. SQLSERVER 的四个事务隔离级别到底怎么理解?

    一:背景 1. 讲故事 在有关SQLSERVER的各种参考资料中,经常会看到如下四种事务隔离级别. READ UNCOMMITTED READ COMMITTED SERIALIZABLE REPEA ...

  9. FLASH-CH32F203替换CH32F103 FLASH快速编程移植说明

    因CH32F203 相对于CH32F103 flash操作的快速编程模式由单次128字节编程变成了单次256字节编程,该文档说明主要目的是为了方便客户在原先CH32F103工程的基础上实现flash ...

  10. 关于Mysql外键从新学习

    关于Mysql外键从新学习 参考:https://blog.csdn.net/u010373419/article/details/9321331 说实话,这是一个抄剩饭的文档. 为什么会从新学习外键 ...