【笔记】Vue3的指令

发表于 2025-11-08 更新于 2025-12-25 分类于 Vue学习指北阅读次数：

前言

Vue3的指令学习笔记

可以在标签中使用由Vue定义的自定义属性，这些属性被称为Vue指令
Vue指令的属性值可以调用在data中定义的数据
Vue指令的属性值可以调用在methods中定义的函数
Vue指令的属性值可以写JS表达式，但不可以写JS语句

v-once

对于所有子节点内出现的胡子语法，都只渲染一次，未来如果数据发生改变不会再次渲染

<template>
  <div v-once>{{ key }}</div>
</template>

<script>
  export default {
    data: function () {
      return {
        key: "value"
      };
    }
  }
</script>

v-text

将数据渲染在标签内，HTML代码不会被解析

1
2
3

<template>
  <div v-text="'文本内容'"></div>
</template>

v-html

将数据渲染在标签内，HTML代码会被解析

1
2
3

<template>
  <div v-text="'<div></div>'"></div>
</template>

v-pre

对于所有子节点内出现的胡子语法，都不会被解析，{{}}会被当作原始字符串渲染在标签内

1
2
3

<template>
  <div v-pre>{{}}</div>
</template>

v-cloak

对于所有子节点内出现的胡子语法，当页面没有加载完时，不会在页面渲染（必须配合CSS实现隐藏）

<template>
  <div v-cloak>{{ key }}</div>
</template>

<script>
  export default {
    data: function () {
      return {
        key: "value"
      };
    }
  }
</script>

<style>
  [v-cloak] {
    display: none;
  }
</style>

v-memo

当响应式数据发生改变时，如果定义了v-memo，则只有v-memo中定义的响应式数据发生了改变，才会更新子节点内的所有响应式数据

<template>
  <div v-memo="[key1]">{{ key2 }}</div>
</template>

<script>
  export default {
    data: function () {
      return {
        key1: "value",
        key2: "value"
      };
    }
  }
</script>

v-bind

单向数据绑定，将JS中的数据绑定到HTML标签的属性作为属性值

<template>
  <img v-bind:src="key">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "http://127.0.0.1/image.png"
      };
    }
  }
</script>

简写，:当作v-bind:使用

<template>
  <img :src="key">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "http://127.0.0.1/image.png"
      };
    }
  }
</script>

对于`class`属性的绑定

传递字符串

<template>
  <img v-bind:class="key">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "class-name-1 class-name-2"
      };
    }
  }
</script>

传递对象

对象的属性名为class名，属性值为true或false表示是否添加该class名
- 对象的属性值可以为true或false
- 对象的属性值可以调用数据得到true或false
- 对象的属性值可以通过调用函数返回true或false
- 对象的属性值可以通过表达式结果返回true或false

<template>
  <img v-bind:class="{'class-name-1': false, 'class-name-2': key, 'class-name-3': fn(), 'class-name-4': true ? true : false}">
</template>

<script>
  export default {
    data: function () {
      return {
        key: false
      };
    },
    methods: {
      fn: function () {
        return false;
      }
    }
  }
</script>

传递数组

数组的元素值为class名
- 数组的元素值可以为字符串，表示class名
- 数组的元素值可以通过调用数据得到class名
- 数组的元素值可以为对象
- 数组的元素值可以通过调用函数返回class名
  - 函数的返回值可以为字符串，表示class名
  - 函数的返回值可以为对象
- 数组的元素值可以为表达式

<template>
  <img v-bind:class="['class-name-1', key, {'class-name-3': false}, method(), true ? 'class-name-5' : 'class-name-6']">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "class-name-2"
      };
    },
    methods: {
      method: function () {
        return "class-name-4";
      }
    }
  }
</script>

与普通class属性同时使用

<template>
  <img class="class-name-1" v-bind:class="key">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "class-name-2"
      };
    }
  }
</script>

对于`style`属性的绑定

传递对象

