Vue也给我们提供了很多不同触发函数的修饰符，用起来很方便，大大提高了开发效率
```<template>
<div>
<ul>
<li>
<!-- 可以直接写一些简单的js代码 -->
<button @click="num++">点击加一</button>
<p>_data.num:{{ num }}</p>
</li>
<li>
<!-- 在面对复杂逻辑,用函数解决 -->
<button @click="target1">点击触发该target函数</button>
<p>target函数{{ flag ? '未触发' : '触发了' }}</p>
</li>
<li>
<!-- 什么？你想传参？来来来 -->
<!-- $event是事件对象 -->
<button @click="target2(2, $event)">点击传参</button>
<p>{{ value }}</p>
</li>
<li>
<hr />
<!-- 假如你想做用vue的一些事件修饰符 -->
<hr />
</li>
<li>
<!-- 阻止事件冒泡 -->
<div class="father" @click="thingsF">
父
<div class="son" @click.stop="thingsS">子</div>
</div>
</li>
<li>
<!-- 阻止默认事件 -->
a链接<a href="http://www.baidu.com" @click.prevent>百度</a>
</li>
<li>
<!-- 当点击内部的子元素时，事件不会从内向外传播，而是从外向内传 -->
<!-- 使用事件捕获模式 -->
<!-- 事件捕获指的是改变dom事件流转的机制,将从内到外触发改变为从外到内依次触发 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div class="one" @click.capture="one">
one
<div class="two" @click="two">
two
<div class="three" @click="three">three</div>
</div>
</div>
</li>
<li>
<!-- 修饰符self,只有当前元素才可以触发自己的身上绑定的事件，别的元素不行 -->
<div @click.self="trigger" class="one">
本体元素
<p class="two">子元素</p>
</div>
</li>
<li>
<button @click.once="msg++">msg++</button>
<p>msg:{{ msg }}</p>
</li>
<li>
<!-- 当然，你还可以监听滚动条 -->
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<div id="box" @scroll.passive="trigger2">
<p>我认为, 总结的来说, 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 经过上述讨论, 现在, 解决随机一段废话的问题, 是非常非常重要的. 所以, 查尔斯·史考伯曾经说过, 一个人几乎可以在任何他怀有无限热忱的事情上成功。 这句话看似简单，但其中的阴郁不禁让人深思. 随机一段废话, 到底应该如何实现. 我们都知道, 只要有意义, 那么就必须慎重考虑.这样看来, 培根曾经说过, 要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。带着这句话, 我们还要更加慎重的审视这个问题: 那么, 从这个角度来看, 随机一段废话, 到底应该如何实现. 从这个角度来看, 非洲在不经意间这样说过, 最灵繁的人也看不见自己的背脊。带着这句话, 我们还要更加慎重的审视这个问题: 随机一段废话, 到底应该如何实现. 从这个角度来看, 这样看来, 我们都知道, 只要有意义, 那么就必须慎重考虑.一般来讲, 我们都必须务必慎重的考虑考虑. 总结的来说, 经过上述讨论, 塞内加在不经意间这样说过, 勇气通往天堂，怯懦通往地狱。带着这句话, 我们还要更加慎重的审视这个问题: 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 这样看来, 随机一段废话, 发生了会如何, 不发生又会如何. 既然如何, 就我个人来说, 随机一段废话对我的意义, 不能不说非常重大.
了解清楚随机一段废话到底是一种怎么样的存在, 是解决一切问题的关键.随机一段废话, 发生了会如何, 不发生又会如何.
经过上述讨论,
问题的关键究竟为何? 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 日本谚语曾经提到过, 不幸可能成为通向幸福的桥梁。带着这句话, 我们还要更加慎重的审视这个问题: 可是，即使是这样，随机一段废话的出现仍然代表了一定的意义. 博说过一句富有哲理的话, 一次失败，只是证明我们成功的决心还够坚强。 维这句话看似简单，但其中的阴郁不禁让人深思.
那么, 一般来讲, 我们都必须务必慎重的考虑考虑. 这样看来, 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 我们一般认为, 抓住了问题的关键, 其他一切则会迎刃而解.我认为, 随机一段废话似乎是一种巧合，但如果我们从一个更大的角度看待问题，这似乎是一种不可避免的事实. 这样看来, 裴斯泰洛齐曾经说过, 今天应做的事没有做，明天再早也是耽误了。这句话把我们带到了一个新的维度去思考这个问题: </p>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
num: 0,
flag: true,
value: '说了一万遍,你现在还没传值',
msg : 99
}
},
methods: {
target1 () {
this.flag = false
alert('你触发了target函数')
},
target2 (n, e) {
this.value = '你传的值是' + n + ',卧槽你还传了事件对象,你看看控制台'
console.log(e.target)
},
thingsF () {
console.log('父元素的事件触发了')
},
thingsS () {
console.log('子元素的事件触发了')
},
one () {
console.log('one元素的事件触发了')
},
two () {
console.log('two元素的事件触发了')
},
three () {
console.log('three元素的事件触发了')
},
trigger () {
console.log('自己身上的元素触发了')
},
trigger2(){
console.log('滚动条触发了');
}
}
}
</script>
<style>
.father {
width: 100px;
height: 100px;
background-color: red;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
}
.one {
width: 200px;
height: 200px;
background-color: orange;
}
.two {
width: 100px;
height: 100px;
background-color: green;
}
.three {
width: 50px;
height: 50px;
background-color: goldenrod;
}
#box{
width: 300px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
</style>
按键修饰符
<template>
<div>
<!-- 现在来讲一下按键修饰符 -->
<ul>
<li>
<span>你可以直接写键盘按键的名字</span>
<input type="text" @keyup.enter="ipt1">
</li>
<li>
<span>当然你也可以写按键对应的键码</span>
<input type="text" @keyup.106="ipt2">
</li>
<li>
<span>当然你也可以用系统键和普通键配合使用</span>
<input type="text" @keyup.ctrl.67="ipt3">
</li>
<li>
<span>鼠标左中右都可</span>
<input type="text" @keyup.left="ipt4">
</li>
</ul>
</div>
</template>
<script>
export default {
methods : {
ipt1(){
console.log('你按下了enter键');
},
ipt2(){
console.log('你按下了*键');
},
ipt3(){
console.log('你按下了ctrl和c');
},
ipt4(){
console.log('你按下了鼠标中键');
}
}
}
</script>
