Vue：事件修饰符

常见得修饰符：
1.prevent：阻止默认事件触发只触发函数
2.stop：阻止冒泡：冒泡是会向父级跳转的
3.once：函数只触发一次

修饰符代码 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="firstVue">
  <h1>函数修饰符</h1>
  <h2>prevent:阻止默认事件</h2>
  <a href="http://www.baidu.com" @click.prevent="showInfo">点击</a>
  <h2>stop:阻止冒泡:向上</h2>
  <div @click="showInfo">

    <button @click.stop="showInfo">点我</button>
  </div>
  <h2>once:只触发一次，再次运行不行</h2>
  <button @click.once="showInfo">点我</button>
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data() {
      return {
        main:"VUE"
      }
    },
    methods:{
      showInfo(a,b){
        alert(a+""+b);
        console.log(this);
      }
    }
  })
  console.log(v)
</script >
</html>
posted @ 2021-11-08 10:47  旅祸少年  阅读(86)  评论(0)    收藏  举报