今天周末，轻松一下更新一点简单一点的内容。我们平时在vue编码中，一些vue的指令是我们使用得很多的，比如v-on。v-bind等。这篇文章就详细介绍一下这些指令和他们的修饰符。

1.v-html {{}} v-text

这个三个都是我们用来渲染页面数据的。我们最常用的就是{{}}直接展示数据，或者用v-html来加载标签. v-html相当于原生的innerHtml

<template>
  这是a组件：<router-link to="/b">去b组件</router-link>
  <br />
  {{ aButton }}
  <div v-html="aButton"></div>
  <div v-text="aButton"></div>
</template>
<script setup>
import { ref } from 'vue';
const aButton = ref('<button>一个按钮</button>');
</script>

v-show 和 v-if

v-show和v-if都是用来控制元素是否显示的。 v-show 使用css的display：none来隐藏元素 v-if是通过是否加载dom来控制是否显示

<template>
  这是a组件：<router-link to="/b">去b组件</router-link>
  <br />
  <div v-html="aButton" v-if="false"></div>
  <div v-text="aButton" v-show="false"></div>
</template>
<script setup>
import { ref } from 'vue';
const aButton = ref('<button>一个按钮</button>');
</script>

我们可以看见v-if的dom元素看不到，而v-show是display none

如果考虑性能关系如果经常显示隐藏就用show，不常用就用if。因为经常操作dom会影响性能。

v-if v-else

v-else可以和v-if选着哪个组件显示和隐藏。 v-else if可以可出多个选择，或者多次使用v-if。

v-for

在vue开发中我们需要显示多个相同或者类似的组件或者元素时，写多个比较麻烦，我们这个时候就可以使用v-for来循环一个数组显示。

  <div v-for="item in 3" :key="item">123</div>

注意key时必须要绑定的，key可以绑定一个独一的字符串或者数字，对于dom的更新diff算法有着重要的作用，具体的在diff算法中我会详解。

注意 v-for和v-if不能同时在一个dom上使用，会矛盾。

解决办法，可以在外层再加一个div来使用v-for。或者里面加一个div来使用v-if。在vue2中v-for优先级高于v-if。在vue3中v-if的优先级高于v-for

v-bind

对于一些不能写死的dom或者组件属性可以使用v-bind动态加载，可以简写成：。比如img的src dom的style，class。组件的传值

<div :class="flag ? 'a' : 'b'" :style="{ fontSize: activeFontSize }">123</div>

v-on

绑定元素的事件类似于原生的事件绑定。不用写on 直接写click,引号里面写事件名字

 <div @click="divClick">123</div>

v-model

vue的双向绑定，他时一个语法糖，是v-bind和input事件结合的语法糖。当我们修改input框的值时，data中数据自动变化，当我们修改data中的数据时input框自动变化。达到双向绑定的效果。

<template>
  这是a组件：<router-link to="/b">去b组件</router-link>
  <br />
  <input type="text" v-model="inputValue" />
</template>
<script setup>
import { ref } from 'vue';
const inputValue = ref(1);
</script>

v-model还可以绑定组件，也是双向绑定

修饰符

事件修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

v-model修饰符

.lazyv-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。 .number 自动将用户的输入值转化为数值类型 .trim 自动过滤用户输入的首尾空格

键盘事件修饰符

.enter .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 修饰键： .ctrl .alt .shift .meta

13.vue中的指令和修饰符