题目
在两个输入框中输入文字就在下面的全名栏中实时显示，有间隔符，要符合实际应用需求
方法一、原生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}}
代码：
评价：我无法进行评价，只能说很不错，调用接口很爽，原理不太懂。