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

目录

前言

正文

单文件组件

什么是单文件组件

单文件组件使用方法

数据绑定

什么是数据绑定

数据绑定的使用方法

响应式数据绑定

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

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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2024统计建模中国新质生产力统计测度与时空演变及其驱动因素研究

2024统计建模中国新质生产力统计测度与时空演变及其驱动因素研究

高质量成品论文46页word版本1.5w字书写完整数据集1000行py代码一等奖论文&#xff01;这里仅展示部分内容&#xff0c;完整版在下面的链接。 【1.5w字全网最佳】2024统计建模大赛高质量成品论文39页配套完整代码运行全套数据集https://www.jdmm.cc/file/2710661/ 中国新质生产…
阅读更多...
【码农日常】将mp4转换为逐帧图片

【码农日常】将mp4转换为逐帧图片

项目场景&#xff1a; 拍摄了一段视频记录设备工作的状态和测量仪器的实时数据。由于测量仪器岁数比较大&#xff0c;不够智能&#xff0c;遂打算将视频转换为逐帧图片进行分析。 网上没找到现成工具&#xff0c;借鉴网上大神的操作方式打算用python写一个工具。 问题描述 用…
阅读更多...
信息系统项目管理师——教材中5级分类汇总

信息系统项目管理师——教材中5级分类汇总

阅读更多...
基于springboot实现政府管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现政府管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现政府管理系统演示 摘要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff…
阅读更多...
华为设备display查看命令

华为设备display查看命令

display version //查看版本信息 display current-configuration //查看配置详情 display this //查看当前视图有效配置 display ip routing-table //查看路由表 display ip routing-table 192.168.3.1 //查看去往3.1的路由 display ip interface brief //查看接口下ip信息 dis…
阅读更多...
PXIe规格i3/i5/i7单板计算机控制器

PXIe规格i3/i5/i7单板计算机控制器

是专为PXIe混合测试系统设计的主控制器&#xff0c;3U 12HP PXIe规格。该产品采用Intel Core™i3/i5/i7 第四代高性能处理器&#xff0c;内存可支持高达16G DDR3L。该系统PXI Express的link配置为通用的4Port 4lane的模式&#xff0c;数据吞吐量高达8GB/S。 CX786x提供丰富灵活…
阅读更多...
机器学习（2）

机器学习（2）

目录 2-1泛化能力 2-2过拟合和欠拟合 2-3三大问题 2-4评估方法 2-5调参和验证集 2-6性能度量 2-7比较检验 2-1泛化能力 如何进行模型评估与选择&#xff1f; 2-2过拟合和欠拟合 泛化误差&#xff1a;在“未来”样本上的误差 经验误差&#xff1a;在训练集上的误差&am…
阅读更多...
什么叫拆分盘？什么是拆分盘！一篇文章带你了解！

什么叫拆分盘？什么是拆分盘！一篇文章带你了解！

随着互联网金融的快速发展&#xff0c;各种新型投资模式层出不穷&#xff0c;其中拆分盘作为一种只涨不跌的理财方式&#xff0c;吸引了众多投资者的目光。本文将结合一个简单的拆分盘示例&#xff0c;对拆分盘的投资逻辑进行解析&#xff0c;并探讨其潜在风险&#xff0c;以帮…
阅读更多...
每日一题11：Pandas:数据重塑-透视

每日一题11：Pandas:数据重塑-透视

一、每日一题 解答&#xff1a; import pandas as pddef pivotTable(weather: pd.DataFrame) -> pd.DataFrame:df_pivot weather.pivot(indexmonth, columnscity, valuestemperature)return df_pivot 题源&#xff1a;力扣 二、总结 Pandas 是一个强大的 Python 数据分析…
阅读更多...
怎么申请一年期免费的https证书

怎么申请一年期免费的https证书

随着互联网的推广和普及&#xff0c;如今HTTPS证书的普及度还是比较高的了&#xff0c;大家对于https证书的需求度也在日益提升。针对于一些个人用户或是企业而言&#xff0c;实现网站的https访问已经成为了一种标配。从去年年底开始&#xff0c;各大SSL证书厂商陆续下架一年期…
阅读更多...
FOTS:一种用于机器人操作技能Sim2Real学习的快速光学触觉仿真器

