|
|
@@ -4,6 +4,23 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box1{
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ .box2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: green;
|
|
|
+ }
|
|
|
+ .box3{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: blue;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app">
|
|
|
@@ -13,6 +30,17 @@
|
|
|
<!-- <button v-on:click="changeStr">按钮</button> -->
|
|
|
<button @click="changeStr">按钮</button>
|
|
|
|
|
|
+ <div class="box1" v-on:click="box1Fun">
|
|
|
+ <div class="box2" v-on:click="box2Fun">
|
|
|
+ <!-- .stop 阻止事件冒泡 -->
|
|
|
+ <div class="box3" v-on:click.stop="box3Fun"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- .prevent 阻止默认行为 -->
|
|
|
+ <div @contextmenu.prevent="menuFun">hello world</div>
|
|
|
+ <!-- a 标签href如果不写地址默认会刷新页面， -->
|
|
|
+ <!-- 点击不会刷新页面 修改href为javascript:void(0) 相当于执行一段空的js语法 -->
|
|
|
+ <a href="javascript:void(0)" >百度</a>
|
|
|
</div>
|
|
|
<script src="./js/vue.js"></script>
|
|
|
<script>
|
|
|
@@ -27,7 +55,26 @@
|
|
|
// console.log("按钮被点击了");
|
|
|
console.log(this.str);
|
|
|
this.str = "你好世界";
|
|
|
+ },
|
|
|
+ box1Fun(){
|
|
|
+ console.log("box1被点击了");
|
|
|
+ },
|
|
|
+ box2Fun(){
|
|
|
+ console.log("box2被点击了");
|
|
|
+ },
|
|
|
+ box3Fun(event){
|
|
|
+ // console.log(event)
|
|
|
+ // 阻止事件冒泡
|
|
|
+ // event.stopPropagation();
|
|
|
+ console.log("box3被点击了");
|
|
|
+ },
|
|
|
+ menuFun(event){
|
|
|
+
|
|
|
+ console.log("右键点击了");
|
|
|
+ // 阻止默认行为
|
|
|
+ // event.preventDefault();
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
</script>
|
