|
|
@@ -0,0 +1,92 @@
|
|
|
+<!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>
|
|
|
+ #box {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ #box1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ .news {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #f00;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <!--
|
|
|
+ v-on 事件绑定 可以简写成 @
|
|
|
+ 格式：
|
|
|
+ @事件名="事件方法"
|
|
|
+ v-on:事件名="事件方法"
|
|
|
+ 修饰符
|
|
|
+ stop 阻止事件冒泡
|
|
|
+ prevent 阻止默认事件
|
|
|
+ once 只触发一次
|
|
|
+ self 仅自身才能触发
|
|
|
+ native 组件无法绑定原生时间 可以使用native绑定
|
|
|
+ @keydown @keyup
|
|
|
+ -->
|
|
|
+ <h1>{{msg}}</h1>
|
|
|
+ <input type="text" @keydown="keyThing">
|
|
|
+ <!-- <div v-on:click="getPart1">事件发生</div> -->
|
|
|
+ <div @click="getPart1">事件发生</div>
|
|
|
+ <a href="https://www.baidu.com" @click.prevent.once="showHi">你好</a>
|
|
|
+ <div id="box" @click="getPart2">
|
|
|
+ <div id="box1" @click.stop="getPart3"></div>
|
|
|
+ </div>
|
|
|
+ <button @click.once="pay">一次性支付</button>
|
|
|
+ <div class="news" @click.self="newThing">
|
|
|
+ <span @click="newHi" style="width: 100px;height: 100px;background: #000;color: #fff;">你好啊</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ msg:"你好啊"
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ keyThing(event) {
|
|
|
+ console.log(event,'键盘')
|
|
|
+ },
|
|
|
+ getPart1() {
|
|
|
+ console.log("触发一")
|
|
|
+ },
|
|
|
+ getPart2() {
|
|
|
+ console.log("触发2")
|
|
|
+ },
|
|
|
+ getPart3(event){
|
|
|
+ // event.stopPropagation();
|
|
|
+ console.log("触发3")
|
|
|
+ },
|
|
|
+ showHi(event) {
|
|
|
+ // event.preventDefault();
|
|
|
+ console.log("你好",event)
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ console.log("支付")
|
|
|
+ },
|
|
|
+ newThing() {
|
|
|
+ console.log("哈哈哈哈")
|
|
|
+ },
|
|
|
+ newHi() {
|
|
|
+ console.log("你好")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zheng