Vue.js-监听事件（思维模型）

最新推荐文章于 2023-10-30 21:23:09 发布

缘佳菌

最新推荐文章于 2023-10-30 21:23:09 发布

阅读量252

点赞数

分类专栏： Vue.js思维模型文章标签：事件绑定

本文链接：https://blog.csdn.net/qq_42878202/article/details/100847546

版权

Vue.js思维模型专栏收录该内容

1 篇文章 0 订阅

订阅专栏

监听事件

在这里插入图片描述

注：修饰事件不干扰父元素（可以包括自身）

部分代码：用于理解

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<script src="vue.min.js"></script>
<style type="text/css">
   * {
       margin: 0 auto;
       text-align:center;
       line-height: 40px;
   }
   div {
       width: 100px;
       cursor:pointer;
   }
   #grandFather {
       background: green;
   }
   #father {
       background: blue;
   }
   #me {
       background: red;
   }#son {
        background: gray;
    }
</style>
</head>

<body>
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
            father
            <div id="me" v-on:click="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>
 
</div>
   
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<script src="vue.min.js"></script>

</head>

<body>
<div id="div1">
   
  <a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a>
   
  <br>
  <a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
  <br>
  <a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a>
   
  <br>
  <br>
  <form @submit="jump" action="http://12306.com">
    <button type="submit">正常的form</button>
  </form>
  <form @submit.prevent="jump" action="http://12306.com">
    <button type="submit">prevent jump()之后的form</button>
  </form>
  <form @submit.prevent action="http://12306.com">
    <button type="submit">纯prevent之后的form</button>
  </form>
   
</div>
   
<script>
new Vue({
	el:'#div1',
	data:{
	},
	methods:{
		jump:function(){
			alert("jump()函数被调用");
		}
	}
})
</script>
</body>
</html>