知识点：
事件流
当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点会收到该事件，这个传播的过程叫做DOM事件流
事件又分为 冒泡事件 捕获事件
冒泡事件
微软提出 事件由子元素到父元素的过程 称之为冒泡 金鱼吐泡泡
捕获事件
网景提出 事件由父元素到子元素的过程 称之为捕获 鹰抓老鼠
当两者同时出现时 先捕获 后冒泡
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 180px;height: 180px;background:gold;margin: 100px auto;padding: 30px;border-radius: 50%;}.outer .center{width: 130px;height: 130px;padding: 30px;background:pink;border-radius: 50%;}.outer .center .inner{width: 130px;height: 130px;background:cyan;border-radius: 50%;}</style></head><body><div id="app"><!-- .self会阻止center向outer传递事件（冒泡） --><div class="outer" @click.self="outer"><!-- center没有添加self属性，因此inner会冒泡到center --><div class="center" @click="center"><div class="inner" @click.self="inner"></div></div></div></div><script src="js/vue.js"></script><script>var vue = new Vue({el:"#app",methods:{outer() {console.log("外层")},center() {console.log("中间")},inner(event) {console.log("内层")}}})</script></body></html>
