Vue.js前端框架教程4：Vue响应式变量和指令（Directives）

文章目录

- - - [Vue 2.x 中的响应式变量](#Vue 2.x 中的响应式变量)
    - - [Vue 3.x 中的响应式变量](#Vue 3.x 中的响应式变量)
    - 指令（Directives）
    - - v-model
      - v-on
      - @click
  - 其他常用指令

在 Vue 中，响应式变量是与 Vue 实例的数据绑定系统紧密相关的。它们允许你创建数据和 DOM 之间的双向绑定，这意味着当响应式变量的值发生变化时，视图会自动更新以反映这些变化。Vue 提供了几种创建响应式变量的方法，这些方法随着 Vue 版本的不同而有所变化。

Vue 2.x 中的响应式变量

在 Vue 2.x 中，响应式变量通常是通过 data 函数返回的对象中的属性来创建的。这些属性可以通过不同的指令（如 v-model）与模板中的 DOM 元素绑定。

javascript 复制代码

// Vue 2.x
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

在模板中：

html 复制代码

<div>{{ message }}</div>

Vue 3.x 中的响应式变量

Vue 3 引入了 Composition API，提供了更多的响应式变量创建方式，包括 ref 和 reactive。

使用 ref 创建响应式变量

ref 用于创建一个响应式的引用，它包装了一个值，使得这个值是响应式的。

javascript 复制代码

// Vue 3
import { ref } from 'vue';

const message = ref('Hello Vue 3!');

在模板中使用：

html 复制代码

<template>
  <div>{{ message }}</div>
</template>

使用 reactive 创建响应式对象

reactive 用于创建一个响应式的对象，对象的所有属性都是响应式的。

javascript 复制代码

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello Vue 3!',
  count: 0
});

在模板中使用：

html 复制代码

<template>
  <div>{{ state.message }} - {{ state.count }}</div>
</template>

计算属性 computed

computed 用于创建一个基于响应式变量的计算值。

javascript 复制代码

import { ref, computed } from 'vue';

const count = ref(0);
const doubledCount = computed(() => count.value * 2);

侦听器 watch 和 watchEffect

watch 和 watchEffect 用于侦听响应式变量的变化，并在变化时执行某些操作。

javascript 复制代码

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

Vue 3 的响应式系统提供了更多的灵活性和功能，使得状态管理更加直观和强大。通过使用 ref、reactive、computed 和 watch，你可以构建复杂的响应式逻辑，而 Vue 会自动处理 DOM 的更新，以确保视图与数据保持同步。

指令（Directives）

在 Vue.js 中，v-model、v-on 和 @click 是指令（Directives），它们用于在模板中创建响应式数据绑定和事件处理。下面是这些指令的详细解释和用法：

v-model

v-model 是一个在表单控件元素上创建双向数据绑定的指令。它会自动根据控件类型选择合适的方法来更新元素的值。

html 复制代码

<!-- 文本输入 -->
<input v-model="message" placeholder="编辑我">

<!-- 多行文本输入 -->
<textarea v-model="message" placeholder="编辑我"></textarea>

<!-- 选择框 -->
<select v-model="selectedOption">
  <option disabled value="">请选择一个选项</option>
  <option>选项 A</option>
  <option>选项 B</option>
  <option>选项 C</option>
</select>

在 Vue 3 中，v-model 可以用于自定义组件，并且可以指定特定的 prop 和 event 来创建更细粒度的双向绑定。

v-on

v-on 是一个用于监听 DOM 事件的指令。它可以让你在元素上绑定一个事件监听器，当事件触发时，执行指定的 JavaScript 函数。

html 复制代码

<!-- 点击按钮时调用 this.someMethod -->
<button v-on:click="someMethod">点击我</button>

<!-- 缩写 -->
<button @click="someMethod">点击我</button>

<!-- 内联处理器 -->
<button v-on:click="message = 'Hello Vue!'">点击我</button>

v-on 也可以用于监听组件事件，这在父子组件通信中非常有用。

@click

@click 是 v-on:click 的缩写形式，它用于监听点击事件。这是一个常用的事件，特别是在处理按钮点击时。

html 复制代码

<!-- 点击按钮时调用 this.someMethod -->
<button @click="someMethod">点击我</button>

<!-- 内联处理器 -->
<button @click="message = 'Hello Vue!'">点击我</button>

其他常用指令

v-bind：用于动态地绑定一个或多个属性，或一个组件 prop 到表达式。
html 复制代码
```
<img v-bind:src="imageSrc">

<img :src="imageSrc">
```
v-for：用于基于源数据多次渲染元素或模板块。
html 复制代码
```
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
```

v-if、v-else-if、v-else：用于条件性地渲染一块内容。

html 复制代码

<p v-if="user.isLoggedIn">欢迎回来，{{ user.name }}！</p>
<p v-else>请登录。</p>

v-show：用于根据表达式的真假值切换元素的显示。
html 复制代码
```
<p v-show="isVisible">现在你看到我了。</p>
```
v-cloak：与 CSS 结合使用，用于在 Vue 实例被创建之前保持元素的原始内容隐藏。
html 复制代码
```
<style>
  [v-cloak] {
    display: none;
  }
</style>
<div v-cloak>
  我将在 Vue 实例创建后显示。
</div>
```

这些指令是 Vue.js 模板语法的核心部分，它们提供了一种声明式的方式来处理 DOM 更新和事件监听，使得开发更加高效和简洁。