Vue2.0学习笔记：Vue事件修饰符的使用(转载)

事件处理

     如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。

     在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture：与事件冒泡的方向相反，事件捕获由外到内
• .self：只会触发自己范围内的事件，不包含子元素
• .once：只会触发一次

• .stop 防止事件冒泡

  冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外  子节点-》父节点的点击事件

•  1 <!-- HTML --> 
   2 <div id="app"> 
   3 　　<div class="outeer" @click="outer"> 
   4 　　　　<div class="middle" @click="middle"> 
   5 　　　　　　<button @click="inner">点击我(^_^)</button>
   6  　　　　</div>
   7  　　</div> 
   8 　　<p>{{ message }}</p> 
   9 </div>
  10  let app = new Vue({
  11  　　el: '#app', 
  12 　　 data () { 
  13 　　　　return { message: '测试冒泡事件' } }, 
  14 　　methods: { 
  15 　　　　inner: function () {
  16 　　　　　　 this.message = 'inner： 这是最里面的Button' 
  17 　　　　}, 
  18 　　　　middle: function () { 
  19 　　　　　　this.message = 'middle: 这是中间的Div' 
  20 　　　　}, 
  21 　　　　outer: function () { 
  22 　　　　　　this.message = 'outer: 这是外面的Div' 
  23 　　　　} 
  24 　　} 
  25 })