Vue监听事件总结

**引入Vue.js文件**
如下，根据自己的文件目录引入路径
<script type="text/javascript" src="../js/vue.js"></script>

1、定义监听事件
使用v-on或者@监听事件，如下
点击加1
<button @click=“countSecond”>点击加2
通过{{countNumber}}获取vue中的数据

点击了几{{countNumber}}

2、新建一个vue对象
data属性是对数据的获取，最终将数据显示在界面
methods用来监听方法

     var vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
      countNumber:0
    },
    methods:{
      count:function(){
          this.countNumber++;
      },
      countSecond:function(){
        this.countNumber=this.countNumber+2;
      }
    }
  })

如下图所示、右边部分是在谷歌浏览器中使用vue-devtools-dev工具，方便vue的调试，需要自己装配

3、对于冒泡事件的处理
什么事冒泡？简单的说就是 父元素里有 子元素， 如果点击了 子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素
3.1）定义父子级的监听事件

3.2)创建一个vue对象，管理定义的div模块

var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })

当在son标签上点击，将依次弹出alert(son),alert(me),alert(father),alert(grandFather)
3.3)阻止冒泡
添加事件修饰符，在me上的click后面加一个 .stop， 那么冒泡到了这里就结束了，就不会冒到father上面去了。