首页 > 其他分享> 文章详细

九、Vue事件案例————温开水的复习笔记

2022-02-03 14:02:55 阅读：125 来源： 互联网

标签：Vue 复习温开水获取数据全名 input 方法输入

题目

在两个输入框中输入文字就在下面的全名栏中实时显示，有间隔符，要符合实际应用需求

方法一、原生JavaScript（无思想）

需求：两个框中的文字会被实时获取并展现在全名栏中。也就是两个框中的值会在全名栏中显示。

方法：获取input节点对象，绑定键盘事件

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件总结</title>
</head>
<body>
    <!-- 准备容器 -->
    <div>
        性: <input type="text" id="firstName"><br><br>
        名: <input type="text" id="lastName"><br><br>
        全名: <p id="fullName1"></p>-<p id="fullName2"></p>
    </div>
    <script>
        let firstName = document.querySelector('#firstName');
        let lastName = document.querySelector('#lastName');
        let fullName = document.querySelector('#fullName');
        firstName.addEventListener('keyup',function(){
            fullName1.innerHTML = this.value;
        })
        lastName.addEventListener('keyup',function(){
            fullName2.innerHTML = this.value;
        })
    </script>
</body>
</html>

评价：

感觉像屎一样，逻辑虽然好理解，但是有这些问题。

①万一input中输入的数据要保存到服务器，那么要请求多少次呢，很多很多，只要按一次键盘就请求一次。

②不能保存最后一次输入的数据，仅仅只是展示而已。

③......

方法二、原生JavaScript（有思想）

需求：有一个“数据库”（简单点就是一个保存数据的对象），input输入和获取数据，全名栏获取数据。

思想：借鉴MVVM，View就是全名栏和input框，Model就是数据，ViewModel就是用于输入和获取数据的方法。

方法三、Vue框架

需求：接着方法二来分析，有一个“数据库”（简单点就是一个保存数据的对象）就是Vue中的_data对象，input输入和获取数据就是数据双向绑定，全名栏获取数据就是模板语法-插值语法。

方法：Vue实例，v-model：，{{xxx}}

代码：

评价：我无法进行评价，只能说很不错，调用接口很爽，原理不太懂。

方法四、Vue框架——改进

标签：Vue,复习,温开水,获取数据,全名,input,方法,输入
来源： https://blog.csdn.net/qq_47286790/article/details/122774534

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

九、Vue事件案例————温开水的复习笔记

题目

方法一、原生JavaScript（无思想）

方法二、原生JavaScript（有思想）

方法三、Vue框架

方法四、Vue框架——改进