首页 > 编程语言 >Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示

时间：2024-09-17 17:50:58浏览次数：3  
标签：tbMsg Vue JavaScript 文本框 视图 spanMsg showMsg 输入

0 前言

在页面中，要实现数据更新的视图实时显示，纯JavaScrip需要手动编写代码来处理数据和视图之间的更新。

而Vue提供了数据绑定的能力，使得数据和视图保持同步。

我们通过一个实例来体验两者的差别。

我们设计一个页面，在页面里提供一个文本框，用户可以在文本框输入内容，然后我们在文本框下方通过<span>把用户输入的内容显示出来。

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text" id="tbMsg" value="请您输入信息" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>


1 纯JavaScript实现

为了在用户通过文本框输入内容后，迅速在文本框下方把用户输入的内容显示出来，我们需要监听用户在文本框输入事件，即oninput事件， 在具体实现上，至少有两个方法。

1.1 修改文本框HTML代码监听oninput事件

 即将 

<input type="text" id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />

修改为 

<input type="text"  id="tbMsg"  value="请您输入信息" oninput="showMsg(this.value)" />

我们增加了代码

oninput="showMsg(this.value)" 

它的作用是指定发生input事件时执行函数showMsg函数，并且把文本框的值（this.value）作为函数的输入参数传递过去。

在showMsg函数中，我们把文本框的值更新显示在文本框的下方：

function showMsg(s)
{
	document.getElementById("spanMsg").innerText = s;
}

完整的代码是：

<script>

function showMsg(s)
{
	document.getElementById("spanMsg").innerText = s;
}
</script>

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text"  id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

代码运行的效果如下：

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_文本框

1.2 使用EventTarget.addEventListener() 方法将指定的监听器showMsg注册到文本框上

1.在<script></script>之间增加代码，给id为tbMsg的文本框注册监听器

//tbMsg = document.getElementById("tbMsg");
//tbMsg.addEventListener("input", showMsg);

document.getElementById("tbMsg").addEventListener("input", showMsg);
  1. 对1.1中的 showMsg函数进行修改
function showMsg(e)
{
	document.getElementById("spanMsg").innerText = e.target.value;
}

作为监听器后，showMsg函数仍会接收到一个参数，不过此参数与1.1中的不同，此时收到的参数就是它监听的对象，id为tbMsg的文本框。

收到的参数变了，showMsg函数体内的赋值语句也相应做了修改。

完整的代码如下：

<script>

function showMsg(e)
{
	document.getElementById("spanMsg").innerText = e.target.value;
}

// tbMsg = document.getElementById("tbMsg");
// tbMsg.addEventListener("input", showMsg);
document.getElementById("tbMsg").addEventListener("input", showMsg);


</script>

<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text" id="tbMsg" value="请您输入信息" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

 但是代码运行时出现问题：

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_数据更新_02

出现这个问题的原因是

第10行语句

document.getElementById("tbMsg").addEventListener("input", showMsg);

位于第24行语句

 <input type="text" id="tbMsg" value="请您输入信息" />

前面。

也就是说，在我们给id为tbMsg的文本框注册监听器时，id为tbMsg的文本框还没有描述和生成。

解决的办法就是把<script></script>代码段移动到HTMid为tbMsg的文本框的定义和生成语句后面，即：


<p style="font-size:18pt; font-weight:bold;">
	纯JavaScript实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text" id="tbMsg" value="请您输入信息" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

<script>

function showMsg(e)
{
	document.getElementById("spanMsg").innerText = e.target.value;
}

// tbMsg = document.getElementById("tbMsg");
// tbMsg.addEventListener("input", showMsg);
document.getElementById("tbMsg").addEventListener("input", showMsg);

</script>


代码运行的效果如下：

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_JavaScript_03

2 使用vue来实现

Vue 的核心功能是声明式渲染，通过扩展于标准 HTML 的模板语法，我们可以对 HTML 中的内容发生变化时进行响应式地自动更新。

