|
|
@@ -0,0 +1,128 @@
|
|
|
+<!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: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #00f;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .box1 {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: #f00;
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ .box3 {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: #f00;
|
|
|
+ }
|
|
|
+ .box4 {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <!--
|
|
|
+ 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
|
|
|
+ v-on 事件处理 =>简写："@"
|
|
|
+ 格式：
|
|
|
+ 1.v-on:事件名="事件处理"
|
|
|
+ 2.@事件名="事件处理"
|
|
|
+ 修饰符：
|
|
|
+ 阻止事件冒泡 .stop
|
|
|
+ 阻止默认事件 .prevent
|
|
|
+ 触发一次 .once
|
|
|
+ 触发自身 .self
|
|
|
+
|
|
|
+ -->
|
|
|
+ <!-- 键盘事件 -->
|
|
|
+ <input type="text" @keyup.enter="showEnter">
|
|
|
+ <input type="text" @keydown.tab="showEnter">
|
|
|
+ <input type="text" @keydown.tot="showEnter">
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+ <div class="box" v-on:click="num++">{{num}}</div>
|
|
|
+ <div @click="showAlert">
|
|
|
+ 弹出框
|
|
|
+ </div>
|
|
|
+ <div @click="showMsg(1)">
|
|
|
+ 消息
|
|
|
+ </div>
|
|
|
+ <div @click="showEvent($event)">
|
|
|
+ 事件
|
|
|
+ </div>
|
|
|
+ <!-- 事件冒泡 -->
|
|
|
+ <div class="box1" @click="getMain">
|
|
|
+ <div class="box2" @click.stop="getMsg"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 默认事件 -->
|
|
|
+ <a href="https://v2.cn.vuejs.org/v2/guide/events.html" @click.prevent="getSee">Vue官网</a>
|
|
|
+ <!-- 触发一次 -->
|
|
|
+ <div @click.once="showContent">内容</div>
|
|
|
+ <!-- 触发自身 -->
|
|
|
+ <div @click.self="mySelf" class="box3">
|
|
|
+ <div @click="meMain" class="box4">
|
|
|
+ 我自己
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ // 自定义键值
|
|
|
+ Vue.config.keyCodes.tot = 32;
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ num: 0
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ showAlert() {
|
|
|
+ alert("出现");
|
|
|
+ },
|
|
|
+ showMsg(a) {
|
|
|
+ console.log(a,'a');
|
|
|
+ },
|
|
|
+ showEvent(a) {
|
|
|
+ console.log(a.target,'a1');
|
|
|
+ },
|
|
|
+ getMain() {
|
|
|
+ alert(1);
|
|
|
+ },
|
|
|
+ getMsg() {
|
|
|
+ alert(2);
|
|
|
+ },
|
|
|
+ getSee() {
|
|
|
+ alert(3);
|
|
|
+ },
|
|
|
+ showContent() {
|
|
|
+ alert("555");
|
|
|
+ },
|
|
|
+ mySelf() {
|
|
|
+ alert("666");
|
|
|
+ },
|
|
|
+ meMain() {
|
|
|
+ alert("777");
|
|
|
+ },
|
|
|
+ showEnter(event) {
|
|
|
+ console.log(event.target.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e