0 前言
在
Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客
的开篇，我们分别使用 <input type="text" oninput="showMsg(this.value)" />和应用EventTarget.addEventListener() 方法将指定的监听器showMsg注册到文本框上的方法来实现数据更新的实时视图显示，这两种方法都 是JavaScript提供的方法 。
在Vue中，也提供了一种v-on事件监听机制。下面我们就应用Vue提供的事件监听机制来实现数据更新的实时视图显示。
1 应用Vue提供的v-on事件监听机制来实现数据更新的实时视图显示
我们以 Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客 中使用的代码
<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.1 修改 <script>……</script>的代码
1.1.1 把 <script> 改为 <script setup>
<script setup>是vue3中新引入的在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖，目的是简化使用Composition API时冗长的模板代码。
相比于普通的 <script> 语法，它具有以下优势：
更少的样板内容，更简洁的代码。
能够使用纯 Typescript声明 props和抛出事件。
更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
<script setup></script>中的代码会被编译成组件setup()函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> </script>中的代码会在每次组件实例被创建的时候执行。
1.1.2 增加代码 import { ref } from 'vue'
这是 Vue.js 3 的语法，用于声明一个响应式引用 (ref)。
1.1.3 增加代码 const spanMsg = ref("请您输入信息")
定义数据成员spanMsg，用来在网页视图中对应显示我们输入的文本。其值是ref函数，ref函数有一个参数，参数初始值为'请您输入信息'。
1.1.4 修改函数 showMsg(s)
将
function showMsg(s) { document.getElementById("spanMsg").innerText = s; }
改为
spanMsg = s;
其中spanMsg就是我们在上面定义的数据成员，函数的输入参数s的值是我们输入的文本。
综合以上修改后的完整脚本代码如下：
<script setup> import { ref } from 'vue' const spanMsg = ref("请您输入信息") function showMsg(s) { spanMsg = s; } </script>
1.2 修改 纯JavaScript实现数据更新的实时视图显示 为 使用Vue的v-on监听机制实现数据更新的实时视图显示
1.3 修改id为tbMsg的文本框描述语句
从
<input type="text" id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />
改为：
<input type="text" id="tbMsg" v-model="spanMsg" @input="showMsg(this.value)" />
主要改了两点：
1.3.1 将value="请您输入信息" 改为 v-model="spanMsg"
这是将id为tbMsg的文本框的值与数据成员 spanMsg的值做双向绑定。
1.3.2 将 oninput="showMsg(this.value)" 改为 @input="showMsg(this.value)"
在vue中，我们可以使用 v-on 指令监听 DOM 事件，比如按钮的点击(click)事件，文本框的输入（input）事件，例如我们要监听文本框的输入事件，可以这样写：
v-on:input="showMsg(this.value)"
也可以将 v-on: 简写为 @，即
@input="showMsg(this.value)"
1.3.3 修改 <span style="color:purple" id="spanMsg">……语句
将
<span style="color:purple" id="spanMsg">请您输入信息</span>
改为
<span style="color:purple" id="spanMsg">{{ spanMsg }}</span>
{{spanMsg }} 是 vue 的语法特性，能够在 html 元素中插入组件属性。
在前面我们已经为数据成员spanMsg指定了初始值。
出现在 {{ }} 之间的不仅可以是数据成员名称，也可以是 标识符、路径 或 任何有效的 JavaScript 表达式。
增加<template></template> 把<script></script>外的代码都纳入<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" v-on:input="showMsg(this.value)" /> </p> <p style="font-size:18pt; font-weight:bold;"> 您输入的信息是： <span style="color:purple" id="spanMsg">{{ spanMsg }}</span> </p> </template>
不然我们在视图上看不到任何信息。
综合以上所有修改，最终的完整代码如下：
<script setup> import { ref } from 'vue' const spanMsg = ref("请您输入信息") function showMsg(s) { spanMsg = s; } </script> <template> <p style="font-size:18pt; font-weight:bold;"> 使用Vue的v-on监听机制实现数据更新的实时视图显示 </p> <p style="margin-left:20%; color:purple; font-weight:bold;"> by PurpleEndurer </p> <p>请输入信息： <input type="text" id="tbMsg" v-model="spanMsg" v-on:input="showMsg(this.value)" /> </p> <p style="font-size:18pt; font-weight:bold;"> 您输入的信息是： <span style="color:purple" id="spanMsg">{{ spanMsg }}</span> </p> </template>
2 代码运行效果
