vue自定义指令directive

vue自定义指令directive

基本介绍

自定义指令：

Vue框架给开发者提供了许多指令，例如v-if 、v-else、 v-html、v-show、v-text、v-model、v-bind等等，这些指令都是固定的，并不能任意满足开发需要，有时开发需要一个指令而框架还没有提供，就需要开发者自己定义，称为“自定义指令”。

关键字：directive directives

声明语法：

// 1. 声明全局指令
Vue.directive(指令名称,{ 配置对象成员 })

// 2. 声明私有指令
new Vue({
  directives:{
    指令名称:{ 配置对象成员 }
  }
})

// 配置对象：
inserted(m){
  m：代表使用该指令的html标签dom对象，可以通过m进行原始dom操作实现业务需求
}

注意：私有指令directives关键字与el、data等都是并列的。

获得焦点-私有指令

案例：

​ 给案例创建一个私有自定义指令，使得在页面加载完毕后， ”输入框“ 自动获得焦点。

1. 创建指令：

// 注册自定义指令
directives:{
    // 指令名称注册时不要设置"v-",使用时再设置
    'dian':{
        // inserted 是固定用法
        // inserted：时机的事情，代表是div容器被Vue实例编译完毕，并且也渲染好了
        inserted:function(m){
            // m：代表使用该指令的元素dom对象
            // dom对象可以通过webapi技术操作页面元素
            // m.style.color = 'red'
            m.focus() // 使得input框元素获得焦点
        }
    }
},

2. 应用指令：

<input type="text" v-dian v-model="newbrand" @keyup.enter="add" @keyup.esc="newbrand=''" />

注意：无论是全局指令还是私有指令，声明的时候都不用设置v-前缀，使用的时候再添加上即可。

获得焦点-全局指令

案例：

​ 给案例创建一个全局自定义指令，使得页面加载完毕后，”输入框“ 自动获得焦点。

1. 创建指令：

Vue.directive('dian2',{
  inserted(m){
    // m：代表使用指令的html对象(dom对象)
    // console.dir(m)
    // 使得m对象获得焦点
    m.focus()
  }
})

var vm = new Vue()

2. 应用指令：

<input type="text" v-dian2 v-model="newbrand" @keyup.enter="add" @keyup.esc="newbrand=''" />