教女朋友学习 vue中的指令及其自定义指令

￡神魔★判官ぃ 2023-07-24 09:23 28阅读 0赞

> **写在前面**： 我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。`技术是开源的、知识是共享的`。  
>   
> 这博客是对自己学习的一点点总结及记录，如果您对 *Java*、*算法* 感兴趣，可以关注我的动态，我们一起学习。  
>   
> `用知识改变命运，让我们的家人过上更好的生活`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70_pic_center]

### 文章目录 ###

*   *   *  一、vue中内置的指令
         *  二、vue中自定义指令
         *   *  1. 自定义全局指令
             *  2. 自定义局部指令
             *  3. 钩子函数

### 一、vue中内置的指令 ###

`v-text` 指令用于将数据填充到标签中，作用和插值表达式类似，但是不会出现闪动问题。

`v-html` 指令用于将HTML片段填充到标签中，可能有安全问题。

`v-pre` 指令用于显示原始信息。

`v-once` 指令是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

`v-for` 指令用于遍历，把一个数组对应为一组元素。

`v-on` 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。指令简写为 @

`v-bind` 指令用于属性绑定,把数据绑定在HTML元素的属性上，指令简写为 : 要绑定的属性。

`v-model` 指令可以实现表单元素和 Model 中数据的双向数据绑定。

`v-if` & `v-else-if` & `v-else` 指令用于条件渲染。

`v-if` & `v-show` 指令用于隐藏和显示元素

> `v-if` 的特点：每次都会重新删除或创建元素
> 
> `v-show` 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

**`注意`**：

> ① 如果元素涉及到频繁的切换，最好不要使用 v-if 指令, 应该选择使用 v-show 指令；
> 
> ② 如果元素可能一直不会被显示出来被用户看到，则选择使用 v-if 指令

### 二、vue中自定义指令 ###

> 在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，开发人员仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

#### 1. 自定义全局指令 ####

注册一个 v-focus 指令，实现了在页面加载完成之后自动让输入框获取到焦点的小功能。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>全局自定义指令</title>
        <script src="js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <p>页面载入时，input 元素自动获取焦点：</p>
            <input type="text" placeholder="我是全局自定义指令" v-focus>
        </div>
        <script> // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 dom 中时…… ，其中参数 el 为dom元素 inserted: function (el) { // 聚焦元素 el.focus() } }) var vm = new Vue({ el: '#app', data: { } }) </script>
    </body>
    
    </html>

`只要打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。`

***效果演示***：

![在这里插入图片描述][20200410213933478.gif_pic_center]

#### 2. 自定义局部指令 ####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>局部自定义指令</title>
        <script src="js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <input type="text" placeholder="我是局部自定义指令" v-color="color">
        </div>
        <script> var vm = new Vue({ el: '#app', data: { color: 'red' }, // 注册一个局部自定义指令 `v-color` directives: { color: { // binding 为自定义的函数形参,通过自定义属性传递过来的值,存到 binding.value 里面 bind: function (el, binding) { // 根据指令的参数进行设置背景色 el.style.backgroundColor = binding.value } } } }) </script>
    </body>
    
    </html>

`只要通过指令绑定给了元素，不管元素有没有被插入到页面中去，这个元素肯定会有一个内联样式.`

***效果演示***：  
![在这里插入图片描述][20200410214042909.png_pic_center]

**`注意`**：

*  和JS行为有关的操作，一般在 inserted 中去执行；
 *  和样式有关的操作，一般在 bind 执行

#### 3. 钩子函数 ####

① 指令定义对象可以提供如下几个钩子函数 (均为可选)：

<table> 
 <thead> 
  <tr> 
   <th>钩子函数</th> 
   <th>使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bind</td> 
   <td>只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</td> 
  </tr> 
  <tr> 
   <td>inserted</td> 
   <td>被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</td> 
  </tr> 
  <tr> 
   <td>update</td> 
   <td>所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。</td> 
  </tr> 
  <tr> 
   <td>componentUpdated</td> 
   <td>指令所在组件的 VNode 及其子 VNode 全部更新后调用。</td> 
  </tr> 
  <tr> 
   <td>unbind</td> 
   <td>只调用一次，指令与元素解绑时调用。</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>el</td> 
   <td>指令所绑定的元素，可以用来直接操作 DOM。</td> 
  </tr> 
  <tr> 
   <td>binding</td> 
   <td>绑定一个对象。</td> 
  </tr> 
  <tr> 
   <td>vnode</td> 
   <td>Vue 编译生成的虚拟节点。</td> 
  </tr> 
  <tr> 
   <td>oldVnode</td> 
   <td>上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。</td> 
  </tr> 
 </tbody> 
</table>

③ 绑定对象属性说明：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>指令名，不包含前缀 v-。</td> 
   <td>v-focus 中的 focus。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>指令的绑定的值（计算后）。</td> 
   <td>v-my-directive=“1 + 1” 中，绑定值为 2。</td> 
  </tr> 
  <tr> 
   <td>oldValue</td> 
   <td>指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。</td> 
   <td>——</td> 
  </tr> 
  <tr> 
   <td>expression</td> 
   <td>字符串形式的指令表达式（不计算）。</td> 
   <td>v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。</td> 
  </tr> 
  <tr> 
   <td>arg</td> 
   <td>传给指令的参数，可选。</td> 
   <td>v-my-directive:foo 中，参数为 “foo”。</td> 
  </tr> 
  <tr> 
   <td>modifiers</td> 
   <td>一个包含修饰符的对象。</td> 
   <td>v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

***由于水平有限，博客中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/ec1ec658aece425abb7a12ee3558eff1.png
[20200410213933478.gif_pic_center]: /images/20230528/daa925bb50eb45a7935d749da7b17df5.png
[20200410214042909.png_pic_center]: /images/20230528/bd13aa2554b44399a6c6bacb49f55bca.png