精华内容
下载资源
问答
  • vue创建自定义指令

    2017-10-19 14:06:00
    vue创建自定义指令 作用:操作dom 使用场景:对纯 DOM 元素进行底层操作,比如:文本框获得焦点 自定义指令分为:全局自定义指令、局部自定义指令 全局指令 示例: 功能:完成输入框的获取焦点操作 <!--...

    vue创建自定义指令

    作用:操作dom

    使用场景:对纯 DOM 元素进行底层操作,比如:文本框获得焦点

    自定义指令分为:全局自定义指令、局部自定义指令

    全局指令

    示例:
    功能:完成输入框的获取焦点操作
    <div id="app">
        <!-- 使用 自定义指令,在自定义指令的前面添加 v- 前缀 -->
        <input type="text" v-model="msg" v-if="isShow" v-focus:foo="123 + 1">
    </div>
    
    
    <script>
        // 创建全局指令
        // 第一个参数:表示指令的名称,不带 v- 前缀
        // 第二个参数:表示一个配置对象,对象中是指令的 钩子函数
        /* Vue.directive('focus', {
          // inserted 在元素被插入到页面中的时候调用
          inserted: function (el) {
            // el 表示当前元素, 是一个DOM对象
            el.focus()
          }
        }) */
    
    
        Vue.directive('focus', {
          // 指令的钩子函数--第一次绑定元素时调用
          bind(el) {
            console.warn('指令的钩子函数:bind');
            console.log(el);
            // el.focus()
          },
          
          // inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
          inserted: function (el, binding) {
            console.warn('指令的钩子函数:inserted');
            
            // binding是一个对象,包括指令的所有信息
            console.log(binding);
    
            // 其中foo是指令参数--可以打印看看
            console.log(binding.arg);
            
            // el 表示当前元素, 是一个DOM对象
            el.focus()
          },
          
          // 指令的钩子函数,只调用一次,指令与元素解绑时调用(即当标签被删除时)。
          unbind() {
            // 当指令所在的元素,从页面中移除的时候,unbind钩子函数会被执行
            console.warn('指令的钩子函数:unbind');
          }
        })
    
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '',
            isShow: true
          }
        })
      </script>
    

    局部指令

    用法和全局指令一样,只是在vm实例内部定义,只能被这一个实例使用,而全局只能可以被多个实例使用。

    示例:
    功能:完成输入框的获取焦点操作
    <div id="app">
        <!-- 使用 自定义指令,在自定义指令的前面添加 v- 前缀 -->
        <input type="text" v-model="msg" v-if="isShow" v-focus:foo="123 + 1">
    </div>
    
    <script>
      // 实现的功能一样 
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '',
            isShow: true
          },
          directives:{
            focus:{
              // 创建局部指令
              // inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
              inserted: function (el, binding) {
                console.warn('指令的钩子函数:inserted');
    
                // binding是一个对象,包括指令的所有信息
                console.log(binding);
    
                // 其中foo是指令参数--可以打印看看
                console.log(binding.arg);
    
                // el 表示当前元素, 是一个DOM对象
                el.focus()
      		  })
            }
          }
        })
      </script>
    

    详解自定义指令钩子函数

    链接地址:https://cn.vuejs.org/v2/guide/custom-directive.html

    • bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
    • inserted:被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。
    • update:所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
    • componentUpdated:所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
    • unbind:只调用一次,指令与元素解绑时调用。
    • 接下来我们来看一下钩子函数的参数 (包括 elbindingvnodeoldVnode)。

    钩子函数参数:

    • el:指令所绑定的元素,可以用来直接操作 DOM 。

    • binding:一个对象,包含以下属性:name:指令名,不包括 v- 前缀。value:指令的绑定值,例如:v-my-directive="1 + 1", value 的值是 2oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。expression:绑定值的字符串形式。例如 v-my-directive="1 + 1" ,expression 的值是 "1 + 1"arg:传给指令的参数。例如 v-my-directive:foo,arg 的值是 "foo"modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }

    • vnode:Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。

    • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

    简写模式

    大多数情况下,我们可能想在 bindupdate 钩子上做重复动作,并且不想关心其它的钩子函数。可以这样写:

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

    转载于:https://my.oschina.net/shuaihong/blog/1553320

    展开全文
  • Vue自定义指令创建和使用 Vue自带的指令很多,如v-for/v-if/v-else/v-else-if/v-model/v-bind… 但是这些指令都是比较偏向于工具化,有些时候在实现具体业务逻辑的时候,发现不够用,那如何来自定义指令? 1....

    Vue之自定义指令的创建和使用

    Vue自带的指令很多,如v-for/v-if/v-else/v-else-if/v-model/v-bind…

    但是这些指令都是比较偏向于工具化,有些时候在实现具体业务逻辑的时候,发现不够用,那如何来自定义指令?

    1.自定义指令

    <body>
        <div id="container">
            <p>{{msg}}</p>
            <!-- 准备实现需求:
            在h1标签上面,加上一个按钮,当点击按钮时候,对count实现一次自增操作,当count等于5的时候,在控制台输出’it is a test‘ -->
            <button @click="handleClick">clickMe</button>
            <h1 v-if="count < 6" v-change="count">it is a custom directive</h1>
        </div>
    
        <script>
            //directive
            new Vue({
                el: "#container",
                data: {
                    msg: '麻子',
                    count: 0
                },
                methods: {
                    handleClick: function () {
                        //按钮单击,count自增
                        this.count++;
                    }
                },
                directives: {
                    change: {
                        bind: function (el, bindings) {
                            console.log('指令已经绑定到元素了');
                            console.log(el);
                            console.log(bindings);
                            //准备将传递来的参数显示在调用该指令的元素的innerHTML
                            el.innerHTML = bindings.value;
                        },
                        update: function (el, bindings) {
                            console.log("指令的数据有所变化");
                            console.log(el);
                            console.log(bindings);
                            el.innerHTML = bindings.value;
                            if (bindings.value == 5) {
                                console.log("it is a test");
                            }
                        },
                        unbind: function () {
                            console.log("解除绑定了");
                        }
                    }
                }
            })
        </script>
    </body>
    

    2.使用自定义指令

    如:v-change

    3 .注意

    在自定义指令时,在指令对应的配置对象中有了3个处理函数指令对应的操作:

    bind:指令在绑定到元素要执行的操作

    update:如果在调用指令时候,传了参数,当参数变化的时候就会执行update所指定的方法

    ubind:解绑要执行的操作

    注意事项:建议在给指令的命名采用小驼峰式的命名方式:changeBackgroundColor
    在使用的时候,采用烤串式写法:v-change-background-color

    展开全文
  • 一、Vue中如何自定义指令 除了核心功能默认内置的指令 (如v-model 和 v-show等),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 如何自定义指令 1.创建局部指令 ...

    一、Vue中如何自定义指令

    除了核心功能默认内置的指令 (如v-model 和 v-show等),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
    如何自定义指令

    1.创建局部指令
    var app = new Vue({
        el: '#app',
        data: {    
        },
        // 创建指令(可以多个)
        directives: {
            // 指令名称
            dir1: {
                inserted(el) {
                    // 指令中第一个参数是当前使用指令的DOM
                    console.log(el);
                    console.log(arguments);
                    // 对DOM进行操作
                    el.style.width = '200px';
                    el.style.height = '200px';
                    el.style.background = '#000';
                }
            },
            color: { // 为元素设置指定的字体颜色
              bind(el, binding) {
                el.style.color = binding.value;
              }
            }
    })
    
    2.全局指令,一般在main.js中定义
       // 为绑定的元素自动获取焦点:
       Vue.directive('focus', {
          inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
            el.focus();
          }
        });
    
    3.指令的使用
    <div id="app">
        <div v-dir1  v-color="'red'"></div>
        <input type="text" v-focus />
    </div>
    

    自定义指令分为:全局自定义指令局部自定义指令
    使用Vue.directive('focus ---(自定义指令名)', {bind(el,binding){},inserted(){}} ---(这是对象以及对象内的钩子函数))进行全局自定义指令
    钩子函数
    一个指令定义对象可以提供如下几个钩子函数 (均为可选):
    inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
    bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    update:所在组件的 VNode 更新时调用,也可能在其子 VNode 更新之前。指令的值可能会发生改变。但可以通过比较更新前后的值来忽略不必要的模板更新 。
    componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    unbind:只调用一次,指令与元素解绑时调用。
    指令钩子函数会被传入以下参数:
    el:指令所绑定的元素,可以用来直接操作 DOM 在每个函数中,第一个参数el ,表示被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象,。
    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 钩子中可用。

    二、vue自定义指令的应用场景

    使用自定义指令背景

    代码复用和抽象的主要形式是组件。
    当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
    但是,对于大幅度的 DOM变动,还是应该使用组件

    常用案例
    1、 输入框自动聚焦

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

    2 下拉菜单
    点击下拉菜单本身不会隐藏菜单
    点击下拉菜单以外的区域隐藏菜单

    Vue.directive('clickoutside', {
      bind(el, binding) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
           return false 
          }
          
          if (binding.expression) {
            binding.value(e)
          }
        }
        
        el.__vueMenuHandler__ = documentHandler
        document.addEventListener('click', el.__vueMenuHandler__)
      },
      unbind(el) {
        document.removeEventListener('click', el.__vueMenuHandler__)
        delete el.__vueMenuHandler__
      }
    })
    
    new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        handleHide() {
          this.show = false
        }
      }
    })
    <div class="main" v-menu="handleHide">
      <button @click="show = !show">点击显示下拉菜单</button>
      <div class="dropdown" v-show="show">
        <div class="item"><a href="#">选项 1</a></div>
        <div class="item"><a href="#">选项 2</a></div>
        <div class="item"><a href="#">选项 3</a></div>
      </div>
    </div>
    

    3. 相对时间转换
    类似微博、朋友圈发布动态后的相对时间,比如刚刚、两分钟前等等

    <span v-relativeTime="time"></span>
    new Vue({
      el: '#app',
      data: {
        time: 1565753400000
      }
    })
    
    Vue.directive('relativeTime', {
      bind(el, binding) {
        // Time.getFormatTime() 方法,自行补充
        el.innerHTML = Time.getFormatTime(binding.value)
        el.__timeout__ = setInterval(() => {
          el.innerHTML = Time.getFormatTime(binding.value)
        }, 6000)
      },
      unbind(el) {
        clearInterval(el.innerHTML)
        delete el.__timeout__
      }
    })
    
    展开全文
  • VUE自定义指令

    2020-12-12 17:06:29
    文章目录前言一、VUE自定义指令创建?1.全局自定义指令创建2.局部自定义指令创建总结 前言 VUE除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象...


    前言

    VUE除了核心功能默认内置的指令 (v-modelv-show),Vue
    也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM
    元素进行底层操作,这时候就会用到自定义指令。


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、VUE自定义指令的创建?

    1.全局自定义指令创建

    <div id="app">
            <input type="text" v-focus>//使用v-focus自定义指令
    </div>
        
    <script>
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
            inserted: function (el) {
                el.focus()
            }
        })
    
        let vm = new Vue({
            el:"#app",
            data:{
    
            }
        })
    </script>
    

    上面创建了一个v-focus获焦指令,可以看到我们使用了directive关键字,directive有两个参数。

    第一个参数是名字,需要加双引号(为你的自定义指令取名)。

    第二个参数为你具体想要执行的指令,directive中除了有inserted之外还有bindupdate等钩子函数,但我们一般将指令写在inserted中。

    inserted方法携带一个参数,这个参数就是我们的DOM页面元素,这个参数是必带的,方法中我们给这个DOM页面元素绑定了一个focus获焦的函数方法,至此我们的全局自定义指令创建完毕。

    下面再通过一个VUE实例绑定我们的页面DIV,并在页面的DIV中加入V-focus来使用即可。

    这样就实现了我们全局自定义指令的创建与使用,自定义指令也是有全局与局部之分的,如果你不想这个指令让其他实例使用,那么就可以创建一个局部的自定义指令

    2.局部自定义指令创建

    我们仍然使用focus获焦事件,创建局部自定义指令与全局自定义指令的区别:
    1、局部变量写在一个VUE实例中
    2、directives末尾加不加s。创建局部变量需要加s,全局则不需要

    <div id="app2">
            <input type="text">
        </div>
    
    <script>
    let vm2 = new Vue({
            el: "#app2",
            data: {
    
            },
         //创建局部指令directives需要加s
            directives: {
                focus: {
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        })
    </script>
    

    总结

    本篇内容至此已结束,如有错误,欢迎评论指出。共勉~

    展开全文
  • vue自定义指令

    2021-03-20 21:12:40
    vue自定义指令 1.创建局部指令 var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { // 指令中第一个参数是当前使用指令的DOM inserted(el) { // ...
  • Vue自定义指令

    2019-08-24 17:18:20
    那么除了我们常用的Vue的内置指令外,我们还可以自定义指令,常用的自定义vue全局指令的模板如下: 这里的focus是定义额指令的名称,可根据指令作用换成其他名称。 模板中的bind,inserted, updated都是vue中的钩子...
  • Vue自定义指令简介钩子函数钩子函数参数动态指令参数函数简写对象字面量Vue源码学习目录 你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 自定义指令-vue官网 简介 Vue除了...
  • Vue-自定义指令

    2021-03-12 12:43:07
    为什么需要自定义指令 vue自带的指令不能满足业务需要,比如说更换元素样式,或者权限管理等。 自定义指令的开发步骤 全局指令 // 全局指令写在vue的实例创建前(简写方式) Vue.directive("red",function(el
  • vue 如何自定义指令

    2019-01-16 15:50:53
    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。这样很好的一点就是有的时候我们可以自建一些满足特殊需求的指令。 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { /...
  • Vue编写自定义指令

    2019-08-08 21:00:57
    在src目录下创建directives目录下创建index.js,其内容如下: ...Vue.directive('focus'/*注册一个全局自定义指令 v-focus */, { // 当绑定元素插入到 DOM 中。 inserted: function (el) { ...
  • Vue3.0自定义指令

    2021-08-27 09:51:32
    采用模块化定义,在src目录下创建directives目录,在这个目录中放置项目用到的所有自定义指令,方便管理和维护。 (2)注册 全局注册(使用较少)和局部注册 (3)页面使用 在html页面模板使用时,在定义的指令...
  • vue复制自定义指令

    2021-08-16 17:48:07
    vue复制自定义指令工作任务需要一个复制 工作任务需要一个复制 新建copy.js export default { // name: 'copy', /* bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置 el: 作用的 dom 对象 value: ...
  • vue3.0自定义指令实现

    2021-07-13 16:35:46
    Vue-cli 3.x 自定义指令1.vue-cli中新建指令集文件夹2.写入指令3.main.js中引入4.组件中使用 本文例子是自定义指令实现防抖和节流,其它指令实现类似 1.vue-cli中新建指令集文件夹 在src目录下创建directives文件夹...
  • vue自定义指令

    2020-11-26 17:51:23
    一、自定义指令 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。 使用格式: Vue.directive('指令名',{对象}) // 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,...
  • vue自定义指令

    2020-04-06 21:40:59
    vue中有很多指令,例如:v-on v-bind v-model v-for v-if等等,通过这些指令,可能也能最终达到我们需要的效果,为何要弄个自定义指令呢? 通过使用自定义指令,我们会发现它对dom的操作更加方便、更灵活、可复用...
  • vue3.0自定义指令

    2021-01-11 10:00:00
    在大多数情况下,你都可以操作数据来修改视图,或者反之。但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令。举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时...
  • vue中也可以创建自定义指令来做一些需要操作dom的业务 // 自定义组件的实例化 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el,binding,vnode ,oldVnode)...
  • vue 使用自定义指令实现拖拽 需求背景,工作中需要实现一个自定义打印模板的需求,能够实现单个及多个dom元素的同时拖拽,也能通过外部的input元素修改dom元素的样式。在npm和GitHub上找了各种已有的vue组件,不够...
  • Vue自定义指令

    2021-08-27 10:21:26
    指令在定义的时候,名称前面不需要加 v- 前缀,在调用的时候,需要在指令名称前加上 v- 前缀来进行调用。 自定义指令的注册分为全局自定义指令和局部指令。
  • 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一、注册全局指令: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: ...
  • Vue自定义指令学习

    2019-03-11 20:27:33
    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令自定义指令又可分为全局指令定义和私有指令的定义 一.全局指令定义的方法: 使用Vue.directive()定义全局的指令,其中,参数1为指令名...
  • vue-自定义指令

    2020-03-22 23:36:58
    自定义指令介绍 directives 钩子函数 参数 el,binding,vnode(vnode.context) bind,inserted,update,componentUpdated,unbind <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
  • 在我司的项目中,权限管理方面涉及到了Vue自定义指令功能,也使用了一些以自定义指令形式调用的插件。Vue3.0发布后,不再直接暴露一个Vue类而且directive()方法注册自定义指令的hooks也有所改变,意味着2.x版本的Vue...
  • 除了默认设置的核心指令(v-for、v-if 等),vue也允许注册自定义指令。 下面我们注册一个局部指令 v-nav-current,功能是 tab默认选中第一个,切换 tab 设置颜色和字体大小 。 实例: HTML: 首先 项目中创建一个 ...
  • (六)Vue - 自定义指令自定义指令的介绍自定义全局指令及钩子函数钩子函数参数自定义局部指令函数的简写自定义键盘修饰符 自定义指令的介绍 前面文章中讲解了一些Vue自带指令的使用, 如果Vue自带的指令不满足于...
  • 背景 除了核心功能默认内置的指令 (如v-model 和 v-show...创建自定义指令 1.创建局部指令 var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,854
精华内容 6,341
关键字:

vue创建自定义指令

vue 订阅