Vue 2 入门学习笔记4.事件监听
- 本系列文章为
laracasts.com的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。- 视频源码地址：github.com/laracasts/Vue-Forms
- 项目初始版本为
Vue 2.1.3，教程还在更新中。
本节说明
- 对应第 4 小节：Vue Event Listener
本节内容
在上一节，我们用JavaScript的方式将 name 添加到 names 列表当中时，我们是这么做的：首先我们注册一个 click 事件，然后我们获取 input 元素的值，然后我们再更新列表。本节我们使用Vue的方式来实现：
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="root">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
<input type="text" v-model="newName">
<button @click="addName">Add A name</button>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#root',
data: {
newName:'',
names:['Joe','Jack','Jane','Mike']
},
methods: {
addName() {
this.names.push(this.newName);
this.newName = '';
}
}
});
</script>
</body>
</html>在Vue中，我们可以用v-on指令监听 DOM 事件，并在触发时运行一些JavaScript。然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。v-on 还可以接收一个需要调用的方法名称。
注：@click 为 v-on:click的简写方式
我们来查看效果：
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：