vue怎样自定义指令

旧城等待， 2021-11-05 13:28 323阅读 0赞

## 自定义指令可以去官网查看更多内容  ##

## [https://cn.vuejs.org/v2/guide/custom-directive.html][https_cn.vuejs.org_v2_guide_custom-directive.html]   指令可以用来操作元素，非常方便 ##

## 在vue单文件组件里面用directives来定义一个指令,这样定义的就是局部指令 ##

## 如图，append表示指令名，指令名随意起的， 它有一些钩子函数给我们调用 ##

##    这里说一下inserted钩子函数，借用vue官网的说法——被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) ##

## el表示的就是使用了指令的元素，如图，可以使用指令在插入元素的时候赋值 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70][]

# #

## binding.value则是指令等号后面的参数 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 1][]

## 这个参数可以是一个函数 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 2][]

## 如果想要函数接受参数则可以用v-指令:参数进行传递 ##

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 3][] ##

<template>
      <div>
        <span v-append:abc="showText"></span>
      </div>
    </template>
    
    <script>
    export default {
      name: "Full",
      directives: {
        append: {
          inserted: (el, binding) => {
            let temp = binding.value;
            let arg = binding.arg;
            temp(arg);
          }
        }
      },
      methods: {
        showText(arg) {
          console.log(arg);
        }
      }
    };
    </script>
    
    <style>
    </style>

##      ##

[https_cn.vuejs.org_v2_guide_custom-directive.html]: https://cn.vuejs.org/v2/guide/custom-directive.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70]: /images/20211105/899a038b70e9493880114de8ba4ecedb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 1]: /images/20211105/b74c87ab72694ad794c71a34376c5565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 2]: /images/20211105/e4fee1b9df594518b170b2fda67fab73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 3]: /images/20211105/c35f62ddaf374d17922af65c5dc99c1b.png