前端培训课程讲述的Vue事件处理为我们后期项目开发变的更加方便快捷。
1. 效果 (07_事件处理/test.html)
2. 绑定监听:
1) v-on:xxx=”fun” 2) @xxx=”fun” 3) @xxx=”fun(参数)” 4) 默认事件形参:event 5) 隐含属性对象:$event
3. 事件修饰符
1) .prevent: 阻止事件的默认行为 event.preventDefault() 2) .stop: 停止事件冒泡 event.stopPropagation()
4. 按键修饰符
1) .keycode: 操作的是某个 keycode 值的键 2) .keyName: 操作的某个按键名的键(少部分)
1.8.5. 编码
<div id=”example”>
<h2>1. 绑定监听</h2> <button v-on:click=”test1″>Greet</button> <button @click=”test1″>Greet2</button> <button @click=”test2($event, ‘hello’)”>Greet3</button>
<h2>2. 事件修饰符</h2> <!-阻 止 事 件 默 认 行 为 –> <a href=”http://www.baidu.com” @click.prevent=”test3″>百度一下</a> <br/> <br/> <!-停 止 事 件 冒 泡 –> <div style=”width: 200px;height: 200px;background: red” @click=”test4″> <div style=”width: 100px;height: 100px;background: green” @click.stop=”test5″></div> </div>
<h2>3. 按键修饰符</h2> <input @keyup.8=”test6″> <input @keyup.enter=”test6″> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> new Vue({
el: ‘#example’, data: { name: ‘Vue.js’ }, methods: { test1 (event) { // 方 法 内 `this`
指 向
vm // alert(‘Hello ‘ + this.name + ‘!’) // `event` 是 原 生 DOM 事 件 alert(event.target.innerHTML) }, test2 (event, msg) { alert(event.target.innerHTML + ‘—‘ + msg) },
test3() { alert(‘阻止事件的默认行为’) },
test4() { alert(‘out’) }, test5() { alert(‘inner’) },
test6(event) { alert(event.keyCode + ‘—‘ + event.target.value) }
} }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 大数据培训技术Hadoop之HDFS写数据流程
下一篇: 前端培训Vue之表单输入绑定
