精华内容
下载资源
问答
  • 自定义指令使用场景

    2020-09-20 22:11:36
    使用自定义指令背景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...

    使用自定义指令背景

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

    常用案例

    1、 输入框自动聚焦

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

    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>
    12345678910111213141516171819202122232425262728293031323334353637383940
    

    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__
      }
    })
    
    展开全文
  • 使用自定义指令场景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...

    使用自定义指令场景

    • 代码复用和抽象的主要形式是组件。
    • 当需要对普通 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__
      }
    })
    
    

    4、滚动动画

    <div id="app">
      <h1 class="centered">Scroll me</h1>
      <div class="box" v-scroll="handleScroll">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
      </div>
    </div>
    
    Vue.directive('scroll', {
      inserted: function(el, binding) {
        let f = function(evt) {
          if (binding.value(evt, el)) {
            window.removeEventListener('scroll', f)
          }
        }
        window.addEventListener('scroll', f)
      }
    })
    
    // main app
    new Vue({
      el: '#app',
      methods: {
       handleScroll: function(evt, el) {
        if (window.scrollY > 50) {
          TweenMax.to(el, 1.5, {
            y: -10,
            opacity: 1,
            ease: Sine.easeOut
          })
        }
        return window.scrollY > 100
        }
      }
    })
    
    body {
      font-family: 'Abhaya Libre', Times, serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: #000;
      color: #fff;
      overflow-x: hidden;
    }
    
    h1,
    h2,
    h3,
    h4 {
      font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
      font-weight: 800;
    }
    
    .centered {
      margin: 0 auto;
      display: table;
      font-size: 60px;
      margin-top: 100px;
    }
    
    .box {
      border: 1px solid rgba(255, 255, 255, 0.5);
      padding: 8px 20px;
      line-height: 1.3em;
      opacity: 0;
      color: white;
      width: 200px;
      margin: 0 auto;
      margin-top: 30px;
      transform: translateZ(0);
      perspective: 1000px;
      backface-visibility: hidden;
      background: rgba(255, 255, 255, 0.1);
    }
    
    #app {
      height: 2000px;
    }
    
    展开全文
  • 利用自定义指令实现权限校验 // directive.js // 控制元素显示不显示 Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; }); /...

    利用自定义指令实现权限校验

    // directive.js
    // 控制元素显示不显示
    Vue.directive('premission1', function(el, obj){
      // 控制 display的值即可
      el.style.display = obj.value > 3? 'none': 'block'; 
    });
    
    // 控制元素加载不加载,需要用到钩子函数 instered
    Vue.directive('premission2',{
      inserted(el, obj) {
        // 当被绑定的元素经过vue编译之后插入到 DOM 中时触发
        obj.value > 3? el.parentNode.removeChild(el): null; 
      }
    });
    
     <!-- html页面部分代码 -->
     <h1 v-premission1='3'>我显示</h1>
     <h1 v-premission1='5'>我不显示</h1>
    
     <h1 v-premission2='2'>我加载</h1>
     <h1 v-premission2='4'>我不加载</h1>
    

    在这里插入图片描述
    !注意:不论是全局自定义指令,还是局部自定义指令,指令对应的函数中的this都是window,而不是当前实例

    展开全文
  • 然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 一、注册自定义指令 全局注册:(一般使用写在自定义js中,在app.vue中引用该js的方式) // 注册一个全局自定义指令 `v-...

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

    一、注册自定义指令

    全局注册:(一般使用写在自定义js中,在app.vue中引用该js的方式)

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

    如果想注册局部指令,组件中也接受一个 directives 的选项:

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

    然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:

    <input v-focus>

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

    • 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和oldVnode没用过)

    • HTML
      
      <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
      
      JS
      
      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!'
        }
      })
      
      //显示结果:
      name:"demo"
      value:"hello"
      expression:"message"
      argument:"foo"
      ......
      
      

      动态指令不是很了解,以后补上!

    展开全文
  • 一、Vue中如何自定义指令 除了核心功能默认内置的指令 (如v-model 和 v-show等),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 如何自定义指令 1.创建局部指令 ...
  • directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } //使用方式 <input v-focus> 到此,基本上我们就知道自定义指令的用法和作用了,但是我们不仅会有疑问,这个功能的使用场景在哪...
  • vue 的自定义指令: 概述: vue 除了提供默认的内置指令,还可以允许开发人员根据实际情况自定义指令,他的作用价值在于开发人员在某些场合下需要对普通的DOM元素进行操作; 自定义指令的参数以及钩子函数 1、 ...
  • 有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 创建自定义指令 1.创建局部指令 var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 ...
  • 除了核心功能morning的内置指令(v-model和v-show),也可以允许注册自定义指令 代码的复用和抽象是主要形式是组件,然而,有的情况系啊,你仍然需要对普通DOM进行底层操作 钩子函数、钩子函数参数、动态指令参数 ...
  • 自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。 自定义指令编写的方式有2种 1、全局自定义指令 全局的指令必须要在实例化之前进行定义 Vue.directive(参数1,参数2) 参数...
  • 有时候内置指令并不能满足我们所有场景的需求,或者说有时候我们想为元素附加一些特别的功能,这时候就可以通过自定义指令来实现 vue 中的自定义指令分为两类,分别是: ⚫ 局部自定义指令:组件内定义的指令,只有...
  • 使用自定义指令背景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...
  • 自定义指令使用场景就是操作基础DOM,实现功能需求。 官方文档 1.关于自定义指令的钩子函数 自定义指令的五个钩子函数都是可选的,比如 v-once 指令。 bind 指令第一次绑定到元素上;只调用一次;可以做相关...
  • vue的自定义指令

    2020-11-01 16:35:02
    局部自定义指令使用directives选项 自定义指令的钩子函数 钩子函数 描述 bind() 构造函数,第一次绑定时调用,只调用一次 inserted() 被绑定元素插入父节点调用,父节点存在即调用 update() 第...
  • 一、什么是指令开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统,也叫机器语言,它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的...
  • vue自定义指令

    2020-06-10 19:53:54
    自定义指令使用场景不多,但是如果我们需要直接操作DOM就可以用到它。 自定义指令分为全局自定义指令和局部自定义指令 全局自定义指令 场景:输入框默认选中场景 //mian.js注册全局自定义指令 //使用Vue....
  • vue自定义指令使用

    2020-09-17 18:11:06
    什么是自定义指令,有哪些钩子函数及自定义指令使用场景? 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次...
  • AngularJS 自定义指令如何使用

    千次阅读 2020-04-22 11:39:50
    主要用于自定义指令, 减少代码重用,提高代码可读性,也便于后期维护。 2.学习/操作 TBD 3.问题/补充 TBD 4.参考 https://www.jb51.net/article/58229.htm //angularjs指令中的compile...
  • 在开始之前,我们需要明确一点,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令。 如何声明自定义指令? 就像vue中有全局组件和局部组件一样,他也分...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,932
精华内容 20,772
关键字:

自定义指令使用场景