8000 GitHub - 863379105/vue-directive: vue自定义指令,实现元素拖拽
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

863379105/vue-directive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

一个自定义指令,实现元素可拖拽效果

[toc]

笔记

全局指令

Vue.directive('指令名称',{指令配置})

局部指令

new Vue({
    el : '#app',
    directives : {
        '指令名称',{指令配置}
    }
})

全局注册用的是directive,而局部注册用的是directives

指令生命周期(钩子函数)

指令的运行方式很简单,它提供了一组指令生命周期钩子函数,我们只需要在不同的生命周期钩子函数中进行逻辑处理就可以了
  • bind : 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted : 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
  • update : 所在组件更新的时候调用
  • componentUpdated : 所在组件更新完成后调用
  • unbind : 只调用一次,指令与元素解绑时调用
不同的生命周期钩子函数在调用的时候同时会接收到传入的一些不同的参数
  • el : 指令所绑定的元素,可以用来直接操作 DOM
  • binding : 一个对象,包含以下属性:
    • name : 指令名,不包括 v- 前缀
    • value : 指令的绑定值(作为表达式解析后的结果)
    • expression : 指令绑定的表达式(字符串)
    • arg : 传给指令的参数,可选
    • modifiers : 传给指令的修饰符组成的对象,可选,每个修饰符对应一个布尔值
    • oldValue : 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用,无论值是否改变都可用

About

vue自定义指令,实现元素拖拽

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

0