vue2系列 — 自定义指令

https://v2.cn.vuejs.org/v2/guide/custom-directive.html

<div v-example:foo.bar="baz">
1

vue 自定义指令的钩子

• bind： 当 v-XXX 指令绑定到节点上时 触发
• inserted：被绑定元素插入父节点时调用
• update：所在组件的 VNode 更新时调用

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • instance：使用该指令的组件实例。
• …

使用方法：

• 创建一个 js 文件

  • export default {
      // bind钩子 当 v-XXX 指令绑定到节点上时 触发
      bind (el) {
        el.oninput = () => {
          console.log('1', el)
          // 正则
          let pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
          // 将正则匹配到的字符，替换成 ''  赋予输入框节点的值
          el.children[0].value = el.children[0].value.replace(pattern, '');
        };
      }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

• vue 文件中，import 引入文件

• 并在 directives 中定义

  • directives: {
        limitInput
    }
    1
    2
    3

• 在输入框上使用：

将一个自定义指令全局注册: 在main.js写

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})
1
2
3
4

](https://v2.cn.vuejs.org/v2/guide/custom-directive.html)

<div v-example:foo.bar="baz">
1

vue 自定义指令的钩子

• bind： 当 v-XXX 指令绑定到节点上时 触发
• inserted：被绑定元素插入父节点时调用
• update：所在组件的 VNode 更新时调用

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • instance：使用该指令的组件实例。
• …

使用方法：

• 创建一个 js 文件

  • export default {
      // bind钩子 当 v-XXX 指令绑定到节点上时 触发
      bind (el) {
        el.oninput = () => {
          console.log('1', el)
          // 正则
          let pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
          // 将正则匹配到的字符，替换成 ''  赋予输入框节点的值
          el.children[0].value = el.children[0].value.replace(pattern, '');
        };
      }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

• vue 文件中，import 引入文件

• 并在 directives 中定义

  • directives: {
        limitInput
    }
    1
    2
    3

• 在输入框上使用：

将一个自定义指令全局注册: 在main.js写

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})
1
2
3
4