精华内容
下载资源
问答
  • 实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多。 什么是图片懒加载 当我们向下...
  • 主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
  • 主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
  • 主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
  • 主要介绍了基于vue自定义指令实现按钮级权限控制,本文给大家介绍的非常详细,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue自定义指令实现仅支持输入数字和浮点型的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue自定义指令是一个比较容易引起内存泄漏的地方,原因就在于指令通常给元素绑定了事件,但是如果忘记了解绑,就会产生内存泄漏的问题。 看下面代码: directives: { scroll: { inserted (el, cb) { // 不是...
  • 主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
  • vue自定义指令(Vue.directive)实现点击水波纹效果
  • 主要介绍了vue自定义指令和动态路由实现权限控制的方法,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • 主要介绍了vue自定义指令之面板拖拽的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
  • 主要介绍了vue自定义指令directive的相关资料,下面通过实例给大家介绍,需要的朋友可以参考下
  • 下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue自定义指令改变data中的值,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue自定义指令

    2020-10-29 10:50:16
    vue自定义指令 当我们使用插件的时候,有时候会看到插件上使用v-xxx的用法,例如在使用图片懒加载时,我们可以看到他用了v-lazy的指令,这是怎么做的呢 ? 图片: 这是vue中的自定义指令,Vue-directive,我们可以...

    vue自定义指令

    当我们使用插件的时候,有时候会看到插件上使用v-xxx的用法,例如在使用图片懒加载时,我们可以看到他用了v-lazy的指令,这是怎么做的呢 ?

    图片:在这里插入图片描述

    这是vue中的自定义指令,Vue-directive,我们可以使用这个自定义指令来做很多效果,例如数据加载时,显示加载的遮罩,当加载完成后,再把这个遮罩框移除,效果如下:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    这样的效果要如何来做呢,根据vue官网上的用法说明来使用就可以

    // main.js
    Vue.directive('loading',{
      }
    })
    

    我们可以在main.js中写到Vue.directive('loding',{...})

    这里第一个参数是loading,也就是要传入的指令,如果要自定义一个v-lazy指令那就写Vue.directive('lazy',{...})

    第二个参数我们可以写一个对象,对象中包含以下几种钩子函数,他们分别表示

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

    我们这个方法中使用update方法就可以了,让v-loading的初始值为false,当请求数据的时候将它设为true,请求数据完成后再设为false

    这样v-loading的状态发生了改变,就会触发自定义指令中的update方法

    // main.js
    Vue.directive('loading',{
      update(el,binding,vNode,oldVnode){
      }
    })
    

    这个方法有4个参数,分别是el,binding,vnode, oldVnode,将它依次打印出来可以看到这些参数

    在这里插入图片描述
    第一个是绑定的dom元素,第二个参数是一个对象,包含不同的属性,我们在这里可以依据binding.value来判断v-loading中绑定的值,当它为true时,说明正在加载,这时候往body中添加一个遮罩框就可以实现加载中…的效果,当它为false的时候,加载完成,我们再把它移除就可以了。

    • 下面是完整代码
    // main.js
    Vue.directive('loading',{
      update(el,binding,vNode,oldVnode){
        console.log(el,binding,vNode,oldVnode)
        if(binding.value===true){
          let oDiv = document.createElement('div')
          oDiv.id = 'loadingWrapper'
          oDiv.style = `position:fixed;
            background:rgba(0,0,0,.3);top:0;right:0;
            bottom:0;left:0;color:#fff;z-index:3000;display:flex;
            justify-content:center;align-items:center;`
          oDiv.innerHTML = '加载中...'
          document.body.appendChild(oDiv)
        } else {
          document.body.removeChild(document.getElementById('loadingWrapper'))
        }
      }
    })
    
    <template>
      <div id="app">
        <button @click="getData" v-loading="isLoading">加载数据</button>
        <ul>
          <li v-for="item in list" :key="item.id">{{item}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data(){
        return{
          list: [],
          isLoading: false
        }
      },
      methods:{
        getData(){
          this.isLoading = true
          setTimeout(()=>{
            this.list = ['小明,20岁,来自北京','小张,22岁,来自河北','老刘,31岁,来自包头']
            this.isLoading = false
          },1000)
        }
      },
      
    }
    </script>
    
    <style>
    
    </style>
    
    

    动态指令参数

    到了这里,我们已经完成了指令的使用,如果我们希望自己来定义遮罩的颜色,字体大小,位置等,我们应该怎么做呢,这时候可以借助动态指令参数来完成

    v-loading:[argument]

    我们可以将原来的代码改写成

    // App.vue
    
    <button @click="getData" v-loading[style]="isLoading">加载数据</button>
    ...省略其他代码...
    data(){
      return{
      	style: `position:fixed;z-index:3000;display:flex;
            background:rgba(255,0,0,.3);top:0;right:0;
            bottom:0;left:0;color:#green;font-size:40px;
            justify-content:center;align-items:center;`
      }
    }
    
    
    // main.js
    Vue.directive('loading',{
      update(el,binding,vNode,oldVnode){
        console.log(el,binding,vNode,oldVnode)
        if(binding.value===true){
          console.log('jiazai')
          let oDiv = document.createElement('div')
          oDiv.id = 'loadingWrapper'
          oDiv.style = binding.arg
          oDiv.innerHTML = '加载中...'
          document.body.appendChild(oDiv)
        } else {
          document.body.removeChild(document.getElementById('loadingWrapper'))
        }
      }
    })
    

    这时候动态传入指令参数就完成了,遮罩的背景变成了红色,字体变大
    在这里插入图片描述

    展开全文
  • 一. 速识概念:   在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示。比如有 v-module,v-for...下面我将以最简单的例子带你认识vue自定义指令。 二.全局注册指令:   比如,我们想要

    一. 速识概念:

      在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示。比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一些相对应的功能。但是,在实际的开发过程中,可能这些内置指令并不能满足所有的需求,这时候,就需要用到 Vue 给我们提供的一个强大又灵活的功能「 自定义指令 」。
      同样,vue自定义指令可以分为全局注册指令和局部注册指令。下面我将以最简单的例子带你认识vue自定义指令。

    二.全局注册指令:

      比如,我们想要定义一个 v-color=" " 指令 ,标签引用这个指令后可以改变自身背景颜色。一个全局注册指令的基本语法如下:

    Vue.directive('color',{
       bind(){},
       inserted(){},
       update(){}, 
       componentUpdated(){},
       unbind()
    })
    

     第一个参数,color 为自定义指令的名称,不用带 v- 。第二个参数为一个对象,其中有5个钩子函数,你可以类似于vue的生命周期钩子函数,它们也是被绑定元素各个周期会触发的钩子函数。每个的执行期间如下:

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

    inserted():当指令绑定的元素插入到父节点中的时候触发。

    update():当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发。

    componentUpdated():当 update() 执行完毕之后触发。

    unbind():只调用一次,指令与元素解绑时调用。

      其实,我们最常用的就是 bind()和 inserted(),也可以理解为在 bind()里设置被绑定元素的css样式,在 inserted()里设置被绑定元素的 js 操作。
     我们的 v-color=" " 指令 ,标签引用这个指令后可以改变自身背景颜色,只定义bind()函数就行,如下:

       <div v-color="'red'">北极光之夜。</div>
    -------------------------------------------
        Vue.directive("color", {
            bind(el, binding) {
              console.log(el);
              console.log(binding);
            },
          });
    

    其中,每个钩子函数都有4个参数,我们只讨论 el 和 binding ,打印看看是什么:

    在这里插入图片描述
      可以看到,el 就是使用该指令的元素,而binding为一个对象,它保存着很多值,根据vue官方文档,其属性值包括:

    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 }。

      那么就很简单了,我们想利用 v-color 自定义指令把背景颜色改为红色可以如下设置:

       <div v-color="'red'">北极光之夜。</div>
    -------------------------------------------
        Vue.directive("color", {
            bind(el, binding) {
               el.style.cssText = `background-color:${binding.value}`;
            },
          });
    

    效果成功:
    在这里插入图片描述
    函数简写形式:
      在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。这时候函数可以简写如下:

          Vue.directive("color", function (el, binding) {
              el.style.cssText = `background-color:${binding.value}`;
          });
    

    三.局部注册指令:

     上面我们定义的全局自定义指令是在Vue实例上定义的,全局可以,如果我只想在某个组件上使用也是可以的,vue组件中规定了directives方法,与data和methods这些同级别,如下:

        <div id="app">
          <div v-color="'red'">北极光之夜。</div>
        </div>
     --------------------------------------
      var app = new Vue({
        el: "#app",
        data: {},
        directives: {
          color: {
            bind(el, binding) {
              el.style.cssText = `background-color:${binding.value}`;
            },
          },
        },
      });
    

    可以看到跟全局也是差不多写法,就是换个位置写而已。

    四:图片懒加载:

     我们可以用自定义指令实现图片懒加载。这里只介绍写法,关于图片懒加载原理可以看我另一篇文章,对懒加载原理和原生js实现分析的很全面:前端必会的图片懒加载,你造吗? 。地址 https://auroras.blog.csdn.net/article/details/119789741 看完了再回来看这里就一目了然啦~

     下面将用到 Intersection Observer 观察器接口实现懒加载。

    1.建一个HTML单页面,引入vue,然后new一个vue实例,变量moren为图片默认地址,arrSrc数组为图片真实地址:

      var app = new Vue({
            el: "#app",
            data: {
              moren: "img/0.png",
              arrSrc: [
                "img/1.jpg",
                "img/2.jpg",
                "img/3.jpg",
                "img/4.jpg",
                "img/5.jpg",
                "img/6.jpg",
                "img/7.jpg",
                "img/8.jpg",
              ],
            },
          });
    

    2.使用 v-for 渲染 arrSrc 数组,但是图片的src都设为moren:

        <div id="app">
          <div class="container">
            <img
              v-for="(item,index) in arrSrc"
              :key="index"
              :src="moren"
              alt="x"
            />
          </div>
        </div>
    

    此时页面效果如下:

    在这里插入图片描述

    3.定义 v-lazy = “图片地址” 自定义指令:

    <img
      v-for="(item,index) in arrSrc"
      :key="index"
      :src="moren"
      v-lazy="item"
      alt="x"
    />
    

    实现:

      Vue.directive("lazy", {
            inserted(el, binding) {
              //定义一个观察器,entries为状态改变元素的数组
              let observer = new IntersectionObserver((entries) => {
                // 遍历
                for (let i of entries) {
                  // 如果改元素处于可视区
                  if (i.isIntersecting > 0) {
                    // 获取该元素
                    let img = i.target;
                    // 重新设置src值
                    img.src = binding.value;
                    //取消对该元素的观察
                    observer.unobserve(img);
                  }
                }
              });
              // 为 img 标签添加一个观察
              observer.observe(el);
            },
          });
    

    效果,可以看到右边控制台,当图片出现在可视区时才加载:

    在这里插入图片描述

    五.总结:

      上面就是vue自定义指令的一些简单用法与应用的全部内容啦。总的来说,Vue 给我们提供的一个强大又灵活的功能「 自定义指令 ,可以分为全局注册指令和局部注册指令。全局注册为 Vue.directive(‘name’,{ bind(el,binding){} ,inserted(el,binding){}})。其中,el为该元素,binding为一个对象等等。当然,vue自定义指令肯定没这么简单,在一些复杂用法上是很难的,只能说学无止境了~

    下次见啦~

    我的哔哩哔哩空间
    Gitee仓库地址:全部特效源码
    Q群聊(欢迎):629596039
    其它文章:
    ~关注我看更多简单创意特效:
    文字烟雾效果 html+css+js
    环绕倒影加载特效 html+css
    气泡浮动背景特效 html+css
    简约时钟特效 html+css+js
    赛博朋克风格按钮 html+css
    仿网易云官网轮播图 html+css+js
    水波加载动画 html+css
    导航栏滚动渐变效果 html+css+js
    书本翻页 html+css
    3D立体相册 html+css
    霓虹灯绘画板效果 html+css+js
    记一些css属性总结(一)
    Sass总结笔记
    …等等
    进我主页看更多~

    展开全文
  • Vue 自定义指令

    2019-06-01 08:35:30
    关于自定义指令的写法(全局和局部),有哪些钩子函数,钩子函数的参数这里就不做讲解,Vue文档很清楚,可以直接看文档的;https://cn.vuejs.org/v2/guide/custom-directive.html 一、 自定义双向数据绑定 这个指令的...

    关于自定义指令的写法(全局和局部),有哪些钩子函数,钩子函数的参数这里就不做讲解,Vue文档很清楚,可以直接看文档的;https://cn.vuejs.org/v2/guide/custom-directive.html

    一、 自定义双向数据绑定

    这个指令的实现还是比较简单的;

    1. 首先在指令绑定到元素的时候,把数据和 data 中的数据保持一致; bind()
    2. data 中的数据更新的时候,把更新过的数据更新到指令绑定的元素中; uodate()
    3. 在指令绑定的元素更新数据的时候,监听 input 事件,通过 event.target.value 拿到新的数据,更新到 data 中去;inserted()

    难点说明:(3.)
    vnode.context[binding.expression]
    vnode:Vue 编译生成的虚拟节点,其实就是组件的虚拟 DOM 对象
    vnode.context指令绑定的元素所在的组件的对象
    binding.expression:字符串形式的指令表达式( v-gx="gong" 中的 gong

    钩子函数的参数 – vnode
    vnode:使用了指令之后,它会把当前这个元素,创建成一个虚拟的 DOM元素;
    里边包含(常用):

    1. context:这个指令绑定的元素所在的组件对象;
    2. data:绑定指令的数据;
    3. elm:指令所绑定的真实 DOM元素;

    主要代码

    <div id="app">
        <input type="text" v-sync='name'>
        <input type="text" v-model="name" style="background-color: #ccc;">
    </div>
    
    <script>
        Vue.directive('sync',{
            bind(el, binding, vnode){
                el.value = binding.value;
            },
            inserted(el, binding, vnode){
                el.addEventListener('input', (ev)=>{
                    vnode.context[binding.expression] = ev.target.value;
                });
            },
            update(el, binding, vnode){
                el.value = binding.value;
            }
        });
    
        new Vue({
            el: '#app',
            data: {
                name: '宫鑫'
            }
        })
    </script>
    

    二、自定义事件指令

    要实现这个事件的自定义指令,其实主要是灵活运用钩子函数的参数 binding,主要是如下几个参数
    binding.arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
    binding.value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    binding.modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为{ foo: true, bar: true }
    再加上一些判断,自定义事件指令就完成了;

    主要代码

    <div id="app">
        <button v-gx:click.stop="run">按钮</button>
    </div>
    
    <script>
        Vue.directive('gx', {
            bind(el, binding, vnode) {
                // 【1】判断值是不是一个函数
                if (typeof binding.value == 'function') {
                    // 【2】判断事件类型是否符合
                    if (/(click|mouseover|mouseout|mousemove|keydown|keyup)/.test(binding.arg)) {
                        // 【3】给指令绑定的元素绑定事件
                        el.addEventListener(binding.arg, (ev) => {
                            // 【4】修饰符 比如:stop
                            if (binding.modifiers.stop) {
                                ev.stopPropagation();
                            }
                            // 【5】执行函数
                            binding.value(ev)
                        });
                    } else {
                        console.error('您的事件类型有误,请检查:' + binding.arg);
                    }
                } else {
                    console.error('您传入的值并不是一个函数:' + binding.value);
                }
    
            }
        });
    
        new Vue({
            el: '#app',
            methods: {
                run(val) {
                    alert(val);
                }
            },
        })
    </script>
    




    衣带渐宽终不悔,为伊消得人憔悴
    展开全文
  • 指令包含复制、指定显示行数、外部点击、防抖节流、element dialog改变大小,拖拽、只可以输入数字、长点击、权限、水印等
  • VUE自定义指令

    2021-10-07 20:35:32
    Vue中除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 一、指令分为全局指令和局部指令 全局指令: ...

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

    一、指令分为全局指令和局部指令

    全局指令:

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

    局部指令:

    //局部指令在.vue文件中使用与data同级
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }

    然后你可以在模板中任何元素上使用新的 v-focus <input v-focus>

    二、自定义指令的生命周期函数

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

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

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

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

    5.unbind:只调用一次,指令与元素解绑时调用。

    三、生命周期函数中有以下几个参数elbindingvnode 、 oldVnode

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

    *binding:一个对象,包含以下 property

            1.name:指令名,不包括 v- 前缀。

       2.value:指令的绑定值。

            3.oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

            4.expression:字符串形式的指令表达式。

            5.arg:传给指令的参数。

            6.modifiers:一个包含修饰符的对象。

    *vnode:Vue 编译生成的虚拟节点。

    *oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

    四、在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

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

    展开全文
  • 下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name=...
  • 超实用:Vue 自定义指令合集

    万次阅读 2021-07-07 01:02:27
    大家好,我是漫步前面我已经分享过一篇“分享8个非常实用的Vue自定义指令”文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢。记得查看第一篇文...
  • vue自定义指令节流

    2021-09-23 10:05:02
    vue自定义指令节流节流在日常的按钮点击事件中很常见,这里简单封装了一个vue的自定义指令在src目录下新建utils目录,在里面新建preventRepeatClick.js![在这里插入图片描述]...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,088
精华内容 12,435
关键字:

vue自定义指令

vue 订阅