9 vue之事件处理（过滤、事件修饰符、按键修饰符）

 事件处理

1.事件

2 change 和 blur 的区别

change 和 blur 最本质的区别：
如果输入框为空，失去焦点后，change不会触发，但是blur会触发

3 input事件、change事件、blur事件

当输入框进行输入的时候 触发的事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>

head>
<body>
<div class="app">


    blur：<input type="text" v-model="username" @blur="handleBlur">




div>

body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            username: '',
        },
        methods:{
            // handleInput(){
            //     console.log(this.username)
            // },
            // handleChange(){
            //     console.log(this.username)
            // },
            handleBlur(){
                console.log(this.username)
            }
        }




    })
script>
html>

一、过滤案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>

head>
<body>
<div class="app">
    <input type="text" v-model="myText" @input="handledInput">
    <p v-for="data in newDataList">{{data}}p>


div>

body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods: {
            // handledInput() {
            //     var _this=this
            //
            //     this.newDataList = this.dataList.filter(function (item) {
            //         console.log(item)
            //         console.log(_this.myText)
            //         return item.indexOf(_this.myText)>-1
            //
            //     })
            //
            // }

            // es6 箭头函数，处理this指向的问题
            handledInput() {
                this.newDataList = this.dataList.filter(item=>{
                    return item.indexOf(this.myText) > -1

                })

            }
        }


    })


 

img

数组的过滤方法

    var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
     dataList=dataList.filter(function (item) {
        // return是true或false，如果是true，该元素会保留，否则不保留
        return item.length>4
    })
     console.log(dataList)
<script>

    var ll = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']

    var new_ll = ll.filter(function (item){
        //写逻辑
        return false
    })

    console.log(new_ll)


script>

item 是数组中一个一个的元素
return true则当前的元素留下
return false则不留下当前的元素

 

indexOf的使用:判断子字符串在该字符串的那个位置,不在返回 -1

     过滤数组中以at开头的所有字符串
     var myText='at'
      var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
     dataList=dataList.filter(function (item) {
         return item.indexOf(myText)>=0
         // return item.length>4
     })
     console.log(dataList)


     var res='lqz'.indexOf('f')
     console.log(res)

箭头函数,箭头函数内部的this，就是外层的this

 var f= function (a) {
         console.log(a)
     }
     var f=  a =>{
        console.log(a)
    }

    f(4)     // 函数才执行

二、事件修饰符

2 事件冒泡

案例：ul套li,点击li会触发ul的事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">
    <ul @click="handleUl">
        <li @click="handleLi">我是li1li>
        <li>我是li2li>
    ul>

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleLi(){
                console.log('li被点击l')
            },
            handleUl(){
                console.log('ul被点击l')
            },

        }

    })
script>
html>

 

解决方法1：.stop

只处理自己的事件，阻止事件冒泡,写在子控件中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">
    <ul @click="handleUl">
        <li @click.stop="handleLi">我是li1li>
        <li>我是li2li>
    ul>

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleLi(){
                console.log('li被点击l')
            },
            handleUl(){
                console.log('ul被点击l')
            },

        }

    })
script>
html>

 

解决方法2：.self

只处理自己的事件，子控件冒泡的事件不处理，写在父控件中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">
    <ul @click.self="handleUl">
        <li @click="handleLi">我是li1li>
        <li>我是li2li>
    ul>

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleLi(){
                console.log('li被点击l')
            },
            handleUl(){
                console.log('ul被点击l')
            },

        }

    })
script>
html>

 

3 .prevent

阻止a链接的跳转

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">
    <a href="https://www.baidu.com/" @click.prevent="handleClick">致命诱惑a>

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleClick(){
                console.log('a标签被点击了')
            },

        }

    })
script>
html>

 

 4.once

事件只会触发一次（适用于抽奖页面）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">
    
    <button @click.once="handleClick">秒杀button>

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleClick(){
                console.log('只能点一次哦')
            },

        }

    })
script>
html>

 

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>

head>
<body>
<div class="app">

    <ul @click.self="handleUl">
        <li @click.stop="handleLi1">li1,加了stop后，阻止了事件冒泡，事件不往上传递了li>
        <li @click="handleLi2">li2li>
    ul>


    <hr>
    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女a>
    <hr>
    <button @click.once="buttonClick">点我秒杀button>

div>

body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {
            handleLi1() {
                console.log('li1被点击了')
            },
            handleLi2() {
                console.log('li2被点击了')
            },
            handleUl() {
                console.log('ul被点击了')
            },
            handleA(){
                console.log('a被点击了')
                window.location='http://www.jd.com'  // 手动跳转
            },
            buttonClick(){
                console.log('button被点击了')
            }
        }


    })


script>
html>

三、按键修饰符

1 按键修饰符

keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；

keypress：当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件；

keyup：当用户释放键盘上的字符键时触发。

2 $event

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">

    <input type="text" v-model="msg" @keyup="handleUp($event)">

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:''
        },
        methods:{
            handleUp(event){
                console.log(event)
            },

        }

    })
script>
html>

 

3 案例：当敲回车，弹出输入的内容

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="app">

    <input type="text" v-model="msg" @keyup.enter="handleUp($event)">

div>
body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:''
        },
        methods:{
            handleUp(event){
                alert(this.msg)
            },

        }

    })
script>
html>

 

前端vue

相关

前端 vue3 随手记

标签