响应式状态可以使用 Vue 的API ref()  或 reactive() 来声明。

2.1 使用 ref()

我们以1.1的代码为基础进行修改。

2.1.1 修改<script></script>的代码

1.将<script> 改为  <script setup>

起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用。Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。

如果不加上 setup的话，下面即使定义了数据成员spanMsg，并赋予了初始值'请您输入信息'，并且将id为tbMsg的文本框的值与数据成员 spanMsg的值做双向绑定，那么id为tbMsg的文本框不会显示初始值'请您输入信息'。

2.script标签中 原有的代码都不需要了，增加了两行代码

1.import { ref } from 'vue'

这是 Vue.js 3 中的语法，用于声明一个响应式引用 (ref)。

响应式引用是一个能够在模板中自动更新的引用类型。

通过使用 ref 函数，可以将一个普通的数据类型转换成响应式引用类型，使其在模板中自动进行响应式更新。

简而言之，ref 提供了一种更直观和强大的方式来处理 Vue 组件中的状态。

2.const spanMsg = ref('请您输入信息')

或 var spanMsg = ref('请您输入信息')

定义数据成员spanMsg，其值是ref函数，ref函数有一个参数，参数初始值为'请您输入信息'。

 如果spanMsg 前不使用 const 或 var 来定义的话，会收到出错信息：


脚本部分修改后的完整代码是：

<script>
  
import { ref } from 'vue'

// var spanMsg = ref('请您输入信息')
const spanMsg = ref("请您输入信息")

</script>

2.1.2 将 纯JavaScript实现数据更新的实时视图显示 修改为  使用Vue实现数据更新的实时视图显示 

2.1.3 修改id为tbMsg的文本框描述语句

从

<input type="text" id="tbMsg" value="请您输入信息" />

改为

<input type="text" id="tbMsg" v-model="spanMsg" />

改动有2点：

1.增加了代码：  v-model="spanMsg"

v-model是Vue扩展的数据双向绑定指令，它的全写是：v-model:value="spanMsg"，简写为： v-model="spanMsg"，它的作用是将id为tbMsg的文本框的值与数据成员 spanMsg的值做双向绑定。

2.去掉了value属性

value属性的作用是指定id为tbMsg的文本框的初始值，因为我们已经 通过  v-model="spanMsg" 将文本框的值与数据成员 spanMsg 的值做了双向绑定，所以这里就不需要value属性了。


2.1.4 修改 <span style="color:purple" id="spanMsg">……语句

从

   <span style="color:purple" id="spanMsg">请您输入信息</span>

改为

<span style="color:purple">{{ spanMsg }}</span>

有两处修改。


  1. 将初始字符串“请您输入信息”改为“{{spanMsg }} ”

{{spanMsg }} 是 vue 的语法特性，能够在 html 元素中插入组件属性。

在前面我们已经为数据成员spanMsg指定了初始值。

出现在 {{ }} 之间的不仅可以是数据成员名称，也可以是 表达式。可以是 vue 的语法特性，能够在 html 元素中插入组件属性。


  1. 去掉了  id="spanMsg"

因为我们已经通过{{ spanMsg }} 来展示spanMsg的值的更新，不需要通过JavaScript代码通过id 来更新，所以我们把它去掉。其实去不去掉它，都不影响代码的运行结果。


2.1.5 增加把<script></script>外的代码纳入<template></template>

即：

<template>

<p style="font-size:18pt; font-weight:bold;">
	使用Vue实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text" id="tbMsg" v-model="spanMsg" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple">{{ spanMsg }}</span>
</p>

</template>

在 html中，template标签中的内容在页面中不会显示。这是因为template标签设置了display:none;属性，天生不可见。但是在后台查看页面DOM结构存在template标签。

在vue实例绑定的元素内部，temate标签的内容可以看到，但是查看后台的dom结构不存在template标签。

需要注意的是： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。不过此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

