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

深藏阁楼爱情的钟 2024-03-31 15:34 43阅读 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>
        
        <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 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">
        
        <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">
        
        <form action="https://www.baidu.com" method="post">
            用户名<input type="text" name="username"/><br/>
            
            <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()">
        	
            <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>
    
        
        姓氏：<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>

## 学海无涯苦作舟 ##