1.8学习笔记-CSDN博客

本文链接：https://blog.csdn.net/m0_51603531/article/details/122381075

v-on参数
1.该方法不需要额外参数，方法后可不写（），若方法中本身有一个参数，会默认将原生事件event参数传递进去
2.如果需要同时传递某个参数，同时需要event，用$event传入。

v-on修饰符

 <!-- .stop阻止冒泡 -->
        <div @click='btn02'>
            <button @click.stop='btn01'>按钮1</button>
        </div>
        
 <!-- .prevent阻止默认行为 -->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent='btn03'>
        </form>
        
<!-- 串联修饰符 -->
        <button @click.stop.prevent=''></button>
        
 <!-- 键修饰符 -->
        <input type="text" @keyup.enter='btn04'>
        
  <!-- 点击回调只会触发一次 -->
        <button @click.once='btn01'></button>

v-if , v-else,v-else-if
与JavaScript的条件语句类似
v-if原理：
v-if后面的条件为false时，对应的元素及其子元素不会渲染，不会有对应标签出现在DOM中。

小tip
Vue在进行DOM渲染时，出于性能考虑，会尽可能复用已存在的元素而不是重新创建新的。
可以给对应的input加不同的key解决

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <div id="app">
        <div v-if=isShow>
            <label for="username">输入用户名</label>
            <input type="text" placeholder="用户名" id="username" key='username'>
        </div>
        <div v-else>
            <label for="email">输入邮箱</label>
            <input type="text" placeholder="输入邮箱" id="email" key='email'>
        </div>
        <button @click="isShow=!isShow">切换登录方式</button>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isShow: true,
            },
            methods: {

            }
        })
    </script>
</body>

v-show
与v-if类似，都决定一个元素是否渲染
区别：
当v-show条件为false时，仅仅是将元素的display属性设置为none。
v-if则是直接清除元素，使它不在DOM中。
当元素频繁隐藏与显示时，推荐使用v-show.

循环遍历

 <div id="app">
        <!-- 遍历数组 -->
        <ul>
            <li v-for="item in names">{{item}}</li>
            <li v-for='(item,index) in names'>{{index}} {{item}}</li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
            <li v-for="item in obj">{{item}}</li>
            <li v-for='(value,key,index) in obj'>{{value}} {{key}} {{index}}</li>
        </ul>
    </div>