Vue的学习 —— ＜vue响应式基础＞

news2024/12/22 16:14:56

目录

前言

正文

单文件组件

什么是单文件组件

单文件组件使用方法

数据绑定

什么是数据绑定

数据绑定的使用方法

响应式数据绑定

响应式数据绑定的使用方法

ref() 函数

reactive()函数

toRef()函数

toRefs()函数

案例练习

前言

Vue.js 以其高效的数据绑定和视图更新机制广受开发者喜爱。这一特性主要依赖于其独特的响应式系统设计，它能够实时监测数据变化并自动驱动相应的视图更新。简单来说，就是当数据发生变化时，依赖该数据的视图会自动进行更新。这种“响应”是通过在初始化阶段对数据对象属性进行深度观测和转换来实现的。

正文

单文件组件

什么是单文件组件

在第二章中，我们使用Vite创建了一个Vue项目，并且注意到目录结构中包含了一些扩展名为.vue的文件。这些.vue文件实际上是用来定义Vue的单文件组件。在Vue中，单文件组件是一种特殊的文件格式，用于构建用户界面。一个.vue文件可以看作是一个独立的组件单元，它包含了组件的模板、脚本和样式。这种格式使得组件的代码更加清晰和易于维护。在每个.vue文件中，你可以编写HTML结构作为模板部分，JavaScript代码作为脚本部分，以及CSS样式作为样式部分。

通过使用单文件组件，可以将组件的逻辑、结构和样式封装在一起，使得组件的复用和组织更加方便。这有助于提高代码的可读性和可维护性，以及加快开发速度。

每个单文件组件由模板、样式和逻辑3个部分构成：

  1. 模板：模板用于搭建当前组件的DOM结构，其代码写在<template>标签中

  2. 样式：样式是指通过CSS代码为当前组件设置样式，其代码写在<style>标签中

  3. 逻辑：逻辑是指通过JavaScript代码处理组件的数据与业务，其代码写在<script>标签中

下面是一个单文件组件的代码结构：

<template>
<!-- 此处编写组件的结构,HTML代码 -->
</template>
<script>
/* 此处编写组件的JavaScript代码 */
</script>
<style>
/* 此处编写组件的样式 */
</style>

单文件组件使用方法

下面演示如何使用单文件组件：

  1. 在D:\webProject目录下创建Demo02文件夹，在cmd命令行中使用Vite创建一个名为vue-demo项目用于存放本案例的演示代码

  2. 项目创建完成后，执行如下命令进入项目目录并启动项目：

    cd D:\webProject\Demo02\vue-demo
yarn -i 
yarn dev

  3. 使用VS Code编辑器打开D:\webProject\Demo02\vue-demo项目目录

  4. 将项目目录下src\style.css文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果

  5. 创建src\components\SingleFileComponent.vue文件，该文件是名为singleFileComponent的单文件组件，并写入如下代码：

    <template>
  <div id="singleFileComponent">我是一个单文件组件</div>
</template>
<style>
#singleFileComponent {
  font-size: 22px;
  font-weight: bold;
}
</style>

  6. 修改src\main.js文件，切换页面中显示的组件并取消在main.js文件中引入第四步删除的样式文件

    // import './style.css' 删除这一行
import App from './components/Demo.vue'

  7. 保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，SingleFileComponent组件的页面效果如下图所示

数据绑定

什么是数据绑定

Vue通过数据绑定实现了数据与页面相分离，从而实现了数据驱动视图的效果。即将页面中的数据分离出来，放到组件的<script>标签中，通过程序操作数据，并且当数据改变时，页面会自动发生改变。

数据绑定分为定义数据和输出数据：

  1. 定义数据：由于数据和页面是分离的，在实现数据显示之前，需要先在<script>标签中定义组件所需的数据，伪代码如下：

    <script>
export default {
  setup() {
    return {
      数据名: 数据值,
      ……
    }
  }
}
</script>

  2. 输出数据：Vue为开发者提供了Mustache语法（又称为双大括号语法），将数据输出到页面中，伪代码如下：

    <template>
    <div>
        {{ 数据名 }}
        <!-- 在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型，代码如下 -->
        {{ 数据名 === '张' ? '张先生' : 数据名}}
    </div>
</template>

为了让代码更简洁，Vue 3提供了setup语法糖（Syntactic Sugar），使用它可以简化上述语法，提高开发效率，使用setup语法糖来定义数据的语法格式如下：

<script setup>
const 数据名 = 数据值
</script>

数据绑定的使用方法

下面演示数据绑定的使用方法：

  1. 创建src\components\DataBind.vue文件用于存放演示代码
  2.  定义message数据，并在模板中输出，DataBind.vue文件代码如下
<template>
	<!-- 输出数据 -->
    {{ message }}
</template>
<script setup>
// 定义数据
const message = "操千曲而后晓声，观千剑而后识器"
</script>
<style>
</style>

