Vue模板语法——事件绑定

Posted 2021-03-05 fpgz99810

一、v-on事件绑定

1. v-on指令
   用于绑定事件

2. v-on用法

   转=>最底层的技术渣 -- Vue基础语法之v-on

   转=>一瓶怡宝矿泉水 -- v-on指令

   • 直接绑定事件：

     注意：
     • 绑定的事件是对应的方法不是定义在data里面，而是定义在vue实例的methods里
     • 绑定的函数可直接绑定函数名——fun，也可以直接调用函数——fun()

     @事件名="方法" => @click="onClick"

     v-on:事件名="方法" => v-on:click="onClick"

         methods:{
             onClick:function(){
                 console.log('onClick')
             }
         }

   • 绑定事件类：

     注意： 当绑定多个事件时，需要传入一个对象，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。注意在vue实例中方法一定要有，不然就报错。

     v-on="{事件:方法}" => v-on="{mouseenter:onEnter,mouseout:onOut}"

         methods:{
                 onEnter:function(){
                     console.log("onEnter")
                 },
                 onOut:function(){
                     console.log("onOut")
             },
         }

   • 阻止默认形为其一（提交时刷新）

     v-on:事件="方法($event)" => @submit="onSubmit($event)"

         methods:{
                 onSubmit:function(e){
                     e.preventDefault();
                     console.log("onSubmit")
             }
         }

     注意： $event是vue里面的事件对象，vue能认识。在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。所以要阻止浏览器的默认行为，可以用事件对象e.preventDefault();

   • 阻止默认形为其二（提交时刷新）

     注意： 阻止form表单提交的这种浏览器默认事件，其实vue也想到了，并它封装好了，只要在事件的后面添加一个.prevent修饰符，表示阻止默认事件。

     v-on:事件.行为="方法" => @submit.prevent="onSubmit2"

     注： 绑定事件中，除了prevent阻止默认事件，还有stop,表示停止冒泡事件。

         @submit.stop="onSubmit2"

         methods:{
                 onSubmit2:function(){
                     console.log("onSubmit2")
             }
         }

   • 键盘事件（最好配合阻止默认行为一起使用）

     注： 当我们绑定的事件是keyup、keypress、keydown键盘事件时，而且需要判断按下是回车时。vue也想到了这点，只需要在键盘事件后面添加一个.enter修饰符即可。

     v-on:事件.键值="方法" => @keyup.enter="onEnter"
methods:{ onKeyup:function(){ console.log("onKeyup") } }

二、v-on例子

    <div id="app">
        <div v-text="num"></div>
        <div>
            <button v-on:click='num++'>加1</button>
            <button @click='add'>@加1</button>
            <button @click='sub()'>@减1</button>
            <button v-on:click='sub'>减1</button>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                //vue的函数必须定义在vue的methods属性之中
                add:function(){
                    //这里this指向就是当前Vue的实例对象vm
                    console.log(this === vm);
                    //Vue的实例对象可直接使用data中的数据
                    this.num++;
                },
                sub:function(){
                    console.log(this === vm);
                    this.num--;
                }
            }
        })
    </script>

三、事件函数参数传递

1. 调用函数与传递事件对象

   v-on:click="方法(value,$event)"

   注意： 当要传递事件对象时，必须将它放在实参最末位。并且事件对象的名字是固定的，只能是$event。

   • 例子：

       <div id="app">
           <div v-text="num"></div>
           <div>
               <button @click='event(11,22,$event)'>@加1</button>
           </div>
       </div>
       <script src="./js/vue.js"></script>
       <script type="text/javascript">
           var vm = new Vue({
               el:"#app",
               data:{
                   num:0
               },
               methods:{
                   event:function(para1,para2,e){
                       console.log(para1,para2);
                       console.log(e);
                       console.log(e.target.tagName);
                       console.log(e.target.innerhtml);
                   },
               }
           })
       </script>

2. 绑定函数名与传递事件对象

   v-on:click="方法名"

   注意： 绑定函数名的方法默认首个形参就是事件对象$event。

       methods:{
           fun:function(event){
   
           }
       }

   • 例子：

       <div id="app">
           <div v-text="num"></div>
           <div>
               <button @click='event'>事件调用</button>
           </div>
       </div>
       <script src="./js/vue.js"></script>
       <script type="text/javascript">
           var vm = new Vue({
               el:"#app",
               data:{
                   num:0
               },
               methods:{
                   event:function(e){
                       console.log(e);
                       console.log(e.target.tagName);
                       console.log(e.target.innerHTML);
                   }
               }
           })
       </script>

3. 总结

   事件绑定-参数传递：
   • 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个形式参数。
   • 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显性传递，并且事件函数传递的实际参数名称必须为$event。