前言

什么是vue的指令？

Vue.js 指令是 Vue 框架中一种特殊的语法特性，它们以 v- 开头，用于在 HTML 元素上嵌入应用程序的逻辑。

vue有哪些指令？

内容渲染指令：如 v-text 和 v-html，用于更新元素的文本或 HTML 内容。
属性绑定指令：如 v-bind，用于动态绑定 HTML 属性。
事件绑定指令：如 v-on或者@，用于绑定 DOM 事件处理器。
双向绑定指令：如 v-model，用于在表单控件和数据模型之间创建双向数据绑定。
条件渲染指令：如 v-if 和 v-show，用于根据条件显示或隐藏元素。
列表渲染指令：如 v-for，用于循环遍历数组或对象，并为每个项目渲染一个模板块。

v-text

v-text用于将数据绑定到DOM元素的文本内容上，能够替换元素的文本内容，而不是像{{}}那样插入文本内容。

<template>
  <div>
    <span v-text="message" class="message"></span>
    <span class="message1">{{ message1 }}</span>
  </div>
</template>

<script setup>
import { ref } from 'vue'
  const message = ref('敲代码')
  const message1 = ref('睡觉')
</script>

<style lang="css" scoped>
.message {
  font-size: 10px;
  color: #ea2929;
}
.message1 {
  font-size: 20px;
  color: aqua;
}
</style>

打印结果

分析

span标签的值被message替换，并且如果message的值改变，span标签的文本也会随之更新。

v-html

v-html能够将数据动态地绑定到HTML内容并将其渲染在浏览器视图上，而且它是响应式的，意味着当数据改变时，页面的HTML内容也会自动更新。与v-text的不同之处在于v-html是将绑定的表达式作为html解析。

<template>
  <div>
    <span v-text="message" class="message"></span>
    <span v-html="message1" class="message1"></span>
  </div>
  
</template>

<script setup>
import { ref } from 'vue'
  const message = ref('敲代码')
  const message1 = ref('<h2>睡觉</h2>')
</script>

<style lang="css" scoped>
.message {
  font-size: 10px;
  color: #ea2929;
}
.message1 {
  font-size: 20px;
  color: aqua;
}
</style>

打印结果

v-bind(:)和v-on(@click)

一般我们上传图片都是直接在img标签的src属性里面放入图片的链接然后加上一些样式就能显示该图片。

<style lang="css" scoped>
img {
  width: 500px;
  height: 500px;
  object-fit: cover;
}
</style>

<template>
  <div>
    <img src="https://pic3.zhimg.com/v2-dfaa1e8f5862e43205b8f25d3dc7b552_r.jpg?source=1940ef5c" alt="">
  </div>
</template>

使用v-bind(简写为:)就能将src属性绑定到vue实例的一个数据属性url上

<template>
  <div>
    <img v-bind:src="url" alt="">
    <img :src="url" alt="">
  </div>
</template>

<script setup>
import {ref} from 'vue'
const url ='https://pic3.zhimg.com/v2-dfaa1e8f5862e43205b8f25d3dc7b552_r.jpg?source=1940ef5c'
</script>

打印结果

v-bind还可动态绑定css类，根据vue实例中active数据为true或false来决定是否绑定一个类。再为该图片绑定一个点击事件@click(v-on),active默认值为false,鼠标点击时，将active的值取反。

bd为需要绑定的类

.bd{
  border: 8px solid #51bbd3;
}

<template>
  <div>
    <!-- <img v-bind:src="url" alt=""> -->
    <img :src="url" alt="" @click="change" :class="{'bd': active}">
  </div>
</template>

<script setup>
import { ref } from 'vue'
const url = 'https://pic3.zhimg.com/v2-dfaa1e8f5862e43205b8f25d3dc7b552_r.jpg?source=1940ef5c'
let active = ref(false)
const change = () => {
  active.value = !active.value
}
</script>

打印结果

v-model

v-model用于将在表单输入元素进行数据的双向绑定，双向数据绑定意味着当用户输入数据时，数据能被自动更新到特定的属性上。其本质是组合了v-bind和v-on指令的功能。

<template>
  <input v-model="message" placeholder="请输入昵称">
  <p>呢称: {{ message }}</p>
 </template>
 
 <script setup>
 import { ref } from 'vue'
  let message = ref('')
 </script>

打印结果

v-for

用于迭代数据集合(如数组或对象)，并为集合中的每一个项目渲染一组子DOM节点。根据数据动态地生成列表或其他重复性元素。

<template>
  <ul>
  <li v-for="(book, index) in books" :key="index">{{ book.name }}</li>
</ul>
</template>

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

let books = reactive([
        { id: 1, name: '《红楼梦》' },
        { id: 2, name: '《西游记》' },
        { id: 3, name: '《三国演义》' }
      ])
</script>

打印结果

分析

用reactive将books数组处理为响应式类型的数据，当数据发生变化时，与这些数据有关的视图也会发生变化。

v-if和v-show

v-if

用于元素的渲染或者移除。

当条件为true时，元素会被渲染并且添加到DOM元素中。
当条件为false时，元素会被销毁并从DOM中移除。

v-show

用于在元素已经存在的情况下切换其css的display属性，不管v-show为何值，元素都会留在DOM中，通过css中的display属性控制其是否可见。

当条件为true,display设置为默认值，元素可见。
当条件为false,display设置为none，元素不可见却仍存在于DOM中。

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

</template>

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

let title1 = '敲代码'
let title2 = '睡觉'
let isEn = ref(false)
const change = () => {
    isEn.value = !isEn.value
}
</script>

打印结果

总结

熟悉使用vue指令，能够提高开发效率、提高代码的可读性。

Vue的一些小指令

前言

v-text

v-html

v-bind(:)和v-on(@click)

v-model

v-for

v-if和v-show

总结