day05

1.事件
stop capture prevent once self native
2.directives
3.路由
4.localStorage
5.生命周期函数

一、事件修饰符

1-1 阻止事件冒泡

@click.stop="handleClick" 可以阻止事件冒泡

1-2 实现事件捕获

<template>
  <div>
    <div class="parent" @click.capture="parent">
      parent
      <div class="child" @click="child">
        child
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"Home",
  methods:{
    parent(){
      alert("parent")
    },
    child(){
      alert("child")
    }
  }
};
</script>
<style scoped>
.parent{
  width:200px;
  height: 200px;
  background: #C20C0C;
}
.child{
  width:100px;
  height: 100px;
  background: blue;
}
</style>

1-3 @click.capture.stop=”handleClick” 阻止事件传播

1-4 事件只触发一次

@click.once="handleClick"

1-5 事件.native

当你给一个vue组件绑定事件时候，要加上native！

<router-link to="/about" @click.native="handleClick">about</router-link>

router-link是一个组件,你直接给它加事件是没有用的,必须加上native。给组件加事件必须加上native

1-6 prevent阻止默认事件

<a href="https://www.baidu.com" @click.prevent="handleClick">百度</a>

1-7 self只点击执行事件元素的时候触发

<template>
  <div>
    <div class="parent" @click.self="handleClick">
      hello world
      <div class="child" @click="child">child</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    handleClick() {
      console.log("parent");
    },
    child(){
      console.log("child")
    }
  }
};
</script>
<style scoped>
.parent {
  width: 200px;
  height: 200px;
  background: #c20c0c;
}
.child {
  width: 100px;
  height: 100px;
  background: blue;
}
</style>