原文地址


vue中除了内置的指令(v-show,v-model)还允许我们自定义指令

想要创建自定义指令,就要注册指令(以输入框获取焦点为例)

一、注册全局指令:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el,binding) {
// 当前指令绑定的dom元素
//console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
// console.log(binding)
// 聚焦元素
el.focus()
}
})

  

二、注册局部指令:

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

  

使用也很简单:直接在元素上面使用v-focus即可:

<input type="text" v-focus/>
 

下面再举一个自定义指令的小例子:拖拽

<template>
<div id="derective">
<div v-drag class="dragnode">拖拽1</div>
<div v-drag.limit class="dragnode">拖拽2</div>
</div>
</template>
<script>
export default {
name: "derective",
data() {
return {};
},
directives: {
// 指令的定义
drag: {
bind(el, binding) {
console.log('bind');
// 当前指令绑定的dom元素
console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
console.log(binding)
el.onmousedown = function(e) {
var e = e || event;
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop; document.onmousemove = function(e) {
var e = e || event;
let L = e.clientX - disX;
let T = e.clientY - disY; if (binding.modifiers.limit) {
if (L < 0) {
L = 0;
}
} el.style.left = L + "px";
el.style.top = T + "px";
}; document.onmouseup = function() {
document.onmousemove = null;
}; return false;
};
}
}
}
};
</script>
<style scoped>
.dragnode{
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
}
</style>

  

使用也很简单,只用在元素上添加v-drag或者v-drag.limit

  1. <div id="div1" v-drag.limit></div>
  2. <div id="div2" v-drag></div>

返回目录

vue中自定义指令的使用的更多相关文章

  1. vue中自定义指令

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

  2. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  3. Vue中自定义指令的使用方法!

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...

  4. 051——VUE中自定义指令:directive

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

  7. Vue.directive 自定义指令

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

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

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

  9. Vue 3自定义指令开发

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

随机推荐

  1. Ubuntu安装截图软件shutter

    参考链接: Ubuntu 安装和配置shutter截图软件 解决shutter不能编辑的问题:https://itsfoss.com/shutter-edit-button-disabled/ 安装前 ...

  2. mybatis中foreach使用方法

    作者:学无先后 达者为先 作者:偶尔记一下 foreach一共有三种类型,分别为List,[](array),Map三种. 下面表格是我总结的各个属性的用途和注意点. foreach属性 属性 描述 ...

  3. STM32调试利器之ITM

    原创: Osprey  鱼鹰谈单片机 2月17日 STM32 有一个代码跟踪功能,即 ITM,这个调试功能非常强大,可以替代串口输入输出功能,而且只需要占用一根 I/O 线就可以实现.当然它的好处不仅 ...

  4. BZOJ 1188 / Luogu P3185 [HNOI2007]分裂游戏 (SG函数)

    题意 有n个格子,标号为0 ~ n-1,每个格子上有若干石子,每次操作可以选一个0 ~ n-2的格子上的一颗石子,分裂为两颗,然后任意放在后面的两个格子内,这两个格子可以相同.求使先手必胜的第一步的方 ...

  5. 立即执行函数与For. . .in语句

    ㈠立即执行函数 ⑴定义:在函数定义完,立即被调用,这样的函数叫做立即执行函数 ⑵语法:函数对象() ⑶注意:立即执行函数往往只会执行一次 ⑷示例1: (function(){ alert(" ...

  6. while循环与do. . . while循环语句

    ㈠导入 向页面中输出连续的数字 var n = 1; document.write(n++ +"<br />"); ㈡while循环 ⑴循环语句:通过循环语句可以反复的 ...

  7. Java进阶知识11 Hibernate多对多单向关联(Annotation+XML实现)

    1.Annotation 注解版 1.1.应用场景(Student-Teacher):当学生知道有哪些老师教,但是老师不知道自己教哪些学生时,可用单向关联 1.2.创建Teacher类和Student ...

  8. Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C 倒序并查集

    C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. Flask-配置参数

    Flask配置 Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示 ...

  10. nginx的ngx_str_t

    在nginx里的ngx_tr_t结构是字符串定义如下 typedef struct { size_t len; u_char *data; }ngx_str_t; 在给这样的结构体赋值的时候,ngin ...