Bläddra i källkod

feat: 添加事件处理

nicetry12138 1 år sedan
förälder
incheckning
ca732f70d1
2 ändrade filer med 59 tillägg och 0 borttagningar
  1. 26 0
      前端/Vuejs.md
  2. 33 0
      前端/src/VueDemo/demo1/index3.html

+ 26 - 0
前端/Vuejs.md

@@ -777,6 +777,8 @@ style 的数组语法与 class 的数组语法类型,都支持数组嵌套数
 
 使用方法很简单,直接通过 `v-bind="对象"` 即可
 
+> 也可以直接 `:="对象"`,但是不推荐
+
 ```html
 <div id="app6"></div>
 <template id="template6">
@@ -807,3 +809,27 @@ style 的数组语法与 class 的数组语法类型,都支持数组嵌套数
 
 ![](Image/036.png)
 
+#### v-on 绑定事件
+
+[官方文档-事件处理](https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers)
+
+比如点击、拖拽、键盘事件等
+
+`v-on` 的缩写是 `@`,比如之前的 `@click`
+
+| 修饰符 | 作用 |
+| --- | --- |
+| .stop | 调用 event.stopPropagation() |
+| .prevent | 调用 event.preventDefault() |
+| .capture | 添加事件侦听器时使用 capture 模式 |
+| .self | 只有当事件是从侦听器绑定的元素本身触发时才会触发回调 |
+| .{keyAlias} | 仅当事件是从特定键触发时才触发回调 |
+| .once | 只触发一次回调 |
+| .left | 只当点击鼠标左键时触发 |
+| .right | 只当点击鼠标右键时触发 |
+| .middle | 只当点击鼠标中键时触发 |
+| .passive | {passive: true} 模式添加侦听器 |
+
+```html
+
+```

+ 33 - 0
前端/src/VueDemo/demo1/index3.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Web Page</title>
+</head>
+<body>
+    <!-- 通过 CDN 导入 vue -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    
+    <div id="app1"></div>
+    <template id="template1">
+        <button v-on:click="changeHref">{{message}}</button>
+        <button @click="changeHref">{{message}}</button>
+    </template>
+    <script>
+        Vue.createApp({
+            template: '#template1',
+            data() {
+                return {
+                    message: '打开百度', 
+                }
+            },
+            methods: {
+                changeHref() {
+                    console.log(`btn click`);
+                }
+            }
+        }).mount('#app1');
+    </script>
+</body>
+</html>