开发者学堂课程【Vue.js 入门与实战：名称案例-使用 keyup 事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8204
名称案例-使用 keyup 事件
内容介绍
一、画出边框
二、实现需求
本节想要做一个页面上有三个框的样式，其中第三个框的内容是前两个框的内容合并：
一、画出边框：
想要实现如图样式，需要以下代码实现：
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</ div>
<script>
同时以上三个代码，都需要在 vm 上做一个定义，通过以下代码实现：
//创建vue实例，得到viewModel
Var vm = new vue( ｛
el: ’#app’,
data: {
firstname : ’’,
Lastname: ’’,
fullname :’’,
},
methods: {
}});
此时就完成了框的编写。
二、实现需求
<body>
<div id="app">
<!—我们要监听到文本框数据的改变，这样才能知道 什么时候去拼接 出一个fullname-->
<!—如何监听到 文本框数据的改变呢？-->
<input type="text" v-model="firstname"@keyup=”getFullname”>+
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</ div>
<script>
//创建vue实例，得到viewModelvar vm = new vue( i
el: ' #app' ,
data: {
firstname : '',1astnane: '',
fullname : ''
I
},
methods: {
getFullname(){
this.fullname = this.firstname + ‘-’ +this.lastname
}
}});
效果图如下：
这就通过键盘的事件，监听了 input 事件，完成了事件的拼接。