3. 修改src\main.js文件，切换页面中显示的组件

import App from './components/DataBind.vue'

4. 保存代码，使用浏览器访问http://127.0.0.1:5173/，最终效果如下图所示：

响应式数据绑定

响应式数据绑定是Vue开发中一种重要的技术，用于实现页面数据的实时更新。当数据发生变化时，页面能够自动更新，而不需要手动重新渲染，如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。下面是关于响应式数据绑定的详细解释：

  1. 数据与视图的同步：在Vue项目开发中，通常会有数据和视图两个部分。数据存储在变量中，而视图是数据的呈现。响应式数据绑定能够确保当数据发生变化时，视图会自动更新。

  2. 依赖关系：要实现数据与视图的同步，我们需要明确数据与视图之间的依赖关系。当数据发生变化时，视图需要重新渲染，反之，当视图因为某些操作（如用户输入）发生变化时，也需要能够反映到数据上。

总的来说，响应式数据绑定是前端开发中的一个重要概念，它使得开发者能够更加专注于业务逻辑的实现，而不需要过多关注数据的同步问题。

Vue为开发者提供了以下四个函数用来定义响应式数据：

  1. ref()函数：用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。使用ref()函数操作响应式数据的伪代码如下：

    // 定义响应式数据
响应式数据 = ref(数据)
// 修改响应式数据
响应式数据.value = 新的值

  2. reactive()函数：用于创建一个响应式对象或数组，将普通的对象或数组作为参数传给该函数即可。使用reactive()函数操作响应式数据的伪代码如下：

    // 定义响应式对象或数组
响应式对象或数组 = reactive(普通的对象或数组) 
// 修改响应式对象
响应式对象.属性 = 新值
// 修改响应式数组
响应式数组[index] = 新值

  3. toRef()函数：toRef()函数用于将响应式对象中的单个属性转换为响应式数据，使用toRef()函数操作响应式数据的伪代码如下：

    响应式数据 = toRef(响应式对象, '属性名')

  4. toRefs()函数：

响应式数据绑定的使用方法

ref() 函数

  1. 创建src\components\RefDemo.vue文件用于存放演示代码，写入如下代码：

    <template>
    <!-- 输出message响应式数据 -->
    {{ message }}
</template>
<script setup>
import { ref } from 'vue';
​
const message = ref("不积跬步，无以至千里。不积小流，无以成江河")
// 在页面加载完成后3秒修改响应式数据内容
setTimeout(() => message.value = '会当凌绝顶，一览众山小' , 3000)
​
</script>
<style>
</style>

  2. 修改src\main.js文件，切换页面中显示的组件

    import App from './components/RefDemo.vue'

  3. 保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后初始效果如下图所示：

  4. 等待3秒后的页面效果如下图所示:

reactive()函数

  1. 创建src\components\ReactiveDemo.vue文件用于存放演示代码，写入如下代码：

    <template>
    {{ obj.message }}
</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '穷且益坚，不坠青云之志' })
​
setTimeout(() => obj.message = '人有逆天之时，天无绝人之路', 3000)
</script>

  2. 修改src\main.js文件，切换页面中显示的组件

    import App from './components/ReactiveDemo.vue'

  3. 保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后初始效果如下图所示：

  4. 等待3秒后的页面效果如下图所示:

toRef()函数

  1. 创建src\components\ToRefDemo.vue文件用于存放演示代码，写入如下代码：

    <template>
    <div>message的值：{{ message }}</div>
    <div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
​
const obj = reactive({ message: '三更灯火五更鸡，正是男儿读书时' })
​
const message = toRef(obj, 'message')
// 延时3秒修改响应式对象属性
setTimeout(() => message.value = '咬定青山不放松，立根原在破岩中', 3000)
​
</script>

  2. 修改src\main.js文件，切换页面中显示的组件

    import App from './components/ToRefDemo.vue'

  3. 保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后初始效果如下图所示：

  4. 等待3秒后的页面效果如下图所示:

toRefs()函数

  1. 创建src\components\ToRefsDemo.vue文件用于存放演示代码，写入如下代码：

    <template>
    <div>message的值：{{ message }}</div>
    <div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
​
const obj = reactive({ message: '盛年不重来，一日难再晨' })
​
let { message } = toRefs(obj)
​
setTimeout(() => message.value = '及时当勉励，岁月不待人', 3000)
</script>

  2. 修改src\main.js文件，切换页面中显示的组件

    import App from './components/ToRefsDemo.vue'

  3. 保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后初始效果如下图所示：

  4. 保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后初始效果如下图所示：

案例练习

结合Vue3组合式API，在页面中实时显示当前时间，时间显示年-月-日 时:分:秒.毫秒。

案例实现：

<template>
    <div>
        {{ current }}
    </div>
