Vue.js自定义指令的用法与实例

Posted 2020-10-21 爱喝酸奶的吃货

官网：自定义指令

实例：v-color

注册一个全局自定义指令 `v-color-two`

在main.js中：

import Vue from \'vue\'
import App from \'./App\'

Vue.config.productionTip = false

Vue.directive(\'colorTwo\', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    el.style.color = binding.value;
  }
});

/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  template: \'<App/>\',
  components: { App }
});

调用全局自定义指令：

app.vue文件中：

<template>
  <div id="app">
    <p v-color-two="\'blue\'">自定义指令：v-colorTwo</p>
  </div>
</template>

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

注册局部自定义指令  v-color

<script>
export default {
  name: \'app\',
  components: {},
  directives: {
    // 指令的定义
    color: function(el, binding) {
      el.style.color = binding.value;
    }
  },
  data() {
    return {}
  },
  mounted: function() {},
  methods: {}
}
</script>

调用自定义指令  v-color 

<template>
  <div id="app">
    <p v-color="\'red\'">自定义指令：v-color</p>
  </div>
</template>

页面效果：

自定义指令有什么作用呢？

<template>
  <div id="app">
    <input type="text" v-focus>
  </div>
</template>

<script>
export default {
  name: \'app\',
  components: {},
  directives: {
    focus: {
      inserted: function(el) {
        el.focus()
      }
    }
  },
  data() {
    return {}
  },
  mounted: function() {},
  methods: {}
}
</script>

 页面效果图：

如果用jquery实现的话：

<template>
  <div id="app">
    <input type="text" class="default-focus">
  </div>
</template>

<script>
export default {
  name: \'app\',
  components: {},
  directives: {},
  data() {
    return {}
  },
  mounted: function() {
    $(\'.default-focus\').focus();
  },
  methods: {}
}
</script>

原生js实现：

<script>
export default {
  name: \'app\',
  components: {},
  directives: {},
  data() {
    return {}
  },
  mounted: function() {
    document.getElementsByClassName(\'default-focus\')[0vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

 Vue.js学习 Item13 – 指令系统与自定义指令
 Vue.js 创建一个 CNODE 社区
 Vue.js 源码分析(二十三) 高级应用 自定义指令详解
 Vue.js---自定义指令
 03Vue.js---自定义指令