前端UI框架——VueAPI使用之事件处理

一、基本介绍

事件处理：
1、事件监听 v-on:click/@click
2、事件处理方法
3、事件修饰符

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

4、按键修饰符

            .keycode : 操作的是某个keycode值的键
            .keyName : 操作的某个按键名的键(少部分)

二、代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_事件处理</title>
    <style>
        a {
            display: block;
        }
    </style>
</head>
<!--

事件处理：
1、事件监听 v-on:click/@click
2、事件处理方法
3、事件修饰符
          .prevent : 阻止事件的默认行为 event.preventDefault()
          .stop : 停止事件冒泡 event.stopPropagation()
4、按键修饰符
            .keycode : 操作的是某个keycode值的键
            .keyName : 操作的某个按键名的键(少部分)


-->
<body>
<div id="app">
    <!--1、事件监听 v-on:click/@click-->
    <h2>1、事件监听</h2>
    <button @click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>

    <!--2、事件处理方法-->
    <h2>2、事件处理方法</h2>
    <!-- v-on完整语法 -->
    <button v-on:click="fnForClick(1)">{{msg}}</button>
    <!-- v-on 缩写-->
    <button @click="fnForClick(2)">{{msg2}}</button>

    <!--3、事件修饰符-->
    <h2>3、事件修饰符</h2>
    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis">阻止单击事件继续传播</a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat">修饰符可以串联</a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent>只有修饰符</form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    <!--   注意事项：
       使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
       因此，用 v-on:click.prevent.self 会阻止所有的点击，
       而 v-on:click.self.prevent 只会阻止对元素自身的点击。
       -->

    <!--4、按键修饰符-->
    <h2>4、 按键修饰符</h2>
    <input @keyup.13="test6">
    <input @keyup.enter="test6">

</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            counter: 0,
            msg: "v-on完整语法",
            msg2: "v-on 缩写",
            text: `<a href='#'>click</a>`,
            url: "http://www.atguigu.com/images/indexIcon/student/cover.jpg"
        },
        methods: {
            fnForClick(arg) {
                alert(arg)
                console.log(arg)
            },
            doThis() {

            },
            onSubmit() {

            },
            doThat() {
            },
            test6(event) {
                alert(event.keyCode + '---' + event.target.value)
            }

        }
    })

</script>
</html>

代码测试结果：
这里写图片描述

前端UI框架——VueAPI使用之事件处理

一、基本介绍

二、代码案例

猜你喜欢