做了以上修改后的完整代码如下：

<script setup>

import { ref } from 'vue'

// var spanMsg = ref('请您输入信息')
const spanMsg = ref('请您输入信息')

</script>

<template>

<p style="font-size:18pt; font-weight:bold;">
	使用Vue实现数据更新的实时视图显示 
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	<input type="text" id="tbMsg" v-model="spanMsg" />
</p>

<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple">{{ spanMsg }}</span>
</p>

</template>

代码运行的效果如下：

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_数据_04




你可以将HTML模板和JavaScript中的数据绑定在一起，使得数据的变化会自动修改视图，而视图的变化也会更新对应的数据。这对于构建动态和交互式的界面非常有用。纯JavaScript不提供这种数据绑定的能力，你需要手动编写代码来处理数据和视图之间的更新。

标签：tbMsg,Vue,JavaScript,文本框,视图,spanMsg,showMsg,输入
From： https://blog.51cto.com/endurer/12038161

相关文章

  • 基于springboot+vue.js的精美风网上花店商城系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js的水果蔬菜商城附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 智慧社区|基于springboot+vue的智慧社区系统(源码+数据库+文档)
    智慧社区目录基于springboot+vue的智慧社区系统一、前言二、系统设计三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推荐八、源码获取：博主介绍：✌️大厂码农|毕设布道师，阿里云开发社区乘风者计划专家博主，CSDN平台Java领域优......
  • 厨艺交流平台|springboot+vue的厨艺交流平台系统(源码+数据库+文档)
    厨艺交流平台目录基于springboot+vue的厨艺交流平台系统一、前言二、系统设计三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推荐八、源码获取：博主介绍：✌️大厂码农|毕设布道师，阿里云开发社区乘风者计划专家博主，CSDN平台Jav......
  • 网上摄影工作室|springboot+vue的网上摄影工作室系统(源码+数据库+文档)
    网上摄影工作室系统目录基于Springboot的摄影分享网站设计与实现一、前言二、系统功能设计三、系统实现四、数据库设计1、实体ER图五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取：博主介绍：✌️大厂码农|毕设布道师，阿里云开发社区乘风者计划专家......
  • Vue路由配置、网络请求访问框架项目、element组件介绍学习
    系列文章目录第一章基础知识、数据类型学习第二章万年历项目第三章代码逻辑训练习题第四章方法、数组学习第五章图书管理系统项目第六章面向对象编程：封装、继承、多态学习第七章封装继承多态习题第八章常用类、包装类、异常处理机制学习第九章集合学习第......
  • 基于Java+Vue+Mysql的人力资源管理系统：简单易用，高效协同（项目源码分享）
      前言：eHR（ElectronicHumanResources）人力资源管理系统是一个综合性的软件平台，用于管理组织的人力资源相关的各种活动和数据。该系统可以显著提高人力资源部门的工作效率，确保数据准确性和一致性，同时提供决策支持。以下是eHR人力资源管理系统的六个主要模块及其功能的简要介......
  • 基于nodejs+vue广告系统[程序+论文+开题] 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景在数字化时代，广告已成为企业推广产品、服务及品牌的重要手段之一。随着互联网的普及和技术的飞速发展，传统的广告模式正逐步向更加精准、高效、互动的方向转......
  • 基于nodejs+vue广金考研助力系统[程序+论文+开题] 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景随着高等教育的普及与就业竞争的日益激烈，越来越多的本科生选择继续深造，攻读硕士学位成为提升个人竞争力的重要途径。考研作为这一选择的关键环节，其准备过程......
  • 基于nodejs+vue广西美食宣传系统的设计与实现[程序+论文+开题] 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景广西，这片位于中国南疆的神奇土地，以其丰富的自然资源、多元的民族文化和独特的地域风貌而闻名遐迩。在这片土地上，孕育了众多令人垂涎欲滴的美食，从酸辣的螺蛳......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99