Vue模板语法——v-on 事件绑定

Posted on 2024-01-28 11:59 linFen 阅读(213) 评论(0) 编辑收藏举报

一、v-on事件绑定

v-on指令
用于绑定事件
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>

三、事件函数参数传递

调用函数与传递事件对象

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>

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

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>

总结

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

刷新页面返回顶部

luluping

公告

Vue模板语法——v-on 事件绑定

一、v-on事件绑定

二、v-on例子

三、事件函数参数传递