</template>
<style></style>
<script setup>
import { ref,reactive,onMounted } from 'vue'
const current = ref('')
const flush = () => {
      let now = new Date();
      let hours = now.getHours().toString().padStart(2, '0');
      let minutes = now.getMinutes().toString().padStart(2, '0');
      let seconds = now.getSeconds().toString().padStart(2, '0');
      let milliseconds = now.getMilliseconds().toString().padStart(3, '0');

      // 格式化为 "yyyy-MM-dd HH:mm:ss.sss"
      let formattedTime = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${hours}:${minutes}:${seconds}.${milliseconds}`;

      current.value = formattedTime
}
setInterval(flush,1)
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nginx - location中的匹配规则和动态Proxy

Nginx - location中的匹配规则和动态Proxy

文章目录 官网location 规则详解动态Proxy使用多个 if 指令指定不同的 proxy_pass根据参数选择不同的 proxy_pass 官网 https://nginx.org/en/docs/http/ngx_http_core_module.html#location location 规则详解 Nginx的location指令工作原理如下&#xff1a; 位置匹配&#…
阅读更多...
【中级软件设计师】上午题3-数据结构（查漏补缺版）

【中级软件设计师】上午题3-数据结构（查漏补缺版）

上午题3-数据结构 0 前言1 时间、空间复杂度2 串2.1 串的模式匹配 3 矩阵4 图4.1 邻接矩阵和邻接表 5 查找6 哈希表、7 树7.1 B树 0 前言 因为我之前考研系统地学习过数据结构和操作系统&#xff0c;这两部分的笔记不完整 1 时间、空间复杂度 指数<阶乘<n次方阶 使用队…
阅读更多...
Java入门基础学习笔记22——程序流程控制

Java入门基础学习笔记22——程序流程控制

程序流程控制&#xff1a;控制程序的执行顺序。 程序有哪些执行顺序&#xff1f; 顺序、分支和循环。 分支结构&#xff1a; if、switch 循环&#xff1a; for、while、do-while 顺序结构是程序中最简单最基本的流程控制&#xff0c;没有特定的语法结构&#xff0c;按照代码…
阅读更多...
01-02-5

01-02-5

1、单链表中按位置查找 a.原理 通过传递的位置&#xff0c;返回该位置对应的地址&#xff0c;放到主函数定义的指针变量中。 我们认为位置从&#xff1a;有数据的节点开始计数 即如下结构&#xff1a; 查找位置&#xff0c;就是返回该位置对应的空间地址。 b.代码说明 Ⅰ…
阅读更多...
深度剖析深度神经网络（DNN）：原理、实现与应用

深度剖析深度神经网络（DNN）：原理、实现与应用

目录 引言 一、DNN基本原理 二、DNN核心算法原理 三、DNN具体操作步骤 四、代码演示 引言 在人工智能和机器学习的浪潮中&#xff0c;深度神经网络&#xff08;Deep Neural Network&#xff0c;简称DNN&#xff09;已经成为了一种非常重要的工具。DNN模仿人脑神经网络的结…
阅读更多...
2023年数维杯国际大学生数学建模挑战赛A题复合直升机的建模与优化控制问题解题全过程论文及程序

2023年数维杯国际大学生数学建模挑战赛A题复合直升机的建模与优化控制问题解题全过程论文及程序

2023年数维杯国际大学生数学建模挑战赛 A题 复合直升机的建模与优化控制问题 原题再现&#xff1a; 直升机具有垂直起降等飞行能力&#xff0c;广泛应用于侦察、运输等领域。传统直升机的配置导致旋翼叶片在高速飞行过程中受到冲击波的影响&#xff0c;难以稳定飞行。为了在保…
阅读更多...
【轮转数组】力扣python

【轮转数组】力扣python

1.python切片 这里nums[:]代表列表 class Solution:def rotate(self, nums: List[int], k: int) -> None:nlen(nums)nums[:]nums[-k%n:]nums[:-k%n] 2.边pop边push 0代表插入的位置 class Solution:def rotate(self, nums: List[int], k: int) -> None:nlen(nums)fo…
阅读更多...
[Linux] 入门指令详解

[Linux] 入门指令详解

目录 ls指令 pwd指令 whoami指令 cd指令 clear指令 touch指令 mkdir指令 rmdir指令 rm指令 man指令 cp指令 mv指令 cat指令 tac指令 more指令 less指令 head指令 tail指令 如何读取文件中间某一段内容&#xff1f; date指令 cal指令 find指令 which指令…
阅读更多...
Java Web开篇

Java Web开篇

Java Web开篇 大纲 整个内容梳理 具体案例 整个内容梳理 这是前端和后端组成的系统的框架结构
阅读更多...
自动攻丝机进出料激光检测 进料出料失败报警循环手动及关闭报警退出无限循环

自动攻丝机进出料激光检测 进料出料失败报警循环手动及关闭报警退出无限循环

/**************进料检测********************/ /***缺料无限次循环 手动退出 超时报警*******/ void check_Pon() // { zstatus0; //报警计数器归零 Signauto1; …
阅读更多...
使用Pyramid、Mako和PyJade生成 HTML

使用Pyramid、Mako和PyJade生成 HTML

Pyramid 是一个流行的 Python Web 框架&#xff0c;而 Mako 和 PyJade 是用于模板引擎的工具&#xff0c;它们可以与 Pyramid 配合使用来生成 HTML 内容。但是在实际使用中还是有些差别的&#xff0c;尤其会遇到各种各样的问题&#xff0c;下面我将利用我所学的知识一一为大家解…
阅读更多...
Python | Leetcode Python题解之第87题扰乱字符串

Python | Leetcode Python题解之第87题扰乱字符串

题目&#xff1a; 题解&#xff1a; class Solution:def isScramble(self, s1: str, s2: str) -> bool:cachedef dfs(i1: int, i2: int, length: int) -> bool:"""第一个字符串从 i1 开始&#xff0c;第二个字符串从 i2 开始&#xff0c;子串的长度为 le…
阅读更多...
MyBatis——MyBatis 参数处理

MyBatis——MyBatis 参数处理

一、单个简单类型参数 简单类型包括&#xff1a; byte short int long float double char Byte Short Integer Long Float Double Character String java.util.Date java.sql.Date parameterType 属性&#xff1a;告诉 MyBatis 参数的类型 MyBatis 自带类型自动推断机制…
阅读更多...
部署Discuz论坛项目

部署Discuz论坛项目

DIscuz 是由 PHP 语言开发的一款开源社交论坛项目。运行在典型的LNMP/LAMP 环境中。 安装MySQL数据库5.7 主机名IP地址操作系统硬件配置discuz-db192.168.226.128CentOS 7-mini-20092 Core/4G Memory 修改主机名用来自己识别 hostnamectl set-hostname discuz-db #重连远程…
阅读更多...
虚拟资源在线交易服务平台源码 线上虚拟商品交易平台搭建

虚拟资源在线交易服务平台源码 线上虚拟商品交易平台搭建

在信息爆炸的时代&#xff0c;虚拟资源、素材、源码系统等等以其独特的魅力&#xff0c;逐渐成为人们日常生活和工作中不可或缺的一部分。如何高效地获取、管理和交易这些虚拟资源&#xff0c;分享一款虚拟资源在线交易服务平台源码&#xff0c;轻松搭建线上虚拟商品交易平台&a…
阅读更多...
【全开源】智慧小区物业管理小程序基于FastAdmin+UniApp

【全开源】智慧小区物业管理小程序基于FastAdmin+UniApp

基于FastAdminUniApp开发的智慧小区物业管理小程序&#xff0c;包含小区物业缴费、房产管理、在线报修、业主活动报名、在线商城等功能。为物业量身打造的智慧小区运营管理系统&#xff0c;贴合物业工作场景&#xff0c;轻松提高物业费用收缴率&#xff0c;更有功能模块个性化组…
阅读更多...
HTML静态网页成品作业(HTML+CSS+JS)——华为商城网页(1个页面)

HTML静态网页成品作业(HTML+CSS+JS)——华为商城网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现首页图片切换轮播效果&#xff0c;共有1个页面…
阅读更多...
【网络安全产品互联互通 告警信息资产信息】相关思维导图

【网络安全产品互联互通 告警信息资产信息】相关思维导图

近日&#xff0c;在某客户安全建设项目中&#xff0c;涉及安全告警事件的梳理上报。在整理及学习中发现最近&#xff08;以19年等保2.0为参考分隔“最近”&#xff09;发布的可参考标准&#xff0c;因此做了思维导图的整理。 PS&#xff1a;标准中存在引用的情况&#xff0c;过…
阅读更多...
OpenHarmony NAPI 使用Cmake 编译C++ .so 并ets调用

OpenHarmony NAPI 使用Cmake 编译C++ .so 并ets调用

一、前言 这两年多随着国产化兴起&#xff0c;国内越来越多的项目都要求支持国产化系统&#xff0c;并且随着OpenHarmony 开源&#xff0c;更多的人都想分一杯羹。因此&#xff0c;我们公司也要求&#xff0c;所有产品的都需要支持开源鸿蒙OpenHarmony。 对于我们这边的设备&am…
阅读更多...
Mybatis进阶详细用法

Mybatis进阶详细用法

目录 条件构造器 案例 自定义SQL 案例 Service接口 案例 综合案例 条件构造器 案例 Testvoid testQueryMapper() {// 创建 QueryWrapper 实例QueryWrapper<User> queryWrapper new QueryWrapper<>();queryWrapper.select("id," "username,&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023