• 【Vue组件的样式绑定&事件监听和处理】

    目录

    一、Vue组件的样式绑定

    1、为Html标签绑定class属性：v-bind,为class属性绑定一个对象，在对象中可以设置对象是否可用。注意：v-bind可以缩写为：

    (1)绑定class属性,由绑定的变量来决定应用哪个样式。

    (2)可以将样式直接设置成Vue组件中的数据对象。

    <script src="https://unpkg.com/vue@next">script>
<style>
    .blue{
        color:blue;
    }
    .red{
        color:red;
    }
    .green{
        color:green;
    }
    .font{
        font-size: 25px;
    }
style>
<body>
    <div id="app">
        <div :class="{blue:isBlue,red:isRed}">//这个写法，两个样式互斥
            西安邮电大学
        div>
        <div :class="[greenClass,fontClass]"> //这个写法，两个样式可以并存
            西北政法大学
        div>
    div>
    <script>
        const obj = {
            data(){
                return{
                    isBlue:true,
                    isRed:false,
                   
                    greenClass:'green',
                    fontClass:'font'
                }
            },
            methods:{

            }
        }
        Vue.createApp(obj).mount('#app')
    script>  
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    在这里插入图片描述

    2、绑定内联样式

    //这种写法可以直接在data函数直接定义样式属性值。

    <script src="https://unpkg.com/vue@next">script>
<body>
    <div id="app">
        <div :style="{color:textColor,fontSize:textFont}">
            陕西师范大学
        div>
    div>
    <script>
        const obj = {
            data(){
                return{     
                    textColor:'red',
                    textFont:'30px'
                }
            },
            methods:{

            }
        }
        Vue.createApp(obj).mount('#app')
    script>  
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    注意：
    内联的CSS样式属性名与外部的CSS样式属性名有区别的
    内联的CSS样式属性名：通常采用驼峰命名.例如:fontSize
    外部的CSS样式属性名：采用’-'进行连接.例如： font-size

    二、Vue的事件监听和处理

    1、事件监听：是通过v-on指令(用@符号代替)绑定事件处理程序

    2、多事件的处理：对于同一个用户交互事件，需要调用多个方法进行处理

    (1)获取事件类型：$event
    (2)多事件处理的语法格式：@事件名 = “方法1,方法2”

    ☀️举个例子：

    <script src="https://unpkg.com/vue@next">script>
<body>
    <div id="app">
        <div>点击次数：{{ count }}div>
        <button @click="myClick(2),logs($event)">点击button>
    div>
    <script>
        const obj = {
            data(){
                return{
                count:0
              }
            },
            methods:{
                myClick(step){
                    this.count += step
                },
                logs(event){
                    console.log(event)
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    3、事件修饰符

    (1)DOM的事件原理：

    ①首先会从父组件开始依次传递到子组件 — 事件捕获
    ②其次当事件传递到最内层的子组件时，会逆向再进行一次传递，从子组件依次向上传递 — 事件冒泡

    (2)Vue中使用v-on指令绑定事件时默认监听的是DOM事件的冒泡阶段

     <script src="https://unpkg.com/vue@next">script>
<style>
    #d1{
        width:300px;
        height:280px;
        background-color: red;
    }
    #d2{
        width: 200px;
        height:200px;
        background-color: rgb(121, 121, 199);
    }
    #d3{
        width: 100px;
        height: 100px;
        background-color: green;
    }
style>
<body>
    <div id="app">
        <div id="d1" @click="click1" >
        外层
            <div id="d2" @click="click2" >
            中层
                <div id="d3" @click="click3">
                内层
                div>
            div>
        div>
    div>

    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中层')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    点击内层，输出为冒泡阶段（内—中—外）：
    在这里插入图片描述

    (3)capture：如果需要监听捕获阶段的事件,在Vue中使用capture事件修饰符来实现。

     <script src="https://unpkg.com/vue@next">script>
<style>
    #d1{
        width:300px;
        height:280px;
        background-color: red;
    }
    #d2{
        width: 200px;
        height:200px;
        background-color: rgb(121, 121, 199);
    }
    #d3{
        width: 100px;
        height: 100px;
        background-color: green;
    }
style>
<body>
    <div id="app">
        <div id="d1" @click.capture="click1" >
        外层
            <div id="d2" @click.capture="click2" >
            中层
                <div id="d3" @click.capture="click3">
                内层
                div>
            div>
        div>
    div>

    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中层')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    点击内层，输出为捕获阶段（外—中—内）：
    在这里插入图片描述

    (4)stop：阻止事件的传递

    <script src="https://unpkg.com/vue@next">script>
<style>
    #d1{
        width:300px;
        height:280px;
        background-color: red;
    }
    #d2{
        width: 200px;
        height:200px;
        background-color: rgb(121, 121, 199);
    }
    #d3{
        width: 100px;
        height: 100px;
        background-color: green;
    }
style>
<body>
    <div id="app">
        <div id="d1" @click.stop="click1" >
        外层
            <div id="d2" @click.stop="click2" >
            中层
                <div id="d3" @click.stop="click3">
                内层
                div>
            div>
        div>
    div>

    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中层')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    点击内层，输出为只有内层，因为其它层都被阻止，不会进行默认冒泡事件也不会捕获：
    在这里插入图片描述

    (5)once：只触发一次事件

    <script src="https://unpkg.com/vue@next">script>
<style>
    #d1{
        width:300px;
        height:280px;
        background-color: red;
    }
    #d2{
        width: 200px;
        height:200px;
        background-color: rgb(121, 121, 199);
    }
    #d3{
        width: 100px;
        height: 100px;
        background-color: green;
    }
style>
<body>
    <div id="app">
        <div id="d1" @click.stop="click1" >
        外层
            <div id="d2" @click.stop="click2" >
            中层
                <div id="d3" @click.stop.once="click3">
                内层
                div>
            div>
        div>
    div>

    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中层')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    点击内层第一次时，只能被阻止了一次，所以中层没响应，第二次点击，则会冒泡给中层，之后点击内层，中层则会被打印出来，但是外层不会被响应，因为外层被阻止了冒泡事件。
    在这里插入图片描述

    (6)prevent：禁止默认事件

    <script src="https://unpkg.com/vue@next">script>
<body>
    <div id="app">
        <a href="https://www.baidu.com" @click.prevent="myClick">百度一下a>
    div>
    <script>
        const obj = {
            data(){
                return{

                }
            },
            methods:{
                myClick(){
                console.log('跳转成功')
               }
           }
        }
        Vue.createApp(obj).mount('#app')
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

  • 相关阅读:
    【转】推送消息&推送机制
    Ubuntu安装boost
    雷达干扰和烧穿范围简介
    学习windows系统让python脚本在后台运行的方法
    计算机是什么
    hevc 继续色度半像素差值
    现代化战机之路：美国空军U-2侦察机基于Jenkins和k8s的CI/CD架构演进
    [架构之路-51]：架构师 - 用系统化、结构化思维解决复杂难搞的软件故障问题 - 马克思主义哲学在软件系统中的应用
    学习Java基础面试题第五天
    SpEL 注入 学习笔记
  • 原文地址：https://blog.csdn.net/m0_46839072/article/details/126125567