vue—自定义指令

Posted 2021-03-24 peilin-liang

今日分享—自定义指令

需要学习的点：

 

 

 

 

 

 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>