码迷,mamicode.com
首页 > 其他好文 > 详细

vue—自定义指令

时间:2019-11-26 20:01:10      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:ima   nbsp   function   value   若是   dash   import   修饰符   top   

今日分享—自定义指令

需要学习的点:

技术图片

 

 

 技术图片

 

 

 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>

 

vue—自定义指令

标签:ima   nbsp   function   value   若是   dash   import   修饰符   top   

原文地址:https://www.cnblogs.com/peilin-liang/p/11937569.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!