|
|
@@ -0,0 +1,82 @@
|
|
|
+<!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: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+
|
|
|
+ #box2 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div id="box1" @click.self="changeOne">
|
|
|
+ <!-- <div id="box2" @click.stop="changeTwo">
|
|
|
+ </div> -->
|
|
|
+ <div id="box2" @click="changeTwo">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div @click.once="hi">哈哈哈</div>
|
|
|
+ <a href="http://wwww.baidu.com" @click.prevent="changeThree">你好</a>
|
|
|
+ <!--
|
|
|
+ v-on 用于事件绑定 简写：@
|
|
|
+ 格式：
|
|
|
+ v-on:事件='方法'
|
|
|
+ @事件='方法'
|
|
|
+ 事件：
|
|
|
+ 鼠标：
|
|
|
+ click mousedown mouseup mousemove mouseout mouseover ...
|
|
|
+ 键盘:
|
|
|
+ keydown keyup..
|
|
|
+ 手指:
|
|
|
+ tap
|
|
|
+ 修饰符：
|
|
|
+ 阻止冒泡事件 .stop
|
|
|
+ 阻止默认事件 .prevent
|
|
|
+ 触发自身 .self
|
|
|
+ 触发一次 .once
|
|
|
+ .native
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ -->
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"> </script>
|
|
|
+ <script>
|
|
|
+ var vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ flower: "丁香花"
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeOne() {
|
|
|
+ console.log("第一个")
|
|
|
+ },
|
|
|
+ changeTwo() {
|
|
|
+ // event.stopPropagation();
|
|
|
+ console.log("第二个",event)
|
|
|
+ },
|
|
|
+ changeThree() {
|
|
|
+ console.log("你好")
|
|
|
+ },
|
|
|
+ hi() {
|
|
|
+ console.log("hi")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
bailing