官网文档：API 参考 | Vue.js (vuejs.org)

Vue指令

vue-text

用于更新目标元素的文本内容。这个指令用于在HTML元素内渲染数据值

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span> 

示例

```HTML
  <div class="app">
    <h2>{{ title }}</h2>
    <h2 v-text="title2"></h2>
  </div>

const title = 'Hello World'
const title2 = '标题'

v-html

与v-text相比，它特别的地方在于，它可以插入 HTML 格式的内容

v-html 指令会告诉 Vue 把 htmlContent 中的 HTML 标签当作真正的 HTML 来解析和渲染

示例

<h3 v-html="content"></h3>

const content = '<i>床前明月光</i>'

如果你只是想显示 "床前明月光" 这句话，你可能会使用 v-text 或者双大括号 {{ }} 来显示，但是这样斜体的效果不会被应用

v-on

给元素添加事件监听器，使得当特定的事件发生时，可以执行相应的函数或方法

示例

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

import { ref } from 'vue'
// 创建一个响应式的计数器
const count = ref(0)
// 定义一个函数，当按钮被点击时增加计数器的值
const add = () => {
  count.value++
}

每当有人点击这个按钮，Vue 就会看到 v-on:click 或者 @click，然后它知道应该去执行 add 方法，于是屏幕上按钮的数字就会更新。

v-bind

用于动态地将属性绑定到表达式的指令

  <div class="app">
    <img v-bind:src="url" alt="" @click="handle" v-bind:class="{ 'bd': active }">
    // <img v-bind:src="url" alt="" @click="handle" v-bind:class="name">
  </div>

import { ref } from 'vue'
const url = 'img.jpg'
let active = ref(false)
//let name = ref('')
const handle = () => {
  active.value = true
  //name.value='bd'
}

img {
  width: 300px;
}
.bd {
  border: 8px solid #5e5281;
}

1. 模板：

   • 一个 <img> 元素，其 src 属性绑定到 url 数据，alt 属性为空。
   • 使用 @click 监听点击事件，调用 handle 函数。
   • 使用 v-bind:class 动态绑定一个 CSS 类 'bd'，取决于 active 数据的状态。

2. 脚本：

   • 导入 Vue 的 ref 函数，用于创建响应式数据。
   • 定义 url 数据，值为 'img.jpg'。
   • 定义 active 数据，初始值为 false。
   • 定义 handle 函数，当被调用时，将 active 设置为 true。注释掉的部分展示了一个替代方案，即直接设置 name 为 'bd'。

3. 样式：

   • 图像宽度设置为 300px。
   • 定义 .bd 类，给元素添加边框。

通过以上设置，点击图像时，会触发 handle 函数，将 active 设置为 true，进而使图像应用 .bd 类，显示边框效果。

点击图片

v-if

用于根据表达式的真假值来决定是否渲染指定的 DOM 元素。当 v-if 后面的表达式结果为真，那么绑定 v-if 的元素及其子元素将被添加到 DOM 中；如果表达式结果为假，则该元素及其子元素将不会被渲染，即从 DOM 中移除。

示例

<div class="app">
  </div>
  <div class="main">
    <h2 v-if="isEnglish">{{title1}}</h2>
    <h2 v-else="isEnglish">{{title2}}</h2>
    <button @click="change">切换</button>
  </div>

  import { ref } from 'vue'
  let title1 = 'Hello'
  let title2 = '你好'
  let isEnglish = ref(true)
  const change = () => {
    isEn.value = !isEnglish.value
  }

点击按钮时，标题会在英语和中文之间切换

如果我们想移除某个元素，也可以通过v-if实现（不写v-else里的语句）

点击切换，我们发现DOM结构也没有了

v-show

v-show是 Vue.js 中的另一个条件渲染指令，但它的工作方式与 v-if 有所不同。v-show 并不会从 DOM 中移除元素，而是通过设置元素的 CSS display 属性为none来隐藏元素

<h2 v-show="isEnglish">{{ title1 }}</h2>

点击切换，display属性被设置为了none：

v-for

v-for 是 Vue.js 中一个非常强大的指令，用于循环渲染数据列表。它可以遍历数组、对象或整数范围，并为每个项目创建一个模板实例。

v-for 指令的基本语法是 v-for="(item, index) in items"，其中 items 是你要遍历的数据源，item 是当前迭代项，index 是当前项的索引。

下面是一个基本的使用示例：

<div>
    <ul>
      <li v-for="(item, index) in arr" key="index">
      {{ item }}
      </li>
    </ul>
</div>

let arr = ['html', 'css', 'js', 'vue']  

在这个例子中，v-for 指令将为 arr 数组中的每一项生成一个 <li> 元素，并将其内容设置为当前项的值（即 'html'、'css'、'js' 和 'vue'）。每个 <li> 元素都会有一个基于其在数组中的位置的 key 属性

响应式

ref()

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

示例

import { ref } from 'vue';//从 Vue 导入 ref

export default {
  setup() {
    const count = ref(0); // 这将创建一个初始值为 0 的响应式引用

    function increment() {
      count.value++; // 通过 .value 访问值
    }

    return {
      count,
      increment
    };
  }
}

在这个例子中：

当访问或修改 ref 的值时，需要通过 .value 属性进行。这是因为 ref 返回一个只有一个属性的对象，即 value，它持有实际的值。

watch()

watch 用于监听一个属性值，当该属性值变更时，会自动触发回调。与computed()不同，watch 更适合处理异步操作或执行较为复杂的逻辑。

格式为： `watch(xx,(newVal,oldVal)=>{

})`

示例

我们来看一个穿衣建议小案例：

<!-- 显示当前温度和建议穿衣的文本 -->
 <div>
    <h2>当前温度：{{ temp }}</h2>
    <h3>建议穿衣：{{ suggest }}</h3>
    
    <!-- 两个按钮用于增加和减少温度，分别调用 add 和 minus 方法 -->
    <button @click="minus">-</button>
    <button @click="add">+</button>
  </div>

import { ref, watch } from 'vue'
let temp = ref(20)//使用 ref 创建响应式数据 temp 和 suggest。
let suggest = ref('夹克')

//add 和 minus 方法用于改变 temp 的值。
const add = () => {
  temp.value += 5
}
const minus = () => {
  temp.value -= 5
}
//watch 函数监听 temp 的变化。当 temp 的值改变时，根据新值 newval 更新 suggest 的值，提供穿衣建议。
watch(temp, (newval, oldval) => {
  // console.log(newval, oldval);
  if (newval >= 30) {
    suggest.value = '短袖'
  } else if (newval >= 20) {
    suggest.value = '夹克'
  } else if (newval >= 0) {
    suggest.value = '棉袄'
  } else {
    suggest.value = '羽绒服'
  }
})

watch 在这里用于实时监测 temp 的变化，并根据温度的不同区间提供不同的穿衣建议。每当用户通过按钮改变温度时，watch 会捕捉到 temp 的变化，并相应地更新 suggest 的值，确保显示的穿衣建议始终与当前温度相匹配。

computed()

用于定义依赖其他数据属性的计算属性。computed()性能更好，会有缓存，逻辑重复的情况下不会重复执行

格式为：`const xxx = computed(() => {

})`

示例

同样是穿衣建议，computed()这么写：

import { ref, computed } from 'vue'

let temp = ref(20)
// let suggest = ref('夹克')

const add = () => {
  temp.value += 5
}

const minus = () => {
  temp.value -= 5
}

const suggest = computed(() => {
  if (temp.value >= 30) {
    return '短袖'
  } else if (temp.value >= 20) {
    return '夹克'
  } else if (temp.value >= 0) {
    return '棉袄'
  } else {
    return '羽绒服'
  }

computed()与wacth()

其实二者绝大多数情况下是通用的，但是也有细微差别

我们通过一个通俗的比喻来解释：

想象我们正在厨房做饭，咱面前有一堆食材和一个计算器。

• computed 就像是一个自动化的食谱，输入食材（数据），食谱（计算属性）会根据这些食材计算出一道菜（结果）。每当更换食材时，食谱会自动更新结果，但只有在食材真的变化时才重新计算，不会浪费时间和能源。computed 是高效的，因为不必每次都从头开始制作同样的菜肴。
• watch 则更像是一个提示闹铃，设定好警报，一旦冰箱里的某种食材数量变了，提示就会响起，提醒你采取行动，比如打电话订购更多食材。watch 允许你做出反应，比如在食材变化时进行异步操作（如打电话订货），或是做一些更复杂的决定（如考虑冰箱里还有哪些食材，决定订购什么）。

所以，computed 更适合于那些只需要基于现有数据计算结果的情况，而 watch 则更适合于需要在数据变化时做出反应或执行更复杂逻辑的场景。两者都是为了帮助你更好地管理和响应数据的变化。