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

文章目录

        • Vue 2.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 元素绑定。

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

在模板中:

<div>{{ message }}</div>
Vue 3.x 中的响应式变量

Vue 3 引入了 Composition API,提供了更多的响应式变量创建方式,包括 refreactive

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

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

// Vue 3
import { ref } from 'vue';const message = ref('Hello Vue 3!');

在模板中使用:

<template><div>{{ message }}</div>
</template>
  1. 使用 reactive 创建响应式对象

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

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

在模板中使用:

<template><div>{{ state.message }} - {{ state.count }}</div>
</template>
  1. 计算属性 computed

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

import { ref, computed } from 'vue';const count = ref(0);
const doubledCount = computed(() => count.value * 2);
  1. 侦听器 watchwatchEffect

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

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

<!-- 文本输入 -->
<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 函数。

<!-- 点击按钮时调用 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 的缩写形式,它用于监听点击事件。这是一个常用的事件,特别是在处理按钮点击时。

<!-- 点击按钮时调用 this.someMethod -->
<button @click="someMethod">点击我</button><!-- 内联处理器 -->
<button @click="message = 'Hello Vue!'">点击我</button>

其他常用指令

  • v-bind:用于动态地绑定一个或多个属性,或一个组件 prop 到表达式。

    <img v-bind:src="imageSrc">
    <!-- 缩写 -->
    <img :src="imageSrc">
    
  • v-for:用于基于源数据多次渲染元素或模板块。

    <ul><li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    
  • v-ifv-else-ifv-else:用于条件性地渲染一块内容。

    <p v-if="user.isLoggedIn">欢迎回来,{{ user.name }}!</p>
    <p v-else>请登录。</p>
    
  • v-show:用于根据表达式的真假值切换元素的显示。

    <p v-show="isVisible">现在你看到我了。</p>
    
  • v-cloak:与 CSS 结合使用,用于在 Vue 实例被创建之前保持元素的原始内容隐藏。

    <style>[v-cloak] {display: none;}
    </style>
    <div v-cloak>我将在 Vue 实例创建后显示。
    </div>
    

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/491841.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国际网络专线是什么?有什么优势?

国际网络专线作为一种独立的网络连接方式&#xff0c;通过卫星或海底光缆等物理链路&#xff0c;将全球不同国家和地区的网络直接互联&#xff0c;为企业提供了可靠的通信渠道。本文将详细探讨国际网络专线的优势以及其广泛的应用场景。 国际网络专线的优势解析 1. 专属连接&am…

密码编码学与网络安全(第五版)答案

通过如下代码分别统计一个字符的频率和三个字符的频率&#xff0c;"8"——"e"&#xff0c;“&#xff1b;48”——“the”&#xff0c;英文字母的相对使用频率&#xff0c;猜测频率比较高的依此为&#xff09;&#xff0c;t,*,5&#xff0c;分别对应s,o,n,…

【功能安全】随机硬件失效导致违背安全目标的评估(FMEDA)

目录 01 随机硬件失效介绍 02 FMEDA介绍 03 FMEDA模板 01 随机硬件失效介绍 GBT 34590 part5

mybatis 的动态sql 和缓存

动态SQL 可以根据具体的参数条件&#xff0c;来对SQL语句进行动态拼接。 比如在以前的开发中&#xff0c;由于不确定查询参数是否存在&#xff0c;许多人会使用类似于where 1 1 来作为前缀&#xff0c;然后后面用AND 拼接要查询的参数&#xff0c;这样&#xff0c;就算要查询…

Web APIs - 第5章笔记

目标&#xff1a; 依托 BOM 对象实现对历史、地址、浏览器信息的操作或获取 具备利用本地存储实现学生就业表案例的能力 BOM操作 综合案例 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。 比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DO…

AI视频配音技术创新应用与商业机遇

随着人工智能技术的飞速发展&#xff0c;AI视频配音技术已经成为内容创作者和营销人员的新宠。这项技术不仅能够提升视频内容的吸引力&#xff0c;还能为特定行业带来创新的解决方案。本文将探讨AI视频配音技术的应用场景&#xff0c;并讨论如何合法合规地利用这一技术。 AI视频…

vlan和vlanif

文章目录 1、为什么会有vlan的存在2、vlan(虚拟局域网)1、vlan原理1. 为什么这样划分了2、如何实现不同交换机相同的vlan实现互访呢3、最优化的解决方法&#xff0c;vlan不同交换机4、vlan标签和vlan数据帧 5、vlan实现2、基于vlan的划分方式1、基于接口的vlan划分方式2、基于m…