对象的属性名为CSS属性名
- 对象的属性名可以为字符串，表示CSS属性名
- 对象的属性名可以使用小驼峰，自动转换为连字符形式的CSS属性名
- 对象的属性名可以通过JS动态属性名，得到CSS属性名
对象属性值为CSS属性值
- 对象的属性值可以为字符串，表示CSS属性值
  - 如果CSS属性值为包含单位的数值时，末尾最好是手动添加单位
- 对象的属性值可以通过调用数据得到CSS属性值
- 对象的属性值可以通过调用函数返回CSS属性值
- 对象的属性值可以为表达式

<template>
  <img v-bind:style="{width: '100px', height: key1, 'background-color': method(), fontSize: '16px', [key2]: true ? 'red' : 'blue'}">
</template>

<script>
  export default {
    data: function () {
      return {
        key1: "100px",
        key2: "red"
      };
    },
    methods: {
      method: function () {
        return "red";
      }
    }
  }
</script>

传递数组

数组的元素值为对象
- 数组的元素值可以通过调用数据得到对象
- 数组的元素值可以通过调用函数返回对象

<template>
  <img v-bind:style="[key, method()]">
</template>

<script>
  export default {
    data: function () {
      return {
        key: {color: "red"}
      };
    },
    methods: {
      method: function () {
        return {backgrounndColor: "blue"};
      }
    }
  }
</script>

动态绑定属性名

<template>
  <div v-bind:[key]="id"></div>
</template>

<script>
  export default {
    data: function () {
      return {
        key: "id"
      };
    }
  }
</script>

批量绑定

v-bind的值可以为对象，对象的属性名会渲染为HTML标签属性名，对象的值会渲染为HTML标签属性值

<template>
  <div v-bind="key"></div>
</template>

<script>
  export default {
    data: function () {
      return {
        key: {id: "id", class: "class-name"}
      };
    }
  }
</script>

简写

<template>
  <div :="key"></div>
</template>

<script>
  export default {
    data: function () {
      return {
        key: {id: "id", class: "class-name"}
      };
    }
  }
</script>

v-model

双向数据绑定，将JS中的数据与标签的属性值双向绑定

表单元素双向绑定

为HTML的表单元素的value值进行数据的双向绑定

<template>
  <input type="text" v-model="key">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "value"
      }
    }
  }
</script>

实质

<template>
  <input type="text" v-bind:value="key" v-on:input="valueChange">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "value"
      }
    },
    methods: {
      valueChange: function (event) {
        this.key = event.target.value;
      }
    }
  }
</script>

各种表单元素双向绑定示例

如果同名复选框只有一个时，v-model绑定的数据是布尔值，如果同名复选框有多个时，v-model绑定的数据是value值

<template>
  <input type="text" v-model="key">
  <textarea v-model="key"></textarea>
  <input type="checkbox" v-model="key">
  <input type="radio" v-model="key">
  <select v-model="key">
    <option></option>
  </select>
</template>

<script>
  export default {
    data: function () {
      return {
        key: "value"
      }
    }
  }
</script>

修饰符

修饰符	备注
`.lazy`	懒监听，只有在离开焦点或按回车键时才会触发双向绑定的数据同步
`.number`	自动将输入的数据类型转换为数值型
`.trim`	去除首位空白字符

<template>
  <input type="text" v-model.lazy="key">
</template>

<script>
  export default {
    data: function () {
      return {
        key: "value"
      }
    }
  }
</script>

组件双向绑定

传送门

v-on

事件监听绑定

<template>
  <div v-on:click="fn()"></div>
</template>

<script>
  export default {
    methods: {
      fn: function () {
        ...
      }
    }
  }
</script>

简写，@当作v-on:使用

<template>
  <div @:click="fn()"></div>
</template>

<script>
  export default {
    methods: {
      fn: function () {
      ...
      }
    }
  }
</script>

event参数

隐式传递event参数

<template>
  <div v-on:click="method()"></div>
</template>

<script>
  export default {
    methods: {
      method: function (event) {
        console.log(event);
      }
    }
  }
</script>

显式传递event参数

通过$event关键字传递event参数

