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>

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

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

相关文章

M-有效算法

在赛场上&#xff0c;脑子就两个字“二分”&#xff0c;一点思路都没&#xff0c;完全不知道二分谁&#xff0c;怎么二分&#xff0c;从哪入手。隐隐约约也知道要变换公式&#xff0c;可惜没坚持这个想法。脑子里全是把k分离出来&#xff0c;赛后看了题解才知道&#xff0c;应该…

K8S -----二进制搭建 Kubernetes v1.20

目录 一、准备环境 1.1 修改主机名 1.2 关闭防火墙&#xff08;三台一起&#xff0c;这里只展示master01&#xff09; 1.3 在master添加hosts&#xff08;依旧是三台一起&#xff09; 1.4 调整内核参数并开启网桥模式 二、部署docker引擎 三、部署 etcd 集群 1.在mast…

第240513章 消除Otostudio关于库文件的48个报警

第240513章 消除Otostudio关于库文件的48个报警 文章目录 第240513章 消除Otostudio关于库文件的48个报警前言一、替换Lib_Googol文件夹二、替换扩展模块配置文件三、复制MODBUSTCP库到Lib_Googol文件夹四、替换GTS800和DEFAULT文件五、仿真模拟 前言 一、替换Lib_Googol文件夹…

YOLOv9-20240507周更说明|更新MobileNetv4等多种轻量化主干

专栏地址&#xff1a;目前售价售价69.9&#xff0c;改进点70 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 本周已更新说明&#xff1a; ### ⭐⭐更新时间&#xff1a;2024/5/12⭐⭐ 1. YOLOv9…

LeetCode—用栈实现队列

1.题目 2.思路—双栈 思路与双队列实现栈类似&#xff1a; 将一个栈当作输入栈&#xff0c;用于压入push传入的数据&#xff1b;另一个栈当作输出栈&#xff0c;用于pop和peek操作。 每次 pop或 peek时&#xff0c;若输出栈outStack为空则将输入栈inStack的全部数据依次出栈并…

[C语言知识]return和exit到底有什么区别?

前言 &#x1f496;&#x1f496;&#x1f496;欢迎来到我的博客&#xff0c;我是anmory&#x1f496;&#x1f496;&#x1f496; 又和大家见面了 欢迎来到C语言知识系列 用通俗易懂的语言让编程语言不再困难 先来自我推荐一波 个人网站欢迎访问以及捐款 推荐阅读 如何低成本搭…

智能自助终端主板RK3288/RK3568在酒店前台自助机方案的应用,支持鸿蒙,支持免费定制

酒店前台自助机解决方案是一款基于自助服务终端&#xff0c;能够让客人通过简单的操作完成入住登记/退房的解决方案&#xff0c;大幅提高酒店的工作效率&#xff0c;提升客人体验&#xff0c;降低人力成本。 该方案解决了以下传统前台登记入住方式的痛点&#xff1a; 1、人流量…

ESP32重要库示例详解(三):按键之avdweb_Switch库

在Arduino开发中&#xff0c;我们经常需要处理按钮和开关的输入。avdweb_Switch库就是为了简化这一任务&#xff0c;提供了一个优雅且高效的事件处理方式。本文将通过一个实际示例&#xff0c;介绍该库的主要特性和用法。 导入库 在Arduino IDE导入avdweb_Switch库的步骤如下…

阿里巴巴找黄金宝箱(II) - 贪心思维

系列文章目录 文章目录 系列文章目录前言一、题目描述二、输出描述三、输入描述四、java代码五、测试用例 前言 本人最近再练习算法&#xff0c;所以会发布自己的解题思路&#xff0c;希望大家多指教 一、题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发…

算法-卡尔曼滤波之为什么要使用卡尔曼滤波器

假设使用雷达来预测飞行器的位置&#xff1b; 预先的假设条件条件: 1.激光雷达的激光束每5s发射一次&#xff1b; 2.通过接受的激光束&#xff0c;雷达估计目标当前时刻的位置和速度&#xff1b; 3.同时雷达要预测下一时刻的位置和速度 根据速度&#xff0c;加速度和位移的…

深入学习指针5,与数组和指针相关的笔试题1(C语言)

前言 Hello,亲爱的小伙伴们&#xff0c;我又来了&#xff0c;&#xff0c;今天呢我们一起来学习一下C语言关于数组和指针的部分经典题目。如果觉得不错的话不要忘了点赞&#xff0c;收藏、关注&#xff0c;你的支持就是我更新的最大动力&#xff01;&#xff01; 好&#xff0…

机器学习中的聚类

目录 认识聚类算法 聚类算法API的使用 聚类算法实现流程 聚类算法模型评估 认识聚类算法 聚类算法是一种无监督的机器学习算法。 它将一组数据分成若干个不同的群组&#xff0c;使得每个群组内部的数据点相似度高&#xff0c;而不同群组之间的数据点相似度低。常用的相似…