vue

vue/事件.md

@@ -0,0 +1,115 @@
+# vue 方法（事件处理）
+
+### 事件监听
+
+可以用v-on指令监听DOM事件，并在触发时运行一些javascript  v-on 简写为@
+
+事件处理方法
+
+- 直接触发javascript代码(不推荐)
+
+示例：
+
+```
+ <div id="app" >
+        <button v-on:click="alert('hello!!!')">测试</button>
+ </div>
+```
+
+- 在内联javascript 语句中调用方法（不推荐）
+
+  ```
+  <div id="example-3">
+    <button v-on:click="say()">Say hi</button>
+  </div>
+  ```
+
+  ```
+  new Vue({
+    el: '#example-3',
+    methods: {
+      say: function () {
+        alert('hi')
+      }
+    }
+  })
+  ```
+
+  
+
+- 事件处理方法（推荐）
+
+  ```
+   <div id="app" >
+          <button v-on:click="say">测试</button>
+   </div>
+  ```
+
+  ```
+  new Vue({
+    el: '#example-3',
+    methods: {
+      say: function () {
+        alert('hi')
+      }
+    }
+  })
+  ```
+
+  > methods中注册的是触发时执行的函数，也叫方法
+
+
+
+### 事件修饰符
+
+- `.stop`
+
+  > 等同于JavaScript中的event.stopPropagation()，防止事件冒泡
+
+- `.once`
+
+  > 只会触发一次
+
+使用：
+
+```
+<a v-on:click.stop="doThis"></a>
+```
+
+可以同时使用多个修饰符
+
+```
+<a v-on:click.stop.once="doThat"></a>
+```
+
+
+
+
+
+### 按键修饰符（自行拓展）
+
+监听键盘事件：
+
+@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
+
+```
+获取按键的键码 e.keyCode
+@keyup.delete    删除键
+
+@keyup.enter 回车
+
+@keyup.esc  ESC
+
+@keyup.space 空格
+
+@keyup.tab TAB
+
+@keyup.left     左键
+
+@keyup.right    右键
+
+@keyup.up    上键
+
+@keyup.down  下键
+```
+