пре 1 недеља · c0d6e4b6db
--- a/9-vue基础/4_v-bind.html
+++ b/9-vue基础/4_v-bind.html
@@ -0,0 +1,36 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./js/vue.js"></script>
			
 
				+    <style>
			
 
				+        .active{
			
 
				+            font-size: 50px;
			
 
				+            font-weight: bold;
			
 
				+            color: red;
			
 
				+        }
			
 
				+    </style>
			
 
				+
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <img v-bind:src="imgSrc" alt="">
			
 
				+        <!-- <div v-bind:class="a"> hello world</div> -->
			
 
				+        <div v-bind:class="{'active':isActive}">hello world</div>
			
 
				+        <div :class="{'active':isActive}">hello world</div>
			
 
				+
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                imgSrc:"./img/logo.png",
			
 
				+                a:"active",
			
 
				+                isActive:true
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9-vue基础/5_修改data的值.html
+++ b/9-vue基础/5_修改data的值.html
@@ -0,0 +1,31 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./js/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <h1>{{str}}</h1>
			
 
				+        <!-- v-on 可以缩写成 @ -->
			
 
				+        <button @click="changeStr">修改str</button>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                str:"hello world",
			
 
				+            },
			
 
				+            methods:{
			
 
				+                changeStr(){
			
 
				+                    // 可以通过 this 直接修改和获取data中的值
			
 
				+                    console.log(this.str);
			
 
				+                    this.str = "你好世界";
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9-vue基础/6_v-if.html
+++ b/9-vue基础/6_v-if.html
@@ -0,0 +1,34 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./js/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <h1 v-if="isShow">hello world</h1>
			
 
				+        <h1 v-else>你好世界</h1>
			
 
				+        <!-- v-show 仅能控制元素的显示及隐藏 -->
			
 
				+         <!-- v-show 与 v-if 的区别 -->
			
 
				+          <!-- v-show 控制的是display属性 none -->
			
 
				+        <!-- <h1 v-show="isShow">hello world</h1> -->
			
 
				+        <button @click="toogleShow">显示/隐藏</button>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                isShow:true
			
 
				+            },
			
 
				+            methods:{
			
 
				+                toogleShow(){
			
 
				+                    // this.isShow = false;
			
 
				+                    this.isShow = !this.isShow;
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9-vue基础/img/logo.png
+++ b/9-vue基础/img/logo.png