首页 发现 帮助
登录
lovecoding
/
web0331
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

vue

bailing 1 天之前
父节点
6f757a05f3
当前提交
ef97dd6426
共有 2 个文件被更改，包括 121 次插入 和 0 次删除
合并视图 显示文件统计
  1. 82 0
      8.vue/初阶/17.事件绑定.html
  2. 39 0
      8.vue/初阶/18.组件.html

+ 82 - 0
8.vue/初阶/17.事件绑定.html
查看文件 

@@ -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>

+ 39 - 0
8.vue/初阶/18.组件.html
查看文件 

@@ -0,0 +1,39 @@
 
+<!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>
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <my-com></my-com>
 
+        <my></my>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+        
+            // 全局组件
 
+            Vue.component("my-com",{
 
+               template:`<div><h1>你好</h1><p>哈哈</p></div>`
 
+            })
 
+            // 局部组件
 
+           const aaa = Vue.extend({
 
+               template:`<div><h1>你好1</h1><p>哈哈1</p></div>`
 
+            })
 
+
 
+
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            components:{
 
+                my:aaa
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>