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

最新推荐文章于 2024-05-07 16:38:06 发布

꒰ঌsnail໒꒱

最新推荐文章于 2024-05-07 16:38:06 发布

阅读量847

点赞数

分类专栏： Vue框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_46839072/article/details/126125567

版权

Vue框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、Vue组件的样式绑定

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

(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>

在这里插入图片描述

2、绑定内联样式

<div :style=“”></div> //这种写法可以直接在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>

在这里插入图片描述

注意：
内联的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>

在这里插入图片描述

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>

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

(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>

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

(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>

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

(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>

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

(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>

在这里插入图片描述

꒰ঌsnail໒꒱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue组件的样式绑定&事件监听和处理】

1、为Html标签绑定class属性：v-bind,为class属性绑定一个对象，在对象中可以设置对象是否可用。注意：v-bind可以缩写为： 2、绑定内联样式1、事件监听：是通过v-on指令(用@符号代替)绑定事件处理程序2、多事件的处理：对于同一个用户交互事件，需要调用多个方法进行处理☀️举个例子：3、事件修饰符(1)DOM的事件原理：(2)Vue中使用v-on指令绑定事件时默认监听的是DOM事件的冒泡阶段点击内层，输出为冒泡阶段（内—中—外）：(3)...
复制链接

扫一扫