vue—自定义指令

2019-11-26 来源: LPEIL 发布在  https://www.cnblogs.com/peilin-liang/p/11937569.html

今日分享—自定义指令

需要学习的点:

modifiers属性的具体实例就是v-on:click.stop=”handClick” 一样,为指令添加一个修饰符。

全局指令:新建一个newDir.js

import Vue from 'vue'
Vue.directive('n', {
  bind: function(el, binding) {
    el.textContent = Math.pow(binding.value, 2)
  },
  update: function(el, binding) {
    el.textContent = Math.pow(binding.value, 2)
  }
})

局部指令:

组件中也接受一个 directives 的选项:

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

具体使用:若是全局引用需要在APP.vue的页面中引入newDir.js文件

import './components/newDir'<input v-n>

相关文章