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

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

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>


代码运行的效果如下:

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中的 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>


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

出现这个问题的原因是

第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>


代码运行的效果如下:

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 来定义的话,会收到出错信息:

spanMsg is not defined

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

<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>


有两处修改。

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

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

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

出现在 {{ }} 之间的不仅可以是数据成员名称,也可以是 表达式。

去掉了  id="spanMsg"

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

2.1.5 增加<template></template>,把<script></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>


在 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>


代码运行的效果如下:

image.png

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

相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
73 3
|
4月前
|
JSON JavaScript 前端开发
JavaScript 详解——Vue基础
【8月更文挑战第16天】
58 3
JavaScript 详解——Vue基础
|
1月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
31 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
164 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
47 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
2月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
58 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
60 3
|
4月前
|
JSON JavaScript 前端开发
Android调用Vue中的JavaScript代码
Android调用Vue中的JavaScript代码
42 3