• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue指令之v-on

开发技术 开发技术 4小时前 2次浏览

v-on的作用是给元素添加事件监听,可以简写为@

JavaScript的元素的事件监听都可以再vue中使用                     

                    原生的JavaScript的事件监听:

事件名称

方法

点击

onclick

双击

ondblclick

鼠标移上

onmouseenter

鼠标离开

onmouseleave

鼠标滑过

onmousemove

鼠标移除

onmouseout

失去焦点

onblur

聚焦

onfocus

键盘事件

onkeydown

上表的方法都是原生的JavaScript的事件方法,在vue中的使用是一律去除on,然后 添加v-on:或者@

 1     <div id="app" >
 2         <h1>{{a}}</h1>    
 3         <button @click="add">点击加1</button>
 4         <button v-on:click="minus">点击减1</button>
 5     </div>
 6     <script src = "js/vue.js"></script>
 7     <script>
 8       var vue = new Vue({
 9                el: "#app",
10                data: {
11                    a: 100
12                },
13                methods:{
14                    add() {
15                        this.a++
16                        console.log(this.a)
17                    },
18                    minus() {
19                        this.a --
20                        console.log(this.a)
21                    }
22                }
23              })
24     </script>

此时打开浏览器可以看到:

vue指令之v-on

下面的代码是错误的,因为vue没有定义对应的方法名称:

 1 var vue = new Vue({
 2     el: "#app",
 3     data: {
 4         a: 100
 5     },
 6     add() {
 7         this.a++
 8     },
 9     minus() {
10         this.a --
11     }
12 })

打开network面板会看到:

vue指令之v-on

原生的JavaScript的事件方法是不能和vue混用的

vue指令之v-on

 

此时会报错

同名方法会有覆盖情况,后写方法会覆盖先写的方法:

 1    var vue = new Vue({
 2                el: "#app",
 3                data: {
 4                    a: 100
 5                },
 6                methods:{
 7                    add() {
 8                        this.a++
 9                    },
10                    add() {
11                        this.a += 3
12                    },
13                    add() {
14                        this.a += 5
15                    }
16                 }
17              })

我们可以看到以4的基数进行相加:

vue指令之v-on

 

 

 

方法中是可以传入参数的:

 1     <div id="app" >
 2         <h1>{{a}}</h1>    
 3         <button @click="add(5)">点击加1</button>
 4     </div>
 5     <script src = "js/vue.js"></script>
 6     <script>
 7       var vue = new Vue({
 8                el: "#app",
 9                data: {
10                    a: 100
11                },
12                methods:{
13                    add(num) {
14                        this.a+= num
15                        console.log(this.a)
16                    }
17                 }
18              })
19     </script>

我们可以看到以5的基数进行相加:

vue指令之v-on

 

 我们可以查看方法中的事件参数

 1 methods:{  add(event) {  console.log(event)  } 

 

vue指令之v-on

 


程序员灯塔
转载请注明原文链接:vue指令之v-on
喜欢 (0)