零基础入门JavaWeb——Vue的事件驱动

最新推荐文章于 2024-04-26 17:37:33 发布

程序员丶星霖

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量282

点赞数

分类专栏：前端技术文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hunterarley/article/details/128199250

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、事件驱动

1.1 字符串顺序反转

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件驱动</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{message}}</div>
    <!--
        点击按钮，就将上方的字符串反转

        v-on：事件名="函数"，这就是vue绑定事件，也可以简写成@事件名="函数"

        vue中声明函数是写在“methods”的键值对的值里面
        “函数名”：function(参数列表){函数体}
        可简化成：
            函数名(参数列表){函数体}
    -->
    <button v-on:click="reverseString()">反转字符串</button>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "data":{
            "message":"Hello Vue"
        },
        "methods":{
            "reverseString":function () {
                // 实现message的反转
                // 将字符串切割成一个数组
                var arr = this.message.split("")
                // 然后将数组中的元素反转，再将反转后的数组拼接成一个新的字符串，赋值给message
                this.message = arr.reverse().join("")
            }
        }
    });
</script>
</body>
</html>

1.2 获取鼠标移动时坐标信息

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件驱动</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    鼠标在div中移动的时候，获取鼠标所在的位置坐标
        1. 要给div绑定鼠标移动事件 @mousemove="函数"
        2. 编写一个函数记录鼠标移动时的X轴和Y轴坐标

    注意：
        1. 绑定事件的时候如果直接写@mousemove="函数名"默认就会将当前事件传给函数
        2. 绑定事件的时候如果写成@mousemove="函数名($event)"才能将当前事件传递给函数
-->
    <div style="width: 400px;height: 400px;border: 1px solid black" @mousemove="recordPosition($event)">{{message}}</div>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "data":{
            "message":"Hello Vue"
        },
        "methods":{
            recordPosition(event){
                // event表示当前触发的事件
                // 获取当前事件触发时候的x轴的坐标
                var clienrX = event.clientX;
                // 获取当前事件触发时候的y轴的坐标
                var clienrY = event.clientY;

                console.log(clienrX+","+clienrY)
            }
        }
    });
</script>
</body>
</html>

二、取消控件的默认行为

2.1 控件的默认行为

控件的默认行为有如下几种：

点超链接会跳转页面
点表单提交按钮会提交表单

2.2 取消方式

调用事件对象的preventDefault()方法。

2.2.1 超链接示例

JS实现方式

    <a href="https://www.baidu.com" onclick="fn1()" >跳转到百度</a>
    <script>
        function fn1() {
            console.log("点击了a标签")
            // 阻止默认事件（JS实现）
            event.preventDefault()
        }
    </script>

Vue实现方式

<div id="app">
    <!--
        @click.prevent="函数"，表示绑定点击事件，并且阻止当前标签的默认事件
    -->
    <a href="https://www.baidu.com" @click.prevent="fn2"> 跳转到百度度</a>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "methods":{
            fn2(){
                console.log("a标签被点击了....")
            }
        }
    });
</script>

2.2.2 表单提交按钮示例

Vue实现方式

<div id="app">
    <!--
        @click.prevent="函数"，表示绑定点击事件，并且阻止当前标签的默认事件
    -->
    <form action="https://www.baidu.com" method="post">
        用户名<input type="text" name="username"/><br/>
        <!-- 取消控件的默认行为需要使用Vue事件修饰符：.prevent -->
        <input type="submit" @click.prevent="fn3">
    </form>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "methods":{
            fn3(){
              console.log("提交按钮被点击了....")
            }
        }
    });
</script>

三、阻止事件冒泡

事件冒泡就是指一个事件会不断向父元素传递，直到window对象。如果不是想要的效果，就需要使用事件对象的stopPropagation()函数进行阻止。

3.1 示例代码

JS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <style>
        #outer{
            width: 500px;
            height: 500px;
            background-color: lightblue;
            position: relative;
        }

        #inner{
            width: 200px;
            height: 200px;
            background-color: lawngreen;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="outer" onclick="fn1()">
    <div id="inner" onclick="fn2()">

    </div>
</div>
<script>
    function fn1() {
        console.log("点击了外层的div...")
    }

    function fn2() {
        console.log("点击了内层的div...")

        // 阻止事件冒泡(原生JS实现)
        event.stopPropagation()
    }
</script>
</body>
</html>

Vue实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <script src="../js/vue.js"></script>
    <style>
        #outer{
            width: 500px;
            height: 500px;
            background-color: lightblue;
            position: relative;
        }

        #inner{
            width: 200px;
            height: 200px;
            background-color: lawngreen;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="outer" @click="fn1()">
    	<!-- 取消事件冒泡需要使用Vue事件修饰符：.stop -->
        <div id="inner" @click.stop="fn2()">

        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "methods":{
            fn1(){
                console.log("外层的div被点击")
            },
            fn2(){
                console.log("内层的div被点击")
            }
        }
    });
</script>
</body>
</html>

四、属性监听

监听就是对message属性进行监控，当属性的值发生变化时，调用相关的函数。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>姓氏：{{firstName}}</p>
    <p>名称：{{lastName}}</p>

    <!--
        当输入框中的firstName和lastName发生改变时，修改fullName的值
    -->
    姓氏：<input type="text" v-model="firstName"><br/>
    名称：<input type="text" v-model="lastName"><br/>
    <p>全名：{{fullName}}</p>
</div>

<script>
    var vue = new Vue({
        "el":"#app",
        "data":{
            "firstName":"赵",
            "lastName":"云",
            "fullName":"赵云"
        },
        "watch":{
            "firstName":function (inputValue) {
                // 监听器的形参就是改变后的值
                this.fullName=inputValue+this.lastName
            },
            "lastName":function (inputValue) {
                this.fullName=this.firstName+inputValue
            }
        }
    });
</script>
</body>
</html>