FOTS:一种用于机器人操作技能Sim2Real学习的快速光学触觉仿真器

类 GelSight的视触觉传感器具有高分辨率和低制造成本的优势&#xff0c;但是在与现实中的物体进行频繁接触时易受磨损。而触觉仿真器可大幅降低硬件成本&#xff0c;同时为后续技能学习任务提供仿真训练环境。为此&#xff0c;来自东南大学自动化学院的钱堃副教授研究团队和伦敦…
阅读更多...
LeetCode---循环队列

LeetCode---循环队列

循环队列就是只有固定的内存&#xff0c;存数据&#xff0c;出数据&#xff0c;但是也和队列一样&#xff0c;先进先出。如下图所示&#xff0c;这是他的样子 在head出&#xff0c;tail进&#xff0c;但是这个如果用数组解决的话&#xff0c;就有问题&#xff0c;力扣给我们的接…
阅读更多...
宝塔Linux面板5.9版本升级新版失败解决方法

宝塔Linux面板5.9版本升级新版失败解决方法

下载地址&#xff1a;宝塔Linux面板5.9升级教程 宝塔5.9版本升级最新版宝塔失败&#xff0c;可以参考这份详细教程&#xff08;不断更新中&#xff09; 安装要求&#xff1a; Python版本&#xff1a; 2.6/2.7&#xff08;安装宝塔时会自动安装&#xff09; 内存&#xff1a;1…
阅读更多...
java生成图形验证码

java生成图形验证码

java生成图形验证码 在写项目的时候登录的方式有多种多样&#xff0c;根据需求的不同&#xff0c;有些是用手机号获取验证码登录&#xff0c;有些是需要账号&#xff0c;密码 手机验证码登录&#xff0c;还有写是需要账号&#xff0c;密码 图形验证码登录&#xff0c;不论怎样…
阅读更多...
【MySQL】sql表设计的注意事项

【MySQL】sql表设计的注意事项

程序员的实用神器 文章目录 程序员的实用神器强烈推荐引言注意事项强烈推荐专栏集锦写在最后 强烈推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站:人工智能 推荐一个个人工作&#x…
阅读更多...
机器学习案例：加州房产价格（四）

机器学习案例：加州房产价格（四）

参考链接&#xff1a;https://hands1ml.apachecn.org/2/#_12 数据探索和可视化、发现规律 通过之前的工作&#xff0c;你只是快速查看了数据&#xff0c;对要处理的数据有了整体了解&#xff0c;现在的目标是更深的探索数据。 首先&#xff0c;保证你将测试集放在了一旁&…
阅读更多...
数据库开发记录

数据库开发记录

一.MySQL相关 1.Spatial Data相关
阅读更多...
AntDesign React 简单封装一个带错误提示的输入框

AntDesign React 简单封装一个带错误提示的输入框

背景 没想到官方没有提供纯粹的带错误提示的输入框&#xff0c;官方提供了启用错误样式 status 属性。但是展示错误信息提示却需要捆绑Form 和 Form.Item。说实话有点不友好&#xff0c;我就一个简单的输入框&#xff0c;想要用户输入时用正则校验&#xff0c;错误时提示一些错…
阅读更多...
电子硬件设计-LTC3839学习笔记

电子硬件设计-LTC3839学习笔记

目录 1. 简介 2. 用法详解 2.1 工作原理 2.2 关键引脚分析 2.2.1 Pin6 - ITH 2.2.2 Pin 14/27 - BOOST1/2 3. 总结 1. 简介 具差分输出检测功能的快速、准确、两相、单路输出降压型 DC/DC 控制器。 特点&#xff1a; 输入&#xff1a;4.5V 至 38V&#xff0c;输出&am…
阅读更多...
算法学习笔记（4）-基础排序算法

算法学习笔记（4）-基础排序算法

##O(n^2)算法时间复杂度的排序算法 目录 ##O(n^2)算法时间复杂度的排序算法 ##选择排序 ##原理 ##图例 ##代码实现示例 ##冒泡排序 ##原理 ##图例 ##代码实现示例 ##插入排序 ##原理 ##图例 ##代码实现示例 ##总结 ##选择排序 ##原理 在一个无序的数组或者列表…
阅读更多...
最新文章

Copyright @ 2022~2023