11 月之前 · c06b186412
--- a/vue/vue初阶/14.数据绑定.html
+++ b/vue/vue初阶/14.数据绑定.html
@@ -0,0 +1,68 @@
 
				+<!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">
			
 
				+        <ul v-for="(item,index) in arr" :key="index">
			
 
				+            <li>
			
 
				+              {{index+1}}--我叫{{item.name}}--今年{{item.age}}--是个{{item.sex}}孩
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+          <button @click="changeDate">修改第二条数据</button@>
			
 
				+    </div>
			
 
				+    <script src="./vue.js"></script>
			
 
				+    <script>
			
 
				+      var vm = 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: {
			
 
				+            changeDate() {
			
 
				+                // 数据更新 视图未渲染
			
 
				+                // this.arr[1] = {name:"哪吒", age:3,sex:"男"}
			
 
				+                // console.log(this.arr,'新数据')
			
 
				+                // 第一种 Vue.set(target,index/name,obj)
			
 
				+                // Vue.set(this.arr,1,{name:"哪吒", age:3,sex:"男"})
			
 
				+                // 第二种 this.$set(target,index/name,obj)
			
 
				+                this.$set(this.arr,1,{name:"哪吒", age:3,sex:"男"})
			
 
				+            }
			
 
				+        },
			
 
				+      }).$mount("#app");
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/vue/vue初阶/15.事件修饰.html
+++ b/vue/vue初阶/15.事件修饰.html
@@ -0,0 +1,61 @@
 
				+<!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">
			
 
				+        <!-- v-on:"事件名"="事件方法" => @事件名"="事件方法" -->
			
 
				+        <!-- 键盘事件
			
 
				+            @keydown/@keyup/@keypress.修饰字符 
			
 
				+        -->
			
 
				+        <!-- 
			
 
				+            修饰符：
			
 
				+                触发一次 .once
			
 
				+                阻止默认行为 .prevent
			
 
				+                阻止事件冒泡 .stop
			
 
				+                触发自身 .self
			
 
				+                .... .native ...
			
 
				+         -->
			
 
				+        <input type="text" v-on:keydown.g="showMain">
			
 
				+        <div @click.once="part1">哈哈哈哈</div>
			
 
				+        <a @click.prevent="part2" href="http://www.baidu.com">大大大大大大</a>
			
 
				+        <div @click="part3" style="width: 300px;height: 300px;background-color: red;">
			
 
				+            <div @click.stop="part4" style="width: 100px;height: 100px;background-color: #ff0;"></div>
			
 
				+        </div>
			
 
				+        <div @click.self="part5" style="width: 300px;height: 300px;background-color: red;margin-top: 100px;">
			
 
				+            <div @click="part6" style="width: 100px;height: 100px;background-color: #ff0;"></div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    <script src="./vue.js"></script>
			
 
				+    <script>
			
 
				+        var vm = new Vue({
			
 
				+            methods: {
			
 
				+                showMain() {
			
 
				+                    console.log("按下")
			
 
				+                },
			
 
				+                part1() {
			
 
				+                    console.log("点击")
			
 
				+                },
			
 
				+                part2() {
			
 
				+                    console.log("哒哒哒")
			
 
				+                },
			
 
				+                part3() {
			
 
				+                    console.log("333")
			
 
				+                },
			
 
				+                part4() {
			
 
				+                    console.log("444")
			
 
				+                },
			
 
				+                part5() {
			
 
				+                    console.log("555")
			
 
				+                },
			
 
				+                part6() {
			
 
				+                    console.log("666")
			
 
				+                },
			
 
				+            },
			
 
				+        }).$mount("#app")
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/vue/vue初阶/5.内置指令.html
+++ b/vue/vue初阶/5.内置指令.html
@@ -8,7 +8,7 @@
 
				 <body>
			
 
				     <!-- 
			
 
				         内置指令： v-xxx
			
 
				-        1.数据绑定内置指令
			
 
				+        1.数据绑定内置指令 
			
 
				             v-text:更新文本的innerText
			
 
				             v-html:更新文本的innerHTML
			
 
				             v-model:双向绑定
			
--- a/vue/vue初阶/9.条件渲染.html
+++ b/vue/vue初阶/9.条件渲染.html
@@ -10,7 +10,7 @@
 
				         1.v-if v-else-if v-else
			
 
				         2.show
			
 
				         v-if与v-show区别
			
 
				-        v-if 满足执行语句才会显示
			
 
				+        v-if 满足执行语句才会显示 满足逻辑
			
 
				         v-show 只要为真就显示 频繁切换
			
 
				        -->
			
 
				     <div id="app">