Vue内置指令大全

前言

大家好，我是 CoderBin，太久没碰 Vue 了，搞的连一些最基本的指令写法都有点模糊了，所以这一次就对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。

0. 插值表达式

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

  <template id="my-app"><h2>{{message}} - {{message}}h2><h2>{{counter * 10}}h2><h2>{{ message.split(" ").reverse().join(" ") }}h2><h2>{{getReverseMessage()}}h2><h2>{{ isShow ? "哈哈哈": "" }}h2><button @click="toggle">切换button>{var name = "abc"}}
{{ if(isShow) {  return "哈哈哈" } }}
 -->template>

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('hello', $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>
<input @keyup.enter="onEnter" />
<button v-on:click.once="doThis">button>
<button v-on="{ mousedown: doThis, mouseup: doThat }">button>

2. v-bind

说明： 动态的绑定一个或多个 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 名称-绑定值对的对象。

<img v-bind:src="imageSrc" />
<button v-bind:[key]="value">button>
<img :src="imageSrc" />
<button :[key]="value">button>
<img :src="'/path/to/images/' + fileName" />
<div :class="{ red: isRed }">div>
<div :class="[classA, classB]">div>
<div :class="[classA, { classB: isB, classC: isC }]">div>
<div :style="{ fontSize: size + 'px' }">div>
<div :style="[styleObjectA, styleObjectB]">div>
<div v-bind="{ id: someProp, 'other-attr': otherProp }">div>
<MyComponent :prop="someThing" />
<MyComponent v-bind="$props" />
<svg><a :xlink:special="foo">a>svg>

3. v-if

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

<h2 v-if="isShow">哈哈哈哈h2>

4. v-else

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

<h2 v-if="isShow">Coderh2>
<h2 v-else>Binh2>

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

5. v-else-if

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

v-model 后面会说明

6. v-show

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

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

  <template id="my-app"><h2 v-show="isShow">哈哈哈哈h2>template><script>const App = {template: '#my-app',data() {return {isShow: true}}}Vue.createApp(App).mount('#app');script>

v-show 不支持在