侧边栏壁纸
博主头像
逆流者

不登高山,不知天之高也;不临深溪,不知地之厚也。

  • 累计撰写 147 篇文章
  • 累计创建 43 个标签
  • 累计收到 4 条评论
隐藏侧边栏

Vue第9话 事件处理

逆流者
2020-01-04 / 0 评论 / 0 点赞 / 162 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2020-01-04,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1.绑定监听

  • v-on:xxx="fun"
  • @xxx="fun"
  • @xxx="fun(参数)"
  • 默认事件形参: event
  • 隐含属性对象: $event

2.事件修饰符

  • .prevent : 阻止事件的默认行为 event.preventDefault()
  • .stop : 停止事件冒泡 event.stopPropagation()

3.按键修饰符

  • .keycode : 操作的是某个 keycode 值的键
  • .keyName : 操作的某个按键名的键

4. 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-事件处理</title>
</head>
<body>
<div id="app-8">
    <h2>1、绑定监听</h2>
    <button v-on:click="test1">Hello one</button>
    <button @click="test1">Hello two</button>
    <button @click="test2($event, 'hello')">Hello three</button>

    <h2>2、事件修饰符</h2>
    <!-- 阻止事件的默认行为 添加这个 prevent-->
    <a href="http://www.baidu.com" @click.prevent="test3">百度一下</a><br><br><br>
    <!-- 停止事件冒泡 stop-->
    <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.13="test6"><br><!--13代表enter键-->
    <input @keyup.enter="test6">
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app-8',
        data: {

        },
        methods: {
            //event: 默然事件形参
            test1(event) {
                console.log(event);
                console.log(event.target.innerHTML);
                alert(event.target.innerHTML)
            },
            test2(event, msg) {
                alert(event.target.innerHTML + '----' + msg)
            },
            test3() {
                alert('阻止事件的默认行为测试')
            },
            test4() {
                alert('外部')
            },
            test5() {
                alert('内部')
            },
            test6(event) {
                alert(event.keyCode + '----' + event.target.value)
            }
        }
    });
</script>
</body>
</html>
0

评论