美文网首页
vue 自定义指令

vue 自定义指令

作者: 尼莫nemo | 来源:发表于2018-11-22 10:55 被阅读0次

    autofocus在safari不工作

    • 全局 案例自定义输入框聚焦指令
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
    //inserted 里面的第一个参数就是元素DOM的获取
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    
    • 组件自定义组件
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }
    

    指令钩子函数

    • bind 之调用一次,指令第一次绑定到元素的时候调用。再这里可以进行一次性的初始化设置
    • inserted 被绑定元素插入父节点时调用(仅保证父节点的存在,但不一定已被插入文档中)
    • updata 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind:只调用一次,指令与元素解绑时调用。
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    Vue.directive('demo', {
      bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: '       + s(binding.name) + '<br>' +
          'value: '      + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: '   + s(binding.arg) + '<br>' +
          'modifiers: '  + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    
    new Vue({
      el: '#hook-arguments-example',
      data: {
        message: 'hello!'
      }
    })
    
    

    相关文章

      网友评论

          本文标题:vue 自定义指令

          本文链接:https://www.haomeiwen.com/subject/crwkqqtx.html