017 V @click监听+$event
本帖最后由 不二如是 于 2018-9-13 17:02 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了操控数组，本次来学习一个监听事件。
在指令+事件+语法糖我们已经引入了用于处理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）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.@click
2.T
3.F 1.@
2.通过HTML元素绑定JS方法，将逻辑与DOM解耦，更加便于维护
3.F 1 0 @click
否，将逻辑与DOM解耦，更加便于维护
F 学习 1
页:
[1]