精华内容
下载资源
问答
  • function initPopHtml(title... var popOut = document.getElementById('popOut') ; if(popOut) { return; } var popOut = document.createElement('div'); popOut.id='popOut';... popOut.className = 'pop-out';... }
  • vue自定义指令

    2021-04-27 19:38:34
    vue自定义指令 focus自定义指令名称 例子

    vue自定义指令

    在这里插入图片描述

    在这里插入图片描述
    focus自定义指令名称

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

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

    展开全文
  • Vue自定义指令

    2020-12-22 19:25:37
    Vue自定义指令 简述 Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。 注册自定义指令 Vue自定义指令和组件一样...

    Vue自定义指令

    简述

    Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。

    注册自定义指令

    Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,第一个参数为自定义指令名称(指令名称不需要加 v- 前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀),第二个参数可以是对象数据,也可以是一个指令函数。

    <div id="app" class="demo">
        <!-- 全局注册 -->
        <input type="text" placeholder="我是全局自定义指令" v-focus>
    </div>
    <script>
        Vue.directive("focus", {
            inserted: function(el){
                el.focus();
            }
        })
        new Vue({
            el: "#app"
        })
    </script>
    

    这个简单案例当中,我们通过注册一个 v-focus 指令,实现了在页面加载完成之后自动让输入框获取到焦点的小功能。其中 inserted 是自定义指令的钩子函数,后面的内容会详细讲解。

    全局注册好了,那么再来看看如何注册局部自定义指令,通过在Vue实例中添加 directives 对象数据注册局部自定义指令。

    <div id="app" class="demo">
        <!-- 局部注册 -->
        <input type="text" placeholder="我是局部自定义指令" v-focus2>
    </div>
    <script>
        new Vue({
            el: "#app",
            directives: {
                focus2: {
                    inserted: function(el){
                        el.focus();
                    }
                }
            }
        })
    </script>
    

    钩子函数

    一个指令定义对象可以提供如下几个钩子函数 (均为可选):

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

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

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

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

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

    那么这几个钩子函数怎么使用呢?先来看看钩子函数的几个参数吧。

    指令钩子函数参数:

    el: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。

    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 编译生成的虚拟节点。

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

    自定义指令也可以传递多个值,可以用javascript表达式字面量传递,看例子:

    <div v-demo="{ color: 'white', text: 'hello!' }"></div>
    <script>
        Vue.directive('demo', function (el, binding) {
        console.log(binding.value.color) // "white"
        console.log(binding.value.text)  // "hello!"
        })
    </script>
    

    生命周期钩子函数

    • beforeCreate:初始化之前

    • created:初始化完成

    • beforeMount:挂载之前

    • mounted:挂载完成之后

    • beforeUpdate:数据更新之前

    • update:数据更新之后

    • beforeDestroy:解除绑定之前

    • destroyed:解除绑定之后

    案例:懒加载

    当你在阅览某网站的图片时,可能会由于图片资源比较大而加载缓慢,需要消耗一小段时间来呈现到眼前,这个体验肯定是不太友好的(就像网站切换页面,有时候会加载资源比较慢,为了给用户较好的体验,一般都会先出一个正在加载的友好提示页面),所以这个案例的功能就是在图片资源还没加载出来时,先显示默认背景图,当图片资源真正加载出来了之后,再把真实图片放置到对应的位置上并显示出来。

    <div id="app2" class="demo">
        <div v-for="item in imageList">
            <img src="../assets/image/bg.png" alt="默认图" v-image="item.url">
        </div>
    </div>
    <script>
        Vue.directive("image", {
            inserted: function(el, binding) {
                //为了真实体现效果,用了延时操作
                setTimeout(function(){
                    el.setAttribute("src", binding.value);
                }, Math.random() * 1200)
            }
        })
        new Vue({
            el: "#app2",
            data: {
                imageList: [
                    {
                        url: "./img/1.jpg"
                    },
                    {
                         url: "./img/2.jpg"
                    },
                    {
                        url: "./img/3.jpg"
                    }
                ]
            }
        })
    </script>
    
    展开全文
  • 一、注册自定义指令Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,第一个参数为自定义指令名称(指令名称不...

    简述

    Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。

    一、注册自定义指令

    Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,第一个参数为自定义指令名称(指令名称不需要加 v- 前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀),第二个参数可以是对象数据,也可以是一个指令函数。

    <div id="app" class="demo">
        <!-- 全局注册 -->
        <input type="text" placeholder="我是全局自定义指令" v-focus>
    </div>
    <script>
        Vue.directive("focus", {
            inserted: function(el){
                el.focus();
            }
        })
        new Vue({
            el: "#app"
        })
    </script>
    

    这个简单案例当中,我们通过注册一个 v-focus 指令,实现了在页面加载完成之后自动让输入框获取到焦点的小功能。其中 inserted 是自定义指令的钩子函数,后面的内容会详细讲解。
    全局注册好了,那么再来看看如何注册局部自定义指令,通过在Vue实例中添加 directives 对象数据注册局部自定义指令。

    <div id="app" class="demo">
        <!-- 局部注册 -->
        <input type="text" placeholder="我是局部自定义指令" v-focus2>
    </div>
    <script>
        new Vue({
            el: "#app",
            directives: {
                focus2: {
                    inserted: function(el){
                        el.focus();
                    }
                }
            }
        })
    </script>

    二、钩子函数

    一个指令定义对象可以提供如下几个钩子函数 (均为可选):

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
    • update:所在组件的 VNode 更新时调用。
    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind:只调用一次,指令与元素解绑时调用。

    官方文档:

    自定义指令 — Vue.jscn.vuejs.org
    01f9bb52a7a5123496704a4f9b94ff0a.png

    那么这几个钩子函数怎么使用呢?先来看看钩子函数的几个参数吧。指令钩子函数会被传入以下参数:

    • el: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。
    • binding: 一个对象,里面包含了几个属性,这里不多展开说明,官方文档上都有很详细的描述。
    • vnode:Vue 编译生成的虚拟节点。
    • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
    <div v-demo="{ color: 'white', text: 'hello!' }"></div>
    <script>
        Vue.directive('demo', function (el, binding) {
        console.log(binding.value.color) // "white"
        console.log(binding.value.text)  // "hello!"
        })
    </script>

    说了这么多理论知识,那么现在就来动手写一个简单的案例吧。假设这样的看一个场景:当你在阅览某网站的图片时,可能会由于图片资源比较大而加载缓慢,需要消耗一小段时间来呈现到眼前,这个体验肯定是不太友好的(就像网站切换页面,有时候会加载资源比较慢,为了给用户较好的体验,一般都会先出一个正在加载的友好提示页面),所以这个案例的功能就是在图片资源还没加载出来时,先显示默认背景图,当图片资源真正加载出来了之后,再把真实图片放置到对应的位置上并显示出来。

    <div id="app2" class="demo">
        <div v-for="item in imageList">
            <img src="../assets/image/bg.png" alt="默认图" v-image="item.url">
        </div>
    </div>
    <script>
        Vue.directive("image", {
            inserted: function(el, binding) {
                //为了真实体现效果,用了延时操作
                setTimeout(function(){
                    el.setAttribute("src", binding.value);
                }, Math.random() * 1200)
            }
        })
        new Vue({
            el: "#app2",
            data: {
                imageList: [
                    {
                        url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/homepage/section4/home-s4-p10-plus.jpg"
                    },
                    {
                        url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/homepage/section4/home-s4-watch2-pro-banner.jpg"
                    },
                    {
                        url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/en/mkt/homepage/section4/home-s4-matebook-x.jpg"
                    }
                ]
            }
        })
    </script>
    展开全文
  • Vue 自定义指令

    2020-02-17 18:13:45
    Vue自定义指令 定义 通过directive方法,配合钩子函数及参数定义指令 定义全局自定义指令 // js Vue.directive('focus', { inserted (el, binding, vnode, oldVnode) { el.focus() console.log('inserted',...

    Vue自定义指令

    定义

    通过directive方法,配合钩子函数及参数定义指令

    定义全局自定义指令

    // js
      Vue.directive('focus', {
        inserted (el, binding, vnode, oldVnode) {
          el.focus()
          console.log('inserted', el, binding, vnode, oldVnode)
        },
        bind (el, binding, vnode, oldVnode) {
          console.log('bind', el, binding, vnode, oldVnode)
        },
        unbind (el, binding, vnode, oldVnode) {
          console.log('unbind', el, binding, vnode, oldVnode)
        },
        update (el, binding, vnode, oldVnode) {
          console.log('update', el, binding, vnode, oldVnode)
        },
        componentUpdated (el, binding, vnode, oldVnode) {
          console.log('componentUpdated', el, binding, vnode, oldVnode)
        }
      })
    

    定义局部自定义指令

    directives: {
          reverse: {
            inserted (el, binding, vnode, oldVnode) {
              console.log('directives inserted', el, binding, vnode, oldVnode)
            },
            bind (el, binding, vnode, oldVnode) {
              console.log('directives bind', el, binding, vnode, oldVnode)
            },
            unbind (el, binding, vnode, oldVnode) {
              console.log('directives unbind', el, binding, vnode, oldVnode)
            },
            update (el, binding, vnode, oldVnode) {
              console.log('directives update', el, binding, vnode, oldVnode)
            },
            componentUpdated (el, binding, vnode, oldVnode) {
              console.log('directives componentUpdated', el, binding, vnode, oldVnode)
              el.value = binding.value.split('').reverse().join('')
            }
          }
        }
    

    自定义指令使用

    // html
    <input type="text" v-focus.bar="message">
    

    自定义指令 钩子函数 & 参数

    • 通过directive方法,配合钩子函数及参数定义指令

    钩子函数

    • inserted: 被绑定元素插入父节点时调用
    • bind: 指令被绑定时调用
    • unbind: 指令解绑时调用,如 $destory()
    • update: 组件更新时调用
    • componentUpdated: 组件更新后完成调用

    参数

    • el: HTML元素
    • binding: 自定义组件信息,如:v-focus.bar="message" & v-blur:foo="value"
      • name 自定义指令名称,除v-,如:foucs、blur
      • value 自定义指令值 hello vue !。指令可以接受合法JS表达式。
      • oldValue 上一个值
      • expression 自定义指令表达式,如:message。
      • arg 参数,如foo
      • modifiers 修饰符 bar,返回 {bar: true}
    • vnode: 虚拟节点
    • oldVnode: 上一个虚拟节点,仅在update、componentUpdated中可用

    函数简写 & 动态参数指令

    一般情况下 bind和update触发行为相同,所以可以简写为同一个回调函数

     Vue.directive('pin', function (el, binding) {
        console.log(binding)
        el.style.position = 'fixed'
        el.style[binding.arg] = binding.value
      })
    

    在模板中使用v-pin指令,使div改变位置

    <div v-pin:[dir]="200 + 'px'">
    自定义指令
    </div>
    

    v-pin的参数dir设置

    var app = new Vue({
        el: '#app',
        data: {
          message: 'hello vue !',
          dir: 'left'
        },
        methods: {
          onInput (val) {
            this.message = val
          }
        }
      })
    

    完成代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>自定义指令</title>
      <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
      {{message}}
      <field v-model="message"></field>
      <input type="text" v-focus.bar="message">
      <div v-pin:[dir]="200 + 'px'">
        自定义指令
      </div>
    </div>
    <script>
      Vue.component('field', {
        props: {
          value: {
            type: String
          }
        },
        // 局部自定义指令
        directives: {
          reverse: {
            inserted (el, binding, vnode, oldVnode) {
              console.log('directives inserted', el, binding, vnode, oldVnode)
            },
            bind (el, binding, vnode, oldVnode) {
              console.log('directives bind', el, binding, vnode, oldVnode)
            },
            unbind (el, binding, vnode, oldVnode) {
              console.log('directives unbind', el, binding, vnode, oldVnode)
            },
            update (el, binding, vnode, oldVnode) {
              console.log('directives update', el, binding, vnode, oldVnode)
            },
            componentUpdated (el, binding, vnode, oldVnode) {
              console.log('directives componentUpdated', el, binding, vnode, oldVnode)
              el.value = binding.value.split('').reverse().join('')
            }
          }
        },
        template: `
          <input :value="value" @input="onInput" v-reverse:foo="value">
        `,
        methods: {
          onInput (e) {
            var value = e.target.value
            this.$emit('input', value)
          }
        }
      })
      // 全局自定义指令
      Vue.directive('focus', {
        inserted (el, binding, vnode, oldVnode) {
          el.focus()
          console.log('inserted', el, binding, vnode, oldVnode)
        },
        bind (el, binding, vnode, oldVnode) {
          console.log('bind', el, binding, vnode, oldVnode)
        },
        unbind (el, binding, vnode, oldVnode) {
          console.log('unbind', el, binding, vnode, oldVnode)
        },
        update (el, binding, vnode, oldVnode) {
          console.log('update', el, binding, vnode, oldVnode)
        },
        componentUpdated (el, binding, vnode, oldVnode) {
          console.log('componentUpdated', el, binding, vnode, oldVnode)
        }
      })
      /**
       * example
       * 函数简写 & 动态参数指令
       * 一般情况下 bind和update触发行为相同,所以可以简写为同一个回调函数
       */
      Vue.directive('pin', function (el, binding) {
        console.log(binding)
        el.style.position = 'fixed'
        el.style[binding.arg] = binding.value
      })
      var app = new Vue({
        el: '#app',
        data: {
          message: 'hello vue !',
          dir: 'left'
        },
        methods: {
          onInput (val) {
            this.message = val
          }
        }
      })
    </script>
    </body>
    </html>
    
    展开全文
  • VUE自定义指令

    2020-03-10 20:49:12
    VUE自定义指令 Vue.directive 自定义指令 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • vue 自定义指令

    2018-04-13 07:56:04
    vue 自定义指令篇对于vue的指令,有我们熟悉的v-model、v-show等,但我们也可以自己定义我们需要的指令,如比较常用的v-lazy懒加载官方详细文档:https://cn.vuejs.org/v2/guide...通过directive就可以在Vue上注册...

空空如也

空空如也

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

vue自定义指令

vue 订阅