【Vue笔记】Vue的事件修饰符

事件的基本作用

         1.使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名

         2.事件的回调需要配置在methods对象中，最终在vm上

         3.methods中配置的函数，不要用箭头函数！否则this就不是vm

         4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实调对象

         5.@click=“demo”和@click="demo（$event）"效果一致，但后者可以传参

事件举例：

        <div id="root">
          <h1>欢迎来到{{name}}学习</h1>
          <button v-on:click=showInfo1>点我提示信息1</button>
          <button @click=showInfo2($event,66)>点我提示信息2</button>
        </div>
     
      <script type="text/javascript">
        Vue.config.productionTip = false    //阻止vue在启动时生成生产提示
       
        //创建vue实例
           new Vue({
            el:'#root',
            data:{
                name:'qiaoyang'
                
            },
            methods: {
                  showInfo1 ( ){
                      alert('同学你好！')

                  },
                  showInfo2 (event,number ){
                      alert('同学你好！！')

                  }
            }
        })

常用事件修饰符

        1.prevent：阻止默认事件（常用）

        2.stop：阻止事件冒泡（常用）

        3.once：事件只触发一次（常用）

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

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

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

下面是前面三个常用修饰符的举例：

       <div id="root">
          <h1>欢迎来到{{name}}学习</h1>
        <!--prevent事件修饰符-->
          <a  href="https://www.baidu.com"    v-on:click.prevent=showInfo1>点我提示信息1</a>
        <!--stop事件修饰符-->
          <div class="demo1" @click=showInfo1>
          <button @click.stop=showInfo1></button>
          </div>
        <!--once事件修饰符-->
          <button @click.once=showInfo1></button>
        </div>
      
      
      <script type="text/javascript">
        Vue.config.productionTip = false    //阻止vue在启动时生成生产提示
       
        //创建vue实例
           new Vue({
            el:'#root',
            data:{
                name:'qiaoyang'
                
            },
            methods: {
                   showInfo1 (){
                      
                      alert('同学你好！')

                  }
                
            }
        })