vue中的指令

指令是指使用 v- 开头的，常见的有：v-text，v-html，v-if，v-show，v-model，v-bind，v-on，v-for

---

v-text ：用于更新值，不会解析标签，和JavaScript中的innerTEXT类似

<p v-text="message"></p>

---

v-html：可以将解析标签，和JavaScript中的innerHTML类似

<template>
  <!-- 主体内容区域 -->
  <div>
    <!-- 使用v-html指令将html变量中的内容安全地渲染为HTML -->
    <span v-html="html"></span>
  </div>
</template>

<script setup>
// 定义一个包含HTML内容的字符串变量
var html="<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>"
</script>

---

v-if：条件渲染，根据表达式的真假来判断是否渲染元素（值为false会直接销毁，不存在)

<template>
  <div>
  <!-- 主体内容区域 -->
  <!-- 条件渲染一个 span 元素，展示动态绑定的 HTML 内容 -->
  <span v-html="html" v-if="is"></span>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个包含 HTML 字符串的变量，用于在模板中动态展示
var html="<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>";

// 使用 ref 创建一个响应式的布尔值变量 is，控制 span 元素的显示与隐藏
var is=ref(true);
</script>

---

v-show：控制元素的 CSS display 属性来切换显示和隐藏（值为false会隐藏，不会销毁）

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-show 控制 span 元素的显示与隐藏 -->
    <span v-show="is" v-html="html"></span>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个包含 HTML 字符串的变量，用于在模板中动态展示
var html = "<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>";

// 使用 ref 创建一个响应式的布尔值变量 is，控制 span 元素的显示与隐藏
var is = ref(true);
</script>

---

v-model：实现表单输入和其他元素的双向数据绑定

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-show 控制 span 元素的显示与隐藏 -->
    <span v-show="is" v-html="html"></span>

    <!-- 添加一个输入框并使用 v-model 实现双向绑定 -->
    <input type="text" v-model="inputValue" placeholder="请输入文本">
    <p>输入的内容：{{ inputValue }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个包含 HTML 字符串的变量，用于在模板中动态展示
var html = "<h1>Hello Vue 3!</h1><p>Welcome to the Vue 3 world.</p>";

// 使用 ref 创建一个响应式的布尔值变量 is，控制 span 元素的显示与隐藏
var is = ref(true);

// 使用 ref 创建一个响应式的字符串变量 inputValue，用于双向绑定输入框的内容
var inputValue = ref('');
</script>

---

v-bind：（通常缩写为 :）用于动态绑定属性到表达式的值

属性内部默认都是字符串，通过v-bind可以将值解剖成变量或者响应式数据

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-bind 动态绑定 disabled 属性 -->
    <button :disabled="count >= maxCount" @click="increment">点击增加计数</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个响应式的计数值
var count = ref(0);

// 定义一个最大计数值
var maxCount = 5;

// 定义一个方法 increment，用于增加计数值
function increment() {
  count.value++;
}

</script>

---

v-on：绑定事件监听器（可以缩写成 @）

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-on 绑定 click 事件 -->
    <button @click="increment">点击增加计数</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个响应式的计数值
var count = ref(0);

// 定义一个方法 increment，用于增加计数值
function increment() {
  count.value++;
}

</script>

---

v-for：循环渲染列表或对象的属性

<template>
  <div>
    <!-- 主体内容区域 -->
    <!-- 使用 v-for 渲染列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
       <span>值:{{ item }},索引:{{ index }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数，用于创建响应式引用
import { ref } from 'vue';

// 定义一个响应式的数组，用于存储列表项
var items = ref(['苹果', '香蕉', '橙子']);

</script>