|
|
@@ -0,0 +1,114 @@
|
|
|
+<!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>
|
|
|
+ .box1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background: #f00;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ .box3 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ .box4 {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: pink;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .box5 {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background: #0f0;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ .box6 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #0ff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <!--
|
|
|
+ 事件綁定:
|
|
|
+ v-on 用于事件綁定 可以：@
|
|
|
+ 格式：
|
|
|
+ @事件名="事件方法"
|
|
|
+ v-on:事件名 = "事件方法"
|
|
|
+ 修飾符：
|
|
|
+ 阻止默認事件 .prevent
|
|
|
+ 阻止事件冒泡 .stop
|
|
|
+ 觸發一次 .once
|
|
|
+ 觸發自身 .self
|
|
|
+ .native 穿透
|
|
|
+ -->
|
|
|
+ <input type="text" v-on:keydown="showKeyDown">
|
|
|
+ <input type="text" v-on:keyup="showKeyUp">
|
|
|
+ <input type="text" v-on:keydown.a="showKeyTab">
|
|
|
+ <br>
|
|
|
+ <div class="box1" v-on:click="getBox1"></div>
|
|
|
+ <!-- <div class="box1" @click="getBox1"></div> -->
|
|
|
+ <a href="https://www.baidu.com" @click.prevent="getHi">你好</a>
|
|
|
+ <div class="box2" @click="getBox2">
|
|
|
+ <div class="box3" @click.stop="getBox3"></div>
|
|
|
+ </div>
|
|
|
+ <div class="box4" @click.once='getBox4'></div>
|
|
|
+ <div @click.self="getBox5" class="box5">
|
|
|
+ <div @click="getBox6" class="box6"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ methods:{
|
|
|
+ getBox1() {
|
|
|
+ alert("Box1")
|
|
|
+ },
|
|
|
+ getHi() {
|
|
|
+ alert("你好")
|
|
|
+ // event.preventDefault()
|
|
|
+ },
|
|
|
+ getBox2() {
|
|
|
+ alert("Box2")
|
|
|
+ },
|
|
|
+ getBox3() {
|
|
|
+ alert("Box3")
|
|
|
+ // event.stopPropagation()
|
|
|
+ },
|
|
|
+ getBox4() {
|
|
|
+ console.log('box4')
|
|
|
+ },
|
|
|
+ getBox5() {
|
|
|
+ console.log('box5')
|
|
|
+ },
|
|
|
+ getBox6() {
|
|
|
+ console.log('box6')
|
|
|
+ },
|
|
|
+ showKeyDown(e) {
|
|
|
+ console.log("按下",e)
|
|
|
+ },
|
|
|
+ showKeyUp() {
|
|
|
+ console.log("擡起")
|
|
|
+ },
|
|
|
+ showKeyTab(e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e