一文聊聊Vue中的常用内置指令【大全】

本篇文章对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。

0. 插值表达式

说明：插值表达式也叫Mustache语法(即双大括号)，双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。【相关推荐：vuejs视频教程】

  b2afd68918e546cb374a1c24691a872e
    9ef6101249767d81d4698769b8f602fb
    c1a436a314ed609750bd7c7d319db4da{{message}} - {{message}}2e9b454fa8428549ca2e64dfac4625cd
    
    2606cfc876c4f7b95f34dead360db33a
    c1a436a314ed609750bd7c7d319db4da{{counter * 10}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da{{ message.split(" ").reverse().join(" ") }}2e9b454fa8428549ca2e64dfac4625cd
    
    ed385a16220899853edae7594c73287b
    872d9b32c8da191b77f57bee34da1d47
    c1a436a314ed609750bd7c7d319db4da{{getReverseMessage()}}2e9b454fa8428549ca2e64dfac4625cd
    
    a9eef1710a66a568c2ef3239283949bc
    c1a436a314ed609750bd7c7d319db4da{{ isShow ? "哈哈哈": "" }}2e9b454fa8428549ca2e64dfac4625cd
    6159835a68da9af36b165079f357645e切换65281c5ac262bf6d81768915a4a77ac0

    67ac0dbf43588ec2e5eb6f29e5b49789
    4904c3e070de047a8967787da241ac97 赋值语句 -->
    <!-- c1a436a314ed609750bd7c7d319db4da{{var name = "abc"}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da{{ if(isShow) {  return "哈哈哈" } }}2e9b454fa8428549ca2e64dfac4625cd -->
  21c97d3a051048b8e55e3c8f199a54b2

1. v-on

说明： 给元素绑定事件监听器。

缩写：@

参数： event (使用对象语法则为可选项)

修饰符：

• .stop ——调用 event.stopPropagation()。
• .prevent ——调用 event.preventDefault()。
• .capture ——在捕获模式添加事件监听器。
• .self ——只有事件从元素本身发出才触发处理函数。
• .{keyAlias} ——只在某些按键下触发处理函数。
• .once ——最多触发一次处理函数。
• .left ——只在鼠标左键事件触发处理函数。
• .right ——只在鼠标右键事件触发处理函数。
• .middle ——只在鼠标中键事件触发处理函数。
• .passive ——通过 { passive: true } 附加一个 DOM 事件。

详细描述：事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

• 当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。
• 当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
• v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat(&#39;hello&#39;, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

说明： 动态的绑定一个或多个 attribute，也可以是组件的 prop。

缩写： : 或者 . (当使用 .prop 修饰符)

修饰符：

• .camel ——将短横线命名的 attribute 转变为驼峰式命名。
• .prop ——强制绑定为 DOM property。3.2+
• .attr ——强制绑定为 DOM attribute。3.2+

用途：

• 当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。
• 在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。
• 当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。
• 当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

495f993a7d574e3467199ea0fc65255f
6c49807b5e41afd08b07f879d5b3611f

ca2c8067e1037374e5d78c5e839ba8e7
ac4c10b12de52ff39d6dd1a86ea133be65281c5ac262bf6d81768915a4a77ac0

ce4ac11d070d78d3bf4200f56a5282e9
8bc35230c7bba922cce56c732e3b851b

685da3d7c8f7965d80f9edf48daa5f56
32faf3341289b94749af0bf1be652bc865281c5ac262bf6d81768915a4a77ac0

cf92cd4e87509defaf5abc7296f4c6d6
37ccd9321590410723880d35c8a63426

5eabc6319d1f89da1681a3a69d9817aa
df1db8db6c6a1bd001a2d325e0dcbba716b28748ea4df4d9c2150843fecfba68
78caffbd9efd2e28142928d3ff73cef716b28748ea4df4d9c2150843fecfba68
e063a6e4f78702bfc30f136daf6fca6016b28748ea4df4d9c2150843fecfba68

c27aa09baa6799cfd4a33ee9cd28ce53
c58a2ee2da6d1a27c74c9b091d80feb516b28748ea4df4d9c2150843fecfba68
d149abd42d3366e14b12501b1112e70216b28748ea4df4d9c2150843fecfba68

8073364419f41ce130335513bf5e1951
d939ca9ed5cd14734c4ddb20e4e79c0f16b28748ea4df4d9c2150843fecfba68

a862b17c74470a288351156b8c4d7f77
9610c342ea57239201ca91be6e4e7501

ea6794c82904aa952ca98ddabb0de838
e69d9b4290fd4fb4a432945fea6a38d6

75b29cbcaccc9c02662e62bd527990c3
486d7a50595533609bc98d44595dc670f56d2e7f23d45ed220101d81457245f15db79b134e9f6b82c0b36e0489ee08edde28f444098d408d960da4dccff3a948

3. v-if

说明： 基于表达式值的真假性，来条件性地渲染元素或者模板片段。

4b13269c58155b4d3c3f0e2b713f7a9f哈哈哈哈2e9b454fa8428549ca2e64dfac4625cd

4. v-else

说明： 表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。

4b13269c58155b4d3c3f0e2b713f7a9fCoder2e9b454fa8428549ca2e64dfac4625cd
6fa679bc7272d905ca47e65714e593c4Bin2e9b454fa8428549ca2e64dfac4625cd

ishow 为 true 显示 Coder，反之显示 Bin

5. v-else-if

说明： 表示 v-if 的“else if 块”。可以进行链式调用。

b2afd68918e546cb374a1c24691a872e
  244106ce26f735bc74200a8a7b3280ca
  049165843462199f7ad2c1a089cd32aa 90">优秀2e9b454fa8428549ca2e64dfac4625cd
  941a9c098be4f0040efec28ed48f877b 60">良好2e9b454fa8428549ca2e64dfac4625cd
  6fa679bc7272d905ca47e65714e593c4不及格2e9b454fa8428549ca2e64dfac4625cd
21c97d3a051048b8e55e3c8f199a54b2

v-model 后面会说明

6. v-show

说明：基于表达式值的真假性，来改变元素的可见性。

详细描述：v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

  b2afd68918e546cb374a1c24691a872e
    385ed23b4d02fc77ee7ebd14c8b72ca1哈哈哈哈2e9b454fa8428549ca2e64dfac4625cd
  21c97d3a051048b8e55e3c8f199a54b2

  3f1c4e4b6b16bbbd69b2ee476dc4f83a
    const App = {
      template: '#my-app',
      data() {
        return {
          isShow: true
        }
      }
    }
    Vue.createApp(App).mount('#app');
  2cacc6d41bbb37262a98f745aa00fbf0

v-show 不支持在 d477f9ce7bf77f53fbcf36bec1b69b7a 元素上使用，也不能和 v-else 搭配使用。

7. v-model

说明： 在表单输入元素或组件上创建双向绑定。

仅限： d5fd7aea971a85678ba271703566ebfd、221f08282418e2996498697df914ce4e、 4750256ae76b6b9d804861d8f69e79d3、components

修饰符：

• .lazy ——监听 change 事件而不是 input
• .number ——将输入的合法符串转为数字
• .trim ——移除输入内容两端空格

基本使用：

  b2afd68918e546cb374a1c24691a872e
    35b2b4783ceb9a54ba9d906c4a31606c
    990bd7c4ac2d231cd95d0071b68efb48 -->

    a19c7450e380302446c011b94704f128
    c1a436a314ed609750bd7c7d319db4da{{message}}2e9b454fa8428549ca2e64dfac4625cd
  21c97d3a051048b8e55e3c8f199a54b2

  3f1c4e4b6b16bbbd69b2ee476dc4f83a
    const App = {
      template: '#my-app',
      data() {
        return {
          message: "Hello World"
        }
      },
      methods: {
        inputChange(event) {
          this.message = event.target.value;
        }
      }
    }
    Vue.createApp(App).mount('#app');

绑定其他表单：

  b2afd68918e546cb374a1c24691a872e
    4640aafc9f665e8e0861ae4feac02a8f
    6f6f0d71120cc4719f1ed49d3bea4e3e
      自我介绍
      b6bfc2c3df4413e12fb29e24bddd088540587128eee8df8f03d0b607fe983014
    8c1ecd4bb896b2264e0711597d40766c
    c1a436a314ed609750bd7c7d319db4daintro: {{intro}}2e9b454fa8428549ca2e64dfac4625cd

    ada606ccd251c31e94c3d016eadc7e56
    c6a5bebce3c117fdffd863b9251e3393
    38fa2ed20090c8ee9c63580128fe7e49
      f01f21f30e21ae6d8146c11bad293515 同意协议
    8c1ecd4bb896b2264e0711597d40766c
    c1a436a314ed609750bd7c7d319db4daisAgree: {{isAgree}}2e9b454fa8428549ca2e64dfac4625cd

    820b72f7228d77b617dd5fcb1f6b4904
    45a2772a6b6107b401db3c9b82c049c2你的爱好: 54bdf357c58b8a65c66d7c19c8e4d114
    da039dcce21c416b4ffd9c47728b7146
      402e750d8af1b63b81eeec1332c33741 篮球
    8c1ecd4bb896b2264e0711597d40766c
    a7766bdb1fc22a2b0cce202b7fb94330
      3c2178265636ba16c83c1a7b917a0a09 足球
    8c1ecd4bb896b2264e0711597d40766c
    fb8859e3c9d4ddf7dfbf06c809df1e45
      38966e396fb5e52eadebf3356d27200b 网球
    8c1ecd4bb896b2264e0711597d40766c
    c1a436a314ed609750bd7c7d319db4dahobbies: {{hobbies}}2e9b454fa8428549ca2e64dfac4625cd

    2e7579bec9159d1fc6990ceb22eaa5c9
    45a2772a6b6107b401db3c9b82c049c2你的爱好: 54bdf357c58b8a65c66d7c19c8e4d114
    d2976ba1ac997526f88ca4e8bb4de440
      324f1eadb8049e4556029b2df5569ab8男
    8c1ecd4bb896b2264e0711597d40766c
    38c2d0814907870c5477634d311cab34
      06d4777128dbae66d7c8374e8209e12c女
    8c1ecd4bb896b2264e0711597d40766c
    c1a436a314ed609750bd7c7d319db4dagender: {{gender}}2e9b454fa8428549ca2e64dfac4625cd

    c0feb29bddb0804b1ad0c220ac78d6cb
    45a2772a6b6107b401db3c9b82c049c2喜欢的水果: 54bdf357c58b8a65c66d7c19c8e4d114
    5fd9cad7608ad243b072348dcee2c27a
      54ecce23d4044a0a00d42c566ab225fc苹果4afa15d3069109ac30911f04c56f3338
      f1f360e761fd66cc9146e16d2dba497d橘子4afa15d3069109ac30911f04c56f3338
      9541c26b2f7167e51c5d3255ce884852香蕉4afa15d3069109ac30911f04c56f3338
    18bb6ffaf0152bbe49cd8a3620346341
    c1a436a314ed609750bd7c7d319db4dafruit: {{fruit}}2e9b454fa8428549ca2e64dfac4625cd
  21c97d3a051048b8e55e3c8f199a54b2

  3f1c4e4b6b16bbbd69b2ee476dc4f83a
    const App = {
      template: '#my-app',
      data() {
        return {
          intro: "Hello World",
          isAgree: false,
          hobbies: ["basketball"],
          gender: "",
          fruit: "orange"
        }
      },
      methods: {
        commitForm() {
          axios
        }
      }
    }

    Vue.createApp(App).mount('#app');
  2cacc6d41bbb37262a98f745aa00fbf0

v-model修饰符的使用

 b2afd68918e546cb374a1c24691a872e
    7e5b3c60f3664e2ee2a2a24a62fece7f
    717719c49b690bb8eece2adabbfc0874 -->

    6faceceeebaa105666e801ff935b2463
    4888658be233bad65a521f436889bd53
    c1a436a314ed609750bd7c7d319db4da{{message}}2e9b454fa8428549ca2e64dfac4625cd
    350b7f834ee29bdbd49965c582390625查看类型65281c5ac262bf6d81768915a4a77ac0 -->

    bd573358cd5fb5aafd63b7aab8099bbb
    fc0814da98ce60da4c3d680dda8e296c
    990bd121baec33b5e8d85431a647259e查看结果65281c5ac262bf6d81768915a4a77ac0
  21c97d3a051048b8e55e3c8f199a54b2

  3f1c4e4b6b16bbbd69b2ee476dc4f83a
    const App = {
      template: '#my-app',
      data() {
        return {
          message: "Hello World"
        }
      },
      methods: {
        showType() {
          console.log(this.message, typeof this.message);
        },
        showResult() {
          console.log(this.message);
        }
      }
    }

    Vue.createApp(App).mount('#app');
  2cacc6d41bbb37262a98f745aa00fbf0

8. v-for

说明： 基于原始数据多次渲染元素或模板块。

详细描述：

指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名：

f4ef030d0839de37c4e1ef433c4b6394
  {{ item.text }}
16b28748ea4df4d9c2150843fecfba68

或者，你也可以为索引指定别名 (如果用在对象，则是键值)：

b28e4f7e2b4fedfa35a2eaa3176d8cd316b28748ea4df4d9c2150843fecfba68
598c7327e4dc26847bb4509c91af0aa416b28748ea4df4d9c2150843fecfba68
260bea15910fd895025eea6060c2eab716b28748ea4df4d9c2150843fecfba68

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

eabb038d2c6348808dc15a73bdd3a89d
  {{ item.text }}
16b28748ea4df4d9c2150843fecfba68

9. v-slot

说明： 用于声明具名插槽或是期望接收 props 的作用域插槽。

缩写： #

参数：插槽名 (可选，默认是 default)

仅限：

• d477f9ce7bf77f53fbcf36bec1b69b7a
• components (用于带有 prop 的单个默认插槽)

示例

ce4ce005a24c94d9b4e4a39d8a2161ed
71322b3c7af6c94f1e1c4e5773dff577
  f7c768329f9d5fe8ef837b28f9460d0e
    Header content
  21c97d3a051048b8e55e3c8f199a54b2

  81369fca6737871db11e27c64116e975
    Default slot content
  21c97d3a051048b8e55e3c8f199a54b2

  1e7c531a57ab34112c70be1a88387e8c
    Footer content
  21c97d3a051048b8e55e3c8f199a54b2
a7404faa8989ab176c7e812b70808e66

95dbf192020177187dadd953add4f076
d47f14ce98f36419e01ddc5846584a21
  d2d61fc03a199e5255b5f1fb9f3f316d
    3756e8adbda7e9b943a61c26f2df1b54
      {{ slotProps.item.text }}
    16b28748ea4df4d9c2150843fecfba68
  21c97d3a051048b8e55e3c8f199a54b2
837cb83ad017825a5f5808eec3f248e2

2e3cf59cf3584e31af52dd69e5425d1d
0990bbde804d14766ed5eb832feb391f
  Mouse position: {{ x }}, {{ y }}
757fecbcf4645dae34ff02ec40f70f05

10. v-text

说明： 更新元素的文本内容。

详细描述： v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。

0190816bd21822f3607e1482b4d1fa3b54bdf357c58b8a65c66d7c19c8e4d114
00f8dc646c4be2c5217d920298ae1cb1
45a2772a6b6107b401db3c9b82c049c2{{msg}}54bdf357c58b8a65c66d7c19c8e4d114

11. v-html

说明： 更新元素的 innerHTML。

详细描述： v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

安全说明: 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值

820ce39ab3aad7aa68f07baa11715ad416b28748ea4df4d9c2150843fecfba68

12. v-pre

说明： 跳过该元素及其所有子元素的编译。

详细描述：元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

2e24149472e5bc58f1ceee49a8c9a583{{ this will not be compiled }}54bdf357c58b8a65c66d7c19c8e4d114

13. v-once

说明： 跳过该元素及其所有子元素的编译。

详细描述： 在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

7e8efa3dbcf3fdb345a6412f8702406a
3f25dda40764ecd0ef903ae07954a188This will never change: {{msg}}54bdf357c58b8a65c66d7c19c8e4d114
e2653ecc49c1e70eebe3f42f2ed64d40
8e8069d201fc869e0b021ec4eee7a32c
  4a249f0d628e2318394fd9b75b4636b1comment473f0a7621bec819994bb5020d29372a
  e388a4556c0f65e1904146cc1a846bee{{msg}}94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
dfe8352334aba3b8aa96d56356ef33cf
bd44626675a18da8612637c251a4c1b0
5035b2b6fe29a3799ffa1054970076c4
ff6d136ddc5fdfeffaf53ff6ee95f185
  9c24683ccaed9ee5bcef68d7e04aa4f4{{i}}bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

14. v-cloak

说明： 用于隐藏尚未完成编译的 DOM 模板。

详细描述：该指令只在没有构建步骤的环境下需要使用。

• 当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。
• v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

[v-cloak] {
  display: none;
}

611840a88c56f105f2b2c201defa5862
  {{ message }}
16b28748ea4df4d9c2150843fecfba68

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci 一文聊聊Vue中的常用内置指令【大全】. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!