Vue.js前端框架教程4:Vue响应式变量和指令(Directives)

文章目录

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,提供了更多的响应式变量创建方式,包括 refreactive

  1. 使用 ref 创建响应式变量

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

javascript 复制代码
// Vue 3
import { ref } from 'vue';

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

在模板中使用:

html 复制代码
<template>
  <div>{{ message }}</div>
</template>
  1. 使用 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>
  1. 计算属性 computed

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

javascript 复制代码
import { ref, computed } from 'vue';

const count = ref(0);
const doubledCount = computed(() => count.value * 2);
  1. 侦听器 watchwatchEffect

watchwatchEffect 用于侦听响应式变量的变化,并在变化时执行某些操作。

javascript 复制代码
import { ref, watch } from 'vue';

const count = ref(0);

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

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

指令(Directives)

在 Vue.js 中,v-modelv-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 可以用于自定义组件,并且可以指定特定的 propevent 来创建更细粒度的双向绑定。

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

@clickv-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-ifv-else-ifv-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 更新和事件监听,使得开发更加高效和简洁。

相关推荐
码哥DFS8 分钟前
Flex布局原理
前端·css·css3
机器学习之心19 分钟前
小波增强型KAN网络 + SHAP可解释性分析(Pytorch实现)
人工智能·pytorch·python·kan网络
小样还想跑24 分钟前
axios无感刷新token
前端·javascript·vue.js
JavaEdge在掘金25 分钟前
MySQL 8.0 的隐藏索引:索引管理的利器,还是性能陷阱?
python
Java水解33 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
站大爷IP36 分钟前
Python办公自动化实战:手把手教你打造智能邮件发送工具
python
chao_7891 小时前
回溯题解——子集【LeetCode】二进制枚举法
开发语言·数据结构·python·算法·leetcode
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag1 小时前
报错 400 和405解决方案
vue.js·spring boot