vue初识

最新推荐文章于 2025-05-23 16:22:38 发布

m0_初始小白

最新推荐文章于 2025-05-23 16:22:38 发布

阅读量82

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_58721742/article/details/132370025

版权

本文详细介绍了JavaScript中事件修饰符如stop、.prevent、.capture、.self和.once的使用，以及Vue.js中的v-model双向绑定、数组遍历、v-if/v-show差异和DOM操作原理（回流与重绘）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件修饰符:

stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身触发时触发回调

.once 事件只触发一次

      <!--  .stop 阻止冒泡：阻止事件继续向外传播 -->
        <div @click="log4" class="firstBox">
            <div @click="log3" class="secondBox">
                <div @click.stop="log2" class="thirdBox">
                    <button @click="log1">log1111</button>
                </div>
            </div>
        </div>
        <!--  .capture 添加捕获模式  -->
        <div @click="log4" class="firstBox">
            <div @click="log3" class="secondBox">
                <div @click.capture="log2" class="thirdBox">
                    <button @click="log1">log2222</button>
                </div>
            </div>
        </div>
        <!--  .self  只有当事件在该元素本身触发时才会触发 -->
        <div @click="log4" class="firstBox">
            <div @click="log3" class="secondBox">
                <div @click.self="log2" class="thirdBox">
                    <button @click="log1">log3333</button>
                </div>
            </div>
        </div>
        <!--  .once  事件只会触发一次 -->
        <div @click="log4" class="firstBox">
            <div @click.once="log3" class="secondBox">
                <div @click.once="log2" class="thirdBox">
                    <button @click="log1">log4444</button>
                </div>
            </div>
        </div>
        <!--  .prevent 阻止默认时间 -->
        <a href.prevent="https://www.baidu.com/">asdas</a>

const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                log1() {
                    console.log(11111111);
                },
                log2() {
                    console.log(22222222);
                },
                log3() {
                    console.log(33333333);
                },
                log4() {
                    console.log(44444444);
                },
            },
        })

v-model:数据双向绑定简写"v-model="value""

   <!-- v-model 数据双向绑定，表单的控件 -->
        <input type="text" v-model:value="value">
        <!-- 简写 -->
        <input type="text" v-model="value">
        <button @click="logout">log</button>

 const vm = new Vue({
            el: '#app',
            data: {
                value: "",
            },
            methods: {
                logout() {
                    console.log(this.value);
                }
            },
        })

样式的使用

数组
三木表达式
数组内置对象（对象的键是样式的名字，值是Boolean类型）
直接通过对象

v-for和key

key:必须是唯一值,必须是数字或字符串, 作用:提高重排效率,就地复用

遍历数组

<div v-for="(item,index) in list" :key="index">{{item}}=====>{{index}}</div>
<!--  遍历伪数组-->
<div v-for="(item,index) in listOBj" :key="item.id">{{item}}=====>{{index}}</div>

遍历对象

 <!--  遍历对象-->
<div v-for="(key,index,value) in obj" :key=""> {{key}}===={{index}}====={{value}}</div>

遍历数字

<div v-for="num in 5">23</div>

v-if和v-show的异同

相同点: 隐藏元素

不同点:

v-if:删除DOM元素,可以与v-else-if v-else连用

v-show:设置display:none

应用场景:

v-if:应用于一次或少次切换

v-show:应用于频繁切换

回流和重绘

回流:当元素属性的大小或者边距改变时,需要重建的过程

重绘:元素属性的样式(颜色)改变时,需要重新渲染的过程

回流必将会引起重绘,重绘不一定会引起回流