Home Explore Help
Sign In
lovecoding
/
VIP32
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix：vue

e 1 year ago
parent
0cb1393d4c
commit
b4dcfbe5f6
2 changed files with 178 additions and 0 deletions
Unified View Show Diff Stats
  1. 69 0
      vue2.0/vue初阶/15.数据监听.html
  2. 109 0
      vue2.0/vue初阶/16.事件绑定.html

+ 69 - 0
vue2.0/vue初阶/15.数据监听.html
View File 

@@ -0,0 +1,69 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+  </head>
 
+  <body>
 
+    <div id="app">
 
+        <div v-for="(item,index) in arr" :key="index">
 
+            {{item.name}}--{{item.age}}--{{item.sex}}
 
+        </div>
 
+        <button @click="getNews">修改数据</button>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+      var app = new Vue({
 
+        data: {
 
+          arr: [
 
+            {
 
+              name: "Lucy",
 
+              age: 11,
 
+              sex: "女",
 
+            },
 
+            {
 
+              name: "LiLi",
 
+              age: 31,
 
+              sex: "男",
 
+            },
 
+            {
 
+              name: "八戒",
 
+              age: 21,
 
+              sex: "男",
 
+            },
 
+            {
 
+              name: "八卦",
 
+              age: 23,
 
+              sex: "男",
 
+            },
 
+            {
 
+              name: "孙悟空",
 
+              age: 27,
 
+              sex: "男",
 
+            },
 
+            {
 
+              name: "唐僧",
 
+              age: 33,
 
+              sex: "女",
 
+            }
 
+          ],
 
+        },
 
+        methods: {
 
+            getNews() {
 
+                // 数据修改 视图未更新
 
+                // Object.defineProperty 中的getter和setter去对数据进行设置和修改
 
+                console.log("修改")
 
+                // this.arr[2] = {name:"小郑",age: 20,sex:"女"}
 
+                // 第一种写法
 
+                // Vue.set(target,index/name,obj)
 
+                Vue.set(this.arr,1,{name:"小郑",age: 20,sex:"女"})
 
+                // 第二种写法
 
+                this.$set(this.arr,2,{name:"小李",age: 24,sex:"男"})
 
+                console.log(this.arr)
 
+            }
 
+        },
 
+      }).$mount("#app");
 
+    </script>
 
+  </body>
 
+</html>

+ 109 - 0
vue2.0/vue初阶/16.事件绑定.html
View File 

@@ -0,0 +1,109 @@
 
+<!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: #f00;
 
+            margin-top: 20px;
 
+        }
 
+        #box3 {
 
+            width: 400px;
 
+            height: 400px;
 
+            background: #f0f;
 
+            margin: 30px;
 
+        }
 
+        #box4 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+            margin-top: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <!-- 
+            v-on 用于事件绑定 简写："@"
 
+            格式:
 
+                @事件名="事件方法"
 
+                v-on:事件名="事件方法"
 
+            修饰符：
 
+                阻止事件冒泡 .stop
 
+                阻止默认事件 .prevent
 
+                触发一次     .once
 
+                触发自身     .self
 
+            键盘事件：
 
+                keydown keyup
 
+         -->
 
+         <!-- 键盘事件 -->
 
+         <input type="text" @keydown.tab="showDown">
 
+         <input type="text" @keyup.enter="showUp">
 
+         <input type="text" @keyup.esc="showUp">
 
+         <input type="text" @keyup.g="showEnter">
 
+         <!-- 点击事件 -->
 
+         <div v-on:click="getPart1">事件方法</div>
 
+         <!-- <div @click="getPart1">点击事件</div> -->
 
+         <!-- 默认事件 -->
 
+         <a href="http://www.baidu.com" @click.prevent="goPart2">去百度</a>
 
+         <!-- 事件冒泡 -->
 
+         <div id="box1" @click="getBox1">
 
+            <div id="box2" @click.stop="getBox2"></div>
 
+         </div>
 
+         <!-- 触发一次 -->
 
+         <div @click.once="getPart3">only</div>
 
+         <!-- 触发自身 -->
 
+         <div id="box3" @click.self="getPart4">
 
+            <div id="box4" @click="getPart5">我自己</div>
 
+         </div>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            methods:{
 
+                getPart1() {
 
+                    console.log("点击")
 
+                },
 
+                goPart2() {
 
+                    alert("新的")
 
+                },
 
+                getBox1() {
 
+                    console.log("第一个盒子")
 
+                },
 
+                getBox2() {
 
+                    console.log("第二个盒子")
 
+                },
 
+                getPart3() {
 
+                    console.log("3333");
 
+                },
 
+                getPart4() {
 
+                    console.log("大盒子");
 
+                },
 
+                getPart5() {
 
+                    console.log("我自己")
 
+                },
 
+                showDown() {
 
+                    alert("1111")
 
+                },
 
+                showUp() {
 
+                    alert("2222")
 
+                },
 
+                showEnter(event) {
 
+                    console.log(event.target)
 
+                }
 
+            }
 
+
 
+        })
 
+    </script>
 
+</body>
 
+</html>