<template>
  <div v-on:click="method($event, 'value')"></div>
</template>

<script>
  export default {
    methods: {
      method: function (event, key) {
        console.log(event);
      }
    }
  }
</script>

传递JS表达式

<template>
  <div v-on:click="key++"></div>
</template>

<script>
  export default {
    data: function () {
      return {
        key: 1
      }
    }
  }
</script>

批量绑定

<template>
  <div v-on="{ click: fn(), dblclick: fn() }"></div>
</template>

<script>
  export default {
    methods: {
      fn: function () {
        ...
      }
    }
  }
</script>

简写

<template>
  <div @="{ click: fn(), dblclick: fn() }"></div>
</template>

<script>
  export default {
    methods: {
      fn: function () {
        ...
      }
    }
  }
</script>

修饰符

修饰符	备注
`.stop`	阻止事件冒泡，相当于调用`event.stopPropagation()`
`.prevent`	相当于调用`event.preventDefault()`
`.self`	当事件是由当前监听器本身触发时，才调用监听器
`.once`	只触发一次监听器
`.left`	只当鼠标左键点击时才会调用监听器
`.right`	只当鼠标右键点击时才会调用监听器
`.middle`	只当鼠标中键点击时才会调用监听器

<template>
  <div v-on:click.stop="fn()"></div>
</template>

<script>
  export default {
    methods: {
      fn: function () {
      ...
      }
    }
  }
</script>

v-for

遍历可迭代对象
通过in关键字或of关键字都可以遍历可迭代对象
Vue通过v-bind:key来判定组件是否需要重新渲染

遍历数组

<template>
  <ul>
    <li v-for="item in list" v-bind:key="item">{{ item }}</li>
    <li v-for="item, index in list" v-bind:key="item">{{ item }}</li>
  </ul>
</template>

<script>
  export default {
    data: function () {
      return {
       list: []
      };
    }
  }
</script>

遍历对象

<template>
  <ul>
    <li v-for="value in obj" v-bind:key="value">{{ value }}</li>
    <li v-for="value, key in obj" v-bind:key="value">{{ value }}</li>
    <li v-for="value, key, index in obj" v-bind:key="value">{{ value }}</li>
  </ul>
</template>

<script>
  export default {
    data: function () {
      return {
       obj: {}
      };
    }
  }
</script>

遍历字符串

<template>
  <ul>
    <li v-for="s in str" v-bind:key="s">{{ s }}</li>
  </ul>
</template>

<script>
  export default {
    data: function () {
      return {
       str: ""
      };
    }
  }
</script>

遍历数字序列

遍历1-10的数字序列

<template>
  <ul>
    <li v-for="n in num" v-bind:key="n">{{ n }}</li>
  </ul>
</template>

<script>
  export default {
    data: function () {
      return {
       num: 10
      };
    }
  }
</script>

v-if

不符合条件时，组件不会渲染

<template>
  <div v-if="key > 0"></div>
  <div v-else-if="key < 0"></div>
  <div v-else></div>
</template>

<script>
  export default {
    data: function () {
      return {
       key: 0
      };
    }
  }
</script>

v-show

不论是否符合条件，组件都会渲染
不符合条件时，组件会被设置为`style=”display: none;”

<template>
  <div v-show="key > 0"></div>
</template>

<script>
  export default {
    data: function () {
      return {
       key: 0
      };
    }
  }
</script>

前言

v-once

v-text

v-html

v-pre

v-cloak

v-memo

v-bind

对于class属性的绑定

传递字符串

传递对象

传递数组

与普通class属性同时使用

对于style属性的绑定

传递对象

传递数组

动态绑定属性名

批量绑定

v-model

表单元素双向绑定

各种表单元素双向绑定示例

修饰符

组件双向绑定

v-on

event参数

隐式传递event参数

显式传递event参数

传递JS表达式

批量绑定

修饰符

v-for

遍历数组

遍历对象

遍历字符串

遍历数字序列

v-if

v-show

完成

对于`class`属性的绑定

对于`style`属性的绑定