017 V @click监听+$event

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了操控数组，本次来学习一个监听事件。

在指令+事件+语法糖我们已经引入了用于处理Vue事件的v-on。

在事件绑定上，类似原生JS的onclick写法，用在HTML监听。

例如，我们监听一个按钮的单击事件，设置计数器，每次单击，目标元素就+1。

创建div：

1. <div id="myApp">
   
2.     请疯狂的点：{{counter}}
   
3.     <button @click="counter++">爱我就请点我！</button>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             counter:0
   
6.         }
   
7.     })
   
8. </script>

复制代码

如果实现上面的效果，我们需要使用JS并且动态修改DOM。

而在Vue中一个双向绑定就可以了。

@click的表达式可以直接使用JS，也可以直接在Vue实例的methods中的某个方法中。

继续修改，拓展一个按钮，单击一下+100，修改div：

1. <div id="myApp">
   
2.     请疯狂的点：{{counter}}
   
3.     <button @click="loveFishC()">+1</button>
   
4.     <button @click="loveFishC(100)">+100</button>
   
5. </div>

复制代码

修改Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             counter:0
   
6.         },
   
7.         methods:{
   
8.             loveFishC:function(cnt){
   
9.                 cnt = cnt || 1;
   
10. //                this指向当前的Vue实例app
    
11.                 this.counter += cnt;
    
12.             }
    
13.         }
    
14.     })
    
15. </script>

复制代码

在methods中我们定义了一个loveFishC的方法供@click调用。

这种在HTML元素上监听事件设计看似将DOM与JS紧耦合，违背了分离的原理。

实际呢，恰恰相反！

通过HTML元素就可以知道调用的是哪个方法，将逻辑与DOM解耦，更加便于维护。

当ViewModel销毁时，所有的事件处理器都会自动销毁，不用手动清理。

Vue还提供了一个$event，用于访问原生DOM事件。

例如我们可以组织一个超链接的打开，创建div：

1. <div id="myApp">
   
2.     <a href="https://ilovefishc.com/" @click="loveFishC('禁止打开哦',$event)">鱼C官网</a>
   
3. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             counter:0
   
6.         },
   
7.         methods:{
   
8.             loveFishC:function(msg,event){
   
9.                 event.preventDefault();
   
10.                 window.alert(msg);
    
11.             }
    
12.         }
    
13.     })
    
14. </script>

复制代码

通过window自带的event.preventDefault()方法来禁止URL的使用。

如果此事件没有需要显式处理，那么它默认的动作也不要做（因为默认是要做的）。

---

课后作业


1、v-on:click的简写（语法糖）是？

2、在HTML元素通过DOM与JS紧耦合来监听事件是否破坏分离原理？

3、$event不可以用来访问原生的DOM事件（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.@click
2.T
3.F

Ruide

1.@
2.通过HTML元素绑定JS方法，将逻辑与DOM解耦，更加便于维护
3.F

优时风

1

一笙彤

0

suweixuan1998

@click
否，将逻辑与DOM解耦，更加便于维护
F

HanYanShuang

学习

jack6666

1