一、事件处理

基本用法

使用v-on:xxx或者@xxx绑定事件，xxx为事件名，例如click事件
事件的回调需要配置在methods对象中，最后会在vm上
methods中配置的汉纳树，不要使用箭头函数，否则this就不是vm
methods中配置函数，都是呗Vue所管理的函数，this指向vm或哲组件实例对象
@click = "btn1"和@click = btn1($event)效果一样，但是后者可以传递参数

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-MVVM</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <h1>hello,{{name}}</h1>
        <button v-on:click="but1">点我无参数</button>
        <p></p>
        <button @click="but1">点我无参数-简要写法</button>
        <p></p>
        <!-- 如果想传递event,可以使用$event -->
        <button @click="but2($event,name)">点我有参数</button>
    </div>

    <script type="text/javascript">
        let vm = new Vue({
            data() {
                return { name: 'hanzhe' }
            },
            methods: {
                // 不能使用箭头函数，此时的this不是vm实例了，往上找找到了windows
                // but1:(event)=>{
                //     console.log(event)
                //     // 使用箭头函数时，this==Window 
                //     console.log(this)
                // },
                but1(event) {
                    // PointerEvent = event
                    console.log(event)
                    // this =  vm 
                    console.log(this)
                    alert("你好同学");
                },
                but2(event, a) {
                    console.log(event)
                    alert(a);
                }
            }
        })
        vm.$mount("#demo")
    </script>
</body>
</html>

二、事件修饰符

prevent 阻止默认事件-常用
stop 阻止事件冒泡
once 事件只触发一次
capture 使用事件的捕获模式，加上后，子容器的事件先触发父容器事件
self 只有event.target是当前操作的元素时才触发事件，只有自己的事件才会触发，子容器的事件不会触发
passive：事件的默认行为立即执行，无需等待事件的回调执行完毕

@scroll滚动条的滚动

@wheel鼠标中键的滚动

修饰符可以连续写，比如可以这么用，@click.prevent.stop即阻止事件冒泡，也阻止事件的默认行为。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-MVVM</title>
    <script src="./js//vue.js"></script>

    <style>
        * {margin-top: 20px; }
        .demo1 {height: 50px;background-color: skyblue;}
        .box1 {padding: 5px;background-color: skyblue;}
        .list {width: 200px;height: 200px;background-color: skyblue;overflow: auto;}
        li {height: 100px;}
    </style>
</head>
<body>
    <div id="demo">
        <h1>hello,{{name}}</h1>

        <!-- 1：事件绑定 -->
        <button v-on:click="but1">点我无参数</button>
        <p></p>
        <button @click="but1">点我无参数-简要写法</button>

        <p></p>
        <!-- 如果想传递event,可以使用$event -->
        <button @click="but2($event,name)">点我有参数</button>
        <p> </p>
        <!-- 2：事件的修饰符 -->
        <!-- 2.1阻止默认事件发生 -->
        <!-- a标签的默认事件为href，点击click后，会在跳转超链接指向的地址 -->
        <!-- 可以使用 prevent阻止默认事件（常用）-->
        <a href="http://www.baidu.com" v-on:click.prevent = "but1">a标签超链接</a>
        <!-- 2.1：stop阻止事件冒泡，父子容器内有相同的事件 -->
        <div class="demo1" @click="but1">
            <button @click.stop="but1">阻止事件冒泡</button>
        </div>
        <p></p>
        <!-- 2.2 once事件只发生一次，进页面第一次会触发，后面就不会再出现 -->
        <button v-on:click.once="but1">事件只发生一次</button>

        <!-- 2.3：使用事件的捕获模式 -->
        <!-- 如果不加 capture 点击div2时，先触发的时div2,加上后先触发div1的事件，再触发div2的事件 -->
        <div class="box1" @click.capture = but1($event)>
            div1
            <div class="box2" @click="but2($event,name)">
                div2
            </div>
        </div>
        <!-- 2.4只有event.tartget是当千操作元素的时才出发事件 -->
        <!-- 不加self时，子容器的事件会触发父容器的事件 -->
        <div class="box1" @click.self="but1($event)">
            <button @click="but1($event)">点我</button>
        </div>
        <!-- 
            事件的默认行为立即执行，无需等待事件回调执行完毕
            @scroll是滚动条滚动，passsive没有影响
            @wheel是鼠标滚动，passive有影响 -->
        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">

        let vm = new Vue({
            data() {
                return { name: 'hanzhe' }
            },
            methods: {
                // 不能使用箭头函数，此时的this不是vm实例了，往上找找到了windows
                // but1:(event)=>{
                //     console.log(event)
                //     // 使用箭头函数时，this==Window 
                //     console.log(this)
                // },

                but1(event) {
                    // PointerEvent = event
                    console.log(event)
                    // this =  vm 
                    console.log(this)
                    alert("你好同学");
                },
                but2(event, a) {
                    console.log(event)
                    alert(a);
                },
                demo(){
                    for(let i=0;i<100000;i++){
                        console.log('#')
                    }
                    console.log('累坏了')
                }
            }
        })
        // 绑定元素
        vm.$mount("#demo")
    </script>
</body>

</html>

三、鼠标事件

键盘上的每个按键都有自己的名称和编码，例如Enter(12)，而Vue还对一些常用的按键起了别名方便使用。

常用的按键别名：

回车 enter
删除 delete捕获删除和退格键
退出 esc
空格 space
换行 tab 特殊，必须配合keydown去使用，因为自带切换光标的功能
上 up
下 down
左 left
右 right

vue未提供的别名的按键，可以使用按键原始的key值去绑定，但注意要转换：多单词小写，短横线写法

系统修饰键，CTRL 、alt 、shift、 meta(windows键)

配合keyup使用，按下修饰键时，再按下其他键，随后释放其他键，事件才会被触发

Vue.config.keyCodes.自定义键名 = 键码可以定制按键别名

如果需要组合键的事件时：@keyup.ctrl.y表示ctrl+y键生效

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05键盘事件</title>
    <script src="./js//vue.js"></script>
</head>
<body>
    <div id="demo">
        <input type="text" placeholder="回车键事件" @keyup.enter="but1"></input><br />
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            data() {
                return { name: 'hanzhe' }
            },
            methods: {
                but1(event) {
                    // KeyboardEvent 
                    console.log(event.target.value)
                }
            }
        })
        vm.$mount("#demo")
    </script>
</body>
</html>

Vue入门学习（二）

一、事件处理

基本用法

二、事件修饰符

三、鼠标事件