Vue学习：事件修饰符

当使用连接点击，触发默认事件时，会出现跳转，跳转是默认行为，可以取消

    <!-- 准备容器 -->
    <div id='root'> 
        <h2>欢迎页面，你好 {{name}}</h2>
        <a href="http://baidu.com" @click="showInfo">点我提示信息</a>
      
    </div>
    <script>
        new Vue({ 
            el: '#root',
            data: {
                name:'Amy',
            },
            methods:{
                showInfo(event){//可以接受参数吗
                    //阻止默认行为
                    event.preventDefault();
                    alert('nih');

               
                }
            }

        });

在vue中，使用简洁方式 直接在事件后面加.prevent==阻止默认事件

    <!-- 准备容器 -->
    <div id='root'> 
        <h2>欢迎页面，你好 {{name}}</h2>
        <a href="http://baidu.com" @click.prevent="showInfo">点我提示信息</a>
      
    </div>
    <script>
        new Vue({ 
            el: '#root',
            data: {
                name:'Amy',
            },
            methods:{
                showInfo(event){//可以接受参数吗
                    //阻止默认行为
                    alert('nih');

               
                }
            }

        });

prevent就是事件修饰符号

Vue提供的事件修饰符的种类：6个

        1、prevent:阻止默认事件（常用）

        2、stop:阻止事件冒泡（常用）

        3、once:事件只触发一次（常用）

        4、capture：使用事件的捕获模式

        5、self:只有event.target是当前操作的元素是才触发事件

        6、passive:事件的默认行为立即执行，无需等待事件回调执行完毕

---

stop:事件冒泡： 冒泡指的是事件向上传导，当后代元素的事件被触发时，其祖先元素相同的事件也会触发--点击按钮会冒泡两次。后代元素触发给祖先元素。事件触发两次

    <div id='root'> 
        <h2>欢迎页面，你好 {{name}}</h2>
        <!-- 阻止默认事件 -->
        <a href="http://baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
      
    </div>
    <script>
        new Vue({ 
            el: '#root',
            data: {
                name:'Amy',
            },
            methods:{
                showInfo(event){//可以接受参数吗
                   alert('世界好')
                },
                
            }
           

        });
    </script>

阻止事件冒泡 (当后代元素的事件被触发时，其祖先元素相同的事件也会触发)

        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

---

once:事件只触发一次（常用，不然每次点击都会触发

        <!-- once:事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>

---

进行 capture：使用事件的捕获模式

实际上，先进行点击触发的是事件的捕获，然后是事件冒泡，默认情况下 事件冒泡下进行事件触发。3阶段--先捕获道div1,没有目标元素事件，然后div2捕获到目标事件，然后事件从目标元素项祖先元素传递，依次触发事件

点击div2触发两个

      <!--     4、capture：使用事件的捕获模式 -->
        <div class="box1" @click="showMesage(1)">
            div1
            <div class="box2" @click="showMesage(2)">
                div2
            </div>
        </div>

        new Vue({ 
            el: '#root',
            data: {
                name:'Amy',
            },
            methods:{
                showInfo(event){//可以接受参数吗
                   alert('世界好')
                },
                showMesage(msg){
                   console.log(msg)

                }
                
            }
           

        });

 

不想要在冒泡阶段进行处理事件，想要在捕获上开始进行处理事件

        <!--     4、capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMesage(1)">
            div1
            <div class="box2" @click="showMesage(2)">
                div2
            </div>
        </div>

 

---

self:只有event.target是当前操作的元素是才触发事件

当出现冒泡的情况，event.target永远都是出现触发事件的对象

     <div class="demo1" @click="showSelf">
            <button @click="showSelf">点我提示信息</button>
        </div>

 冒泡触发两次事件  目标对象仍然是触发事件对象

  showSelf(m){
                    console.log(m.target)
                }

 self加载谁上面就管谁，如果有人触发了该对象上的事件，并且只有该事件对象是目标对象时候才能触发

       <!--     5、self:只有event.target是当前操作的元素是才触发事件 -->
        <div class="demo1" @click.self="showSelf">
            <button @click="showSelf">点我提示信息</button>
        </div>

---

 ul-绑定滚动事件" @scroll当事件滚动时候 

@scroll是给滚动条加的事件 触发的方式有 鼠标滚轮 和鼠标拖拽 键盘按键上下-滚动条不动的时候无法触发

        <ul class="list" @scroll="demo" >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

@wheel-鼠标滚轮滚动触发事件 -当滚动条到底的时候也可以触发’

        <ul class="list" @wheel="demo" >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

     demo(){
                    console.log('滚动了')

                }

---

事件触发方式：先触发事件，触发事件函数的调用（浪费了时间 页面出现卡顿），调用之后滚动条再往下走 

        <!--   6、passive:事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul class="list" @wheel="demo" >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

                demo(){
                    for(let i=0;i<100000;i++){
                        console.log('#')
                    }
                    console.log('累死了')

                }

 

passive：滚动条先往下走，不需要等事件回调函数执行完毕 

        <!--   6、passive:事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul class="list" @wheel.passive="demo" >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

---

 不是所有的事件都存在默认事件后执行的问题，比如@scroll，直接默认事件就先执行了，不需要passive,优先响应滚动

移动端的passive使用的比较多