前言

前面我们已经讲了如何用vite脚手架创建一个vue项目，以及介绍了一下一个vue项目的基本结构。了解了这些就相当于我们已经有了vue的入场券，接下来我们只需要更深入的了解下vue里面的一些API了，让我们可以在这个vue大舞台尽情的表演。

如果有朋友还不清楚如何创建一个vue项目，或者不清楚项目的基本结构可以移步至我之前的文章。

Vue的指令

通过前面的学习我们已经知道了，在一个vue的项目中我们主要在src目录下进行创作。在进行创作前我们首先要了解vue中的一些指令，Vue指令是Vue框架中不可或缺的一部分，它们是构建动态、交互式用户界面的基石。掌握Vue指令不仅能够提升你的前端开发技能，还能加深对现代前端框架设计理念的理解。我们可以在vue的官网学习相应的API

v-text

我们在vue中要渲染一个变量通常是要用两个花括号给变量括起来，这样才能将变量渲染出来，否则就渲染不出来。如下面这段代码：

xml 复制代码

<template>
   <div>
      {{msg1}}
   </div>
</template>

<script setup>
  const msg1 = 'hello world'
  
</script>

<style lang="css" scoped>

</style>

如果我们要将msg1的值显示出来，我们就需要这样这样才能正确的显示出来，如果不用两个花括号包裹的话，浏览器就会默认渲染msg1这个字符串，如图：

因为：使用双花括号 {{msg1}} ，Vue会识别这对花括号内的表达式，并将其解析为对应数据属性msg1的值。每当msg1的值发生改变时，Vue会自动更新该位置的显示内容，实现数据与视图的实时同步。而不使用双花括号，直接写msg1：在这种情况下，浏览器不会进行任何特殊处理，它只是简单地将msg1作为文本内容渲染到页面上。因此，用户看到的就是文本msg1本身，而不是msg1变量所代表的实际值。

而v-text就是更新元素的textContent，其作用和{{}}类似，具体的用法如下：

xml 复制代码

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

v-html

v-html这个标签就是将数据作为HTML插入到元素中，具体用法如下：

xml 复制代码

<template>
  <div v-html="msg1"></div>
</template>

<script setup>
  const msg1 = '<p>窗前明月光</p><p>疑似地上霜</p>'
  
</script>

<style lang="css" scoped>

</style>

最后显示的效果就是这样：

如果我们此时用{{}} 或v-text，浏览器会默认将<p>窗前明月光</p><p>疑似地上霜</p>这句话输出出来。

v-if，v-else-if,v-else

这是用于条件判断的，即当符合条件时才进行渲染，具体的用法如下：

xml 复制代码

<template>
  <h3 v-if="count<30">很开心</h3>
  <h3 v-else-if="count<40">不开心</h3>
  <h3 v-else>很痛苦</h3>
</template>

<script setup>
 const count = 40
</script>

<style lang="css" scoped>

</style>

此时count为 40，在页面显示的效果就是很痛。如下图：

当我们修改成符合不同条件的值时，相应的页面显示也会进行修改。

v-show

这个指令的作用与v-if类似，也是符合条件时就显示，不符合条件就不显示。但是他的不显示的方法与v-if又不相同，v-if指令在条件不满足时，会直接从DOM中移除对应的元素，而v-show不同，他是使用css将元素进行隐藏。

xml 复制代码

<template>
   <h4 v-show="count<30">我很开心</h4>
</template>

我们在这里将count设置为40，页面不显示任何效果。但是我们在浏览器中进行检查时，我们会发现，其实这个元素还在，但是使用了display:none隐藏了。如图所示：

v-show不用反复地删除添加元素，这样对浏览器的性能有所提升，但是安全性不高，其他人可以改变display属性就可以看到隐藏的内容了。

v-for

这是用来基于源数据（如数组或对象）来迭代渲染DOM元素。它是构建动态列表、表格等重复内容的主要方式。使用v-for我们可以更方便的遍历数据集合，同时也可以更方便的构建动态列表和表格等。下面我们根据一段代码来解释一下v-for的基本用法。

xml 复制代码

<template>
  <ul>
      <li v-for="(item,index) in list" :key="item.id">
          {{index+1}} - {{ item.name }}
      </li>
  </ul>
</template>

<script setup>
  const list = [
      {id:1,name:"庐州月"},
      {id:2,name:"千百度"},
      {id:3,name:"雅俗共赏"},
      {id:4,name:"断桥残血"},
  ]

</script>

<style lang="css" scoped>

</style>

最后的显示效果如下：

我们通过v-for这个指令遍历了list这个数组，且定义两个变量用来访问遍历到的元素及其其位置索引，例如我们以一个遍历到的是{id:1,name:"庐州月"}这个对象，索引item就是{id:1,name:"庐州月"}，index为0。而:key="item.id"这个语句是为我们遍历到的元素绑定一个key属性，为其提供一个唯一标识。

其实我们也可以不加这个:key="item.id"，但是我们最好还是加上，因为这对于Vue来说非常重要，因为它帮助Vue在重新渲染时，高效地跟踪每个节点的身份，从而优化性能并确保正确的更新DOM。

v-on 缩写为`@`

这个指令可以帮助我们给元素绑定一个监听事件，可以是点击(click)、鼠标悬停(mouseover)、键盘输入(keydown)等。我们通常绑定的数据类型为一个函数，也可以为Inline Statement，或者是不带参数的对象。具体的使用方法如下：

xml 复制代码

<template>
  <button @click="add()">+1</button>
</template>

<script setup>
 let count = 1
 const add = () =>{
  console.log('点击前：',count);
  count++
  console.log('点击后：',count);
}
</script>

<style lang="css" scoped>

</style>

我们给button添加了点击事件，使每次点击它都会让count++，并打印出来count的值。

v-bind 缩写为`:`

这个指令主要用于给元素添加属性，如上面提到的key，还可以是HTML属性，如class，src等。我们可以通过这一特性给元素动态的添加属性

ruby 复制代码

<template>
  <div :title="message"></div>
</template>

我们可以通过改变message的值改变title属性的值，我们还可以动态让添加或移除某个属性，具体演示如下：

ruby 复制代码

<h2 @click="handle" :class="{'red':active}">属性是啥</h2>

当我们修改active的值为false或者true时，这个属性就会被移除，或添加

v-model

这个指令是在表单输入元素或组件上创建双向绑定。由于这个指令牵扯到了响应式，我会在后面的文章中进行介绍。

总结

这就是我们在vue中最常使用到的一些指令，使用这些指令比我们使用传统的方法更加的简单方便，例如条件判断v-if，还有循环v-for，等等。上述我介绍的这些指令只是介绍了一点基础的用法，还有许多更深层次的使用。如果感兴趣的小伙伴可以直接去vue的官方文档去学习。最重要的是我们要学会使用这些指令哦。喜欢的话，给我点点小赞！拜托

干货！vue的指令学习

前言

Vue的指令

v-text

v-html

v-if，v-else-if,v-else

v-show

v-for

v-on 缩写为@

v-bind 缩写为:

v-model

总结

v-on 缩写为`@`

v-bind 缩写为`:`