Java每日一题(1)

给定n个数a1,a2,...an,求它们两两相乘再相加的和。 即&#xff1a;Sa1*a2a1*a3...a1*ana2*a3...an-2*an-1an-2*anan-1*an 第一行输入的包含一个整数n。 第二行输入包含n个整数a1,a2,...an。 样例输入 4 1 3 6 9 样例输出 117 答案 import java.util.Scanner; // 1:无…

Redis应用—6.热key探测设计与实践

大纲 1.热key引发的巨大风险 2.以往热key问题怎么解决 3.热key进内存后的优势 4.热key探测关键指标 5.热key探测框架JdHotkey的简介 6.热key探测框架JdHotkey的组成 7.热key探测框架JdHotkey的工作流程 8.热key探测框架JdHotkey的性能表现 9.关于热key探测框架JdHotke…

Elasticsearch:使用 Open Crawler 和 semantic text 进行语义搜索

作者&#xff1a;来自 Elastic Jeff Vestal 了解如何使用开放爬虫与 semantic text 字段结合来轻松抓取网站并使其可进行语义搜索。 Elastic Open Crawler 演练 我们在这里要做什么&#xff1f; Elastic Open Crawler 是 Elastic 托管爬虫的后继者。 Semantic text 是 Elasti…

python爬虫入门教程

安装python 中文网 Python中文网 官网 安装好后打开命令行执行&#xff08;如果没有勾选添加到Path则注意配置环境变量&#xff09; python 出现如上界面则安装成功 设置环境变量 右键我的电脑->属性 设置下载依赖源 默认的是官网比较慢&#xff0c;可以设置为清华大…

数据结十大排序之(冒泡,快排,并归)

接上期&#xff1a; 数据结十大排序之&#xff08;选排&#xff0c;希尔&#xff0c;插排&#xff0c;堆排&#xff09;-CSDN博客 前言&#xff1a; 在计算机科学中&#xff0c;排序算法是最基础且最重要的算法之一。无论是大规模数据处理还是日常的小型程序开发&#xff0c;…

游戏引擎学习第54天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们现在正专注于在游戏世界中放置小实体来代表所有的墙。这些实体围绕着世界的每个边缘。我们有活跃的实体&#xff0c;这些实体位于玩家的视野中&#xff0c;频繁更新&#xff0c;而那些离玩家较远的实体则以较低的频率运…

网络安全漏洞挖掘之漏洞SSRF

SSRF简介 SSRF(Server-Side Request Forgery:服务器端请求伪造是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。&#xff08;正是因为它是由服务端发起的&#xff0c;所以它能够请求到与它相连而与外…

33. Three.js案例-创建带阴影的球体与平面

33. Three.js案例-创建带阴影的球体与平面 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersObject可选参数…

Go有限状态机实现和实战

Go有限状态机实现和实战 有限状态机 什么是状态机 有限状态机&#xff08;Finite State Machine, FSM&#xff09;是一种用于建模系统行为的计算模型&#xff0c;它包含有限数量的状态&#xff0c;并通过事件或条件实现状态之间的转换。FSM的状态数量是有限的&#xff0c;因此称…

iPhone恢复技巧:如何从 iPhone 恢复丢失的照片

在计算机时代&#xff0c;我们依靠手机来捕捉和存储珍贵的回忆。但是&#xff0c;如果您不小心删除或丢失了手机上的照片怎么办&#xff1f;这真的很令人沮丧和烦恼&#xff0c;不是吗&#xff1f;好吧&#xff0c;如果您在 iPhone 上丢失了照片&#xff0c;您不必担心&#xf…

Linux高性能服务器编程 | 读书笔记 | 6. 高性能服务器程序框架

6. 高性能服务器程序框架 《Linux 高性能服务器编程》一书中&#xff0c;把这一章节作为全书的核心&#xff0c;同时作为后续章节的总览。这也意味着我们在经历了前置知识的学习后&#xff0c;正式进入了 Web 服务器项目的核心部分的学习 文章目录 6. 高性能服务器程序框架1.服…

前端的知识(部分)

11 前端的编写步骤 第一步:在HTML的页面中声明方法 第二步:在<script>中定义一个函数,其中声明一个data来为需要的数据 赋值一个初始值 第三步:编写这个方法实现对应的功能

Xcode

info.plist Appearance Light 关闭黑暗模式 Bundle display name 设置app名称&#xff0c;默认为工程名 Location When In Use Usage Description 定位权限一共有3个key 1.Privacy - Location When In Use Usage Description 2.Privacy - Location Always and When In U…