在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&div class="tuijianWrap" ref='scrollList'&
&ul ref='hookUl'&
&li v-for="item,index in news" @click="showDetail(item.source_url)"&
**&div class="hide" @click.stop="showToggle(index,$event)"&**
&div class="hideNews" v-if='show.indexOf(index) &= 0'&
代码中@click.stop="showToggle(index,$event)"&这个点击事件为什么会执行两次？log图
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
尝试@click.prevent
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：可以用&v-on&指令监听 DOM 事件来触发一些 JavaScript 代码。
&div id="example-1"&
&button v-on:click="counter += 1"&增加 1&/button&
&p&这个按钮被点击了 {{ counter }} 次。&/p&
var example1 = new Vue({
el: '#example-1',
counter: 0
这个按钮被点击了 0 次。
方法事件处理器
许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在&v-on&指令中是不可行的。因此&v-on&可以接收一个定义的方法来调用。
&div id="example-2"&
&!-- `greet` 是在下面定义的方法名 --&
&button v-on:click="greet"&Greet&/button&
var example2 = new Vue({
el: '#example-2',
name: 'Vue.js'
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
// 也可以用 JavaScript 直接调用方法
example2.greet() // -& 'Hello Vue.js!'
内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
&div id="example-3"&
&button v-on:click="say('hi')"&Say hi&/button&
&button v-on:click="say('what')"&Say what&/button&
el: '#example-3',
methods: {
say: function (message) {
alert(message)
Say hi&Say what
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量&$event&把它传入方法：
&button v-on:click="warn('Form cannot be submitted yet.', $event)"&Submit&/button&
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
事件修饰符
在事件处理程序中调用&event.preventDefault()&或&event.stopPropagation()&是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为&v-on&提供了&事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
&!-- 阻止单击事件冒泡 --&
&a v-on:click.stop="doThis"&&/a&
&!-- 提交事件不再重载页面 --&
&form v-on:submit.prevent="onSubmit"&&/form&
&!-- 修饰符可以串联
&a v-on:click.stop.prevent="doThat"&&/a&
&!-- 只有修饰符 --&
&form v-on:submit.prevent&&/form&
&!-- 添加事件侦听器时使用事件捕获模式 --&
&div v-on:click.capture="doThis"&...&/div&
&!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --&
&div v-on:click.self="doThat"&...&/div&
按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为&v-on&在监听键盘事件时添加按键修饰符：
&!-- 只有在 keyCode 是 13 时调用 vm.submit() --&
&input v-on:keyup.13="submit"&
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
&!-- 同上 --&
&input v-on:keyup.enter="submit"&
&!-- 缩写语法 --&
&input @keyup.enter="submit"&
全部的按键别名：
delete (捕获 “删除” 和 “退格” 键)
可以通过全局&config.keyCodes&对象：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离（separation of concern）传统理念。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用&v-on&有几个好处：
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vue 2.0 使用@click.self 绑定自身事件不触发是怎么回事？
场景：移动端开发，点击蒙层关闭弹窗，但是不能触发蒙层上的div盒子，也即是触发父级，事件不会传递给子级
vue提供了一个.self修饰符，以前使用过，这次突然不好使了，不知道怎么回事。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
@click.native.self
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --&
&div v-on:click.self="close" ref="pop"&
&button&&/button&
给组件绑定原生事件
有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on
&my-component v-on:click.native.self="close"&&/my-component&
close(e) {
console.log(e.target)
this.$refs.pop.style.display = 'none'
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}