017 V @click监听+$event

不二如是

                               
登录/注册后可看大图

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

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

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

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

创建div：

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

创建Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            counter:0
        }
    })
</script>

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

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

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

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

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

修改Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            counter:0
        },
        methods:{
            loveFishC:function(cnt){
                cnt = cnt || 1;
//                this指向当前的Vue实例app
                this.counter += cnt;
            }
        }
    })
</script>

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

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

实际呢，恰恰相反！

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

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

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

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

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

创建Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            counter:0
        },
        methods:{
            loveFishC:function(msg,event){
                event.preventDefault();
                window.alert(msg);
            }
        }
    })
</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