前言

在上篇文章中我们学会了如何创建vue项目，并对vue各种文件进行了理解。在本篇文章的内容中我们将认识vue的各种指令，帮助你清楚的认识各种指令的使用方法和适用场景

初始化vue

通过指令初始化你的vue项目

npm create vue@latest

安装依赖

npm install

运行项目

npm run dev

来到vue文件夹中，我们先将assets和components这两个文件夹删除，将根组件App.vue中的内容全部删除。安装插件Vue VSCode Snippets ,有助于我们快速生成代码，提高我们的编程效率

通过vb3s生成根组件基本框架

• <template>声明组件的HTML结构
• <script setup>部分用于定义组件的响应式数据和行为
• <style>部分用于定义组件的样式

<template>
  <div id="app">
  </div>
</template>

<script setup>
</script>

<style lang="css" scoped></style>

1. 插值表达式 {{ }}和v-text

在vue中，一般使用插值表达式 {{ }}和v-text来更新元素的文本内容

• 将变量放入{{}} 中，Vue会自动监听这个数据的变化，并在数据发生变化时更新DOM中的文本内容。
• 通过v-text绑定变量，是vue的一个指令；原理和插值表达式相同--Vue会自动监听这个数据的变化，并在数据发生变化时更新DOM中的文本内容。

<template>
  <div id="app">
    <h2>{{ title }}</h2>
    <h2 v-text="title2"></h2>
</div>
</template>

<script setup>
const title = '你好 VUE'

const title2 = 'hello vue'

</script>

<style lang="css" scoped></style>

和VUE打个招呼吧~

2.v-html

• v-html可以帮助我们实现段落的换行

• 使用插值表达式：

<template>
  <div id="app">
    <h3>{{ content }}</h3>
   
  </div>
</template>

<script setup>

const content = '<p>你好 VUE</p><p>hello vue</p>'//文本

</script>

• 使用v-html

<template>
  <div id="app">
    <h3 v-html="content"></h3>
  </div>
</template>

<script setup>

const content = '<p>你好 VUE</p><p>hello vue</p>'//文本

</script>

3.v-on:绑定DOM事件

v-on:click=""/@click=""

制作一个按钮如何让他具有累加功能？在vue中通常使用 v-on:click="add"来绑定点击事件；在js中再打造点击触发的add函数行使功能。

• v-on:用于给dom绑定事件
• v-on可以简写为@

4.响应式

打造好的功能在行使后的数据并不能改变原有的html结构，但是利用响应式能够做到实时监听和更新

• 这种机制是通过框架内部的虚拟DOM或响应式系统实现的；
• 和innerHTML不同，当使用innerHTML来设置元素的内容时，实际上是直接操作DOM，当你频繁地操作大量DOM元素时将会导致很多性能问题。

利用ref()和reactive()实现响应式

ref()和reactive()是响应式的两个基础操作指令，以累加器为例应用响应式

ref()

ref指令用法：

• 利用import从node_modules中引入vue，利用ref创建一个响应式的数据引用
• 将响应式的值填入ref()中，将其声明为响应式
• 通过 .value 属性访问或修改响应式变量的值

<template>
  <div id="app"></div>
  <button v-on:click="add">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'//ES6的模块化引入：从node_modules中引入vue

let count = ref(0) //声明为响应式，只要这个值被用到，函数就会被重新调用

const add = () => {
  count.value++
}
</script>

reactive()

• 需要将变量通过 let state = reactive({ xxx})封装起来;声明一个state有这些响应式的属性

• 在所有变量前需要加上 state.，意为是在这个包中的xxx属性

• state并不是固定的，你当然可以用像let eee = reactive({ xxx})来表达

<template>
  <div id="app"></div>
  <button v-on:click="add"> {{ state.count }}</button>
</template>

<script setup>
import { reactive } from 'vue'

let state = reactive({
  count: 0
})

const add = () => {
  state.count++
}

</script>

5.v-bind：绑定DOM属性

v-bind 的使用场景非常广泛：

• 绑定 src、href、title 或其他任何 HTML 属性。
• 绑定 class 和 style，实现动态样式和类名的切换。
• 在自定义组件中，传递 props。

绑定src

通过绑定src可以将图片放到script 中

<img v-bind:src="url">

const url = '../public/favicon.ico'

绑定类名，动态添加类名

绑定类名，动态添加类名能实现很多动态效果， 在img中可以给图片加上许多样式，比如边框；

再通过v-bind绑定类名能够创造许多有趣的动态效果————比如动态边框和添加固定样式

实现动态边框效果

如何实现上图中的动态效果呢？我们可以通过 v-on和v-bind来完成

• 我们可以先打造一个函数，当点击事件触发时这个函数触发，所以用v-on绑定
• 通过v-bind绑定点击时触发的样式，在css中写入样式
• 我们可以通过点击事件改变布尔值来控制样式的添加与否，只有当active为true时样式才会被添加，当点击事件触发时active事件取反

<template>
  <div id="app"></div>

  <img src="../public/favicon.ico" @:click="handle" v-bind:class="{ bd: active }">
  <!-- bd这个类名加不加取决于active是否为ture -->
</template>

<script setup>
import { ref } from 'vue'

let active = ref(false)

const handle = () => {
  active.value = !active.value
}
</script>

<style lang="css" scoped>
img {
  width: 200px;
}

.bd {
  border: 5px solid rgb(5, 255, 118);
}
</style>

如此，效果达成；

固定添加样式

固定添加样式简单

• 为了美观我们可以使用v-bind绑定src，将链接放在script中
• v-bind绑定变量，触发点击事件添加样式
• 将v-bind简写为 ：

<template>
  <div id="app"></div>
  <img :src="url" @:click="handle" v-bind:class="name">
</template>

<script setup>
import { ref } from 'vue'

const url = '../public/favicon.ico'

const name = ref('')

const handle = () => {
  name.value = 'bd'
}
</script>

<style lang="css" scoped>
img {
  width: 200px;
}

.bd {
  border: 5px solid rgb(5, 255, 118);
}
</style>

当点击事件触发时图片会被添加样式

6.v-if，v-else：直接移除DOM结构

怎么实现如上效果？

常规

<template>
  <div class="app">
    <h2>{{ title }}</h2>
    <button @click="change"> 切换</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

let title = ref('Hello')

const change = () => {
  if (title.value === 'Hello') {
    title.value = '你好'
  } else {
    title.value = 'Hello'
  }
}

</script>

使用v-if指令

• 设置一个变量isEn，值为布尔值
• 如果这个变量为ture,就显示title1；title2的DOM结构消失
• 如果这个变量为false,就显示title2；title1的DOM结构消失
• 绑定点击事件，使用响应式，点击按钮时布尔值改变

<template>
  <div class="app">
    <h2 v-if="isEn">{{ title1 }}</h2>
    <h2 v-else="isEn">{{ title2 }}</h2>

    <button @click="change"> 切换</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

let title1 = ref('Hello')
let title2 = ref('你好')
let isEn = ref(true)

const change = () => {
  isEn.value = !isEn.value

}
</script>

<style></style>

7.v-show：隐藏DOM结构

• v-show能够通过CSS中的 display:none 隐藏DOM结构,性能比v-if更好
• 当 isEn 为ture时展示 title1
• 当 !isEn 为true时展示 title2

<template>
  <div class="app">
    <h2 v-show="isEn">{{ title1 }}</h2>
    <h2 v-show="!isEn">{{ title2 }}</h2>
    
    <button @click="change"> 切换</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

let title1 = ref('Hello')
let title2 = ref('你好')

let isEn = ref(true)

const change = () => {
  isEn.value = !isEn.value
}
</script>

小结

本文学习了{{}}和v-text,v-html,v-on,v-bind,v-if,v-show指令的使用方法和如何通过ref(),reactive()实现变量的响应式，在vue的学习中，我们还将实操图中所示的诸多方法，请多加练习