2 napja · ded808edf8
--- a/9_Vue/2_vtext_vhtml.html
+++ b/9_Vue/2_vtext_vhtml.html
@@ -0,0 +1,29 @@
 
				+<!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">
			
 
				+        {{message}}
			
 
				+        {{str}}
			
 
				+        <!-- vue中有许多指令可以实现特定功能 v- 开头的一般都是vue指令 -->
			
 
				+        <!-- v-html 指令 可以将字符串转换为 html 标签 类似 innerHTML -->
			
 
				+        <div v-html="str"></div>
			
 
				+        <!-- v-text 指令 可以将字符串转换为文本内容 类似 innerText -->
			
 
				+        <div v-text="str"></div>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                message:"hello Vue!",
			
 
				+                str:"<h1>hello Vue!</h1>"
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9_Vue/3_vbind.html
+++ b/9_Vue/3_vbind.html
@@ -0,0 +1,53 @@
 
				+<!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>
			
 
				+        .div1{
			
 
				+            color: red;
			
 
				+        }
			
 
				+        .div2{
			
 
				+            color: blue;
			
 
				+        }
			
 
				+        .div3{
			
 
				+            font-size: 40px;
			
 
				+            color: green;
			
 
				+        }
			
 
				+        h1{
			
 
				+            display: none;
			
 
				+        }
			
 
				+        .active{
			
 
				+            display: block;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <!-- v-bind 指令 可以将变量数据绑定到元素的属性上 -->
			
 
				+         <!-- 只要标签属性值为变量那么就可以在属性前面添加 v-bind: 前缀 -->
			
 
				+        <img v-bind:src="imgUrl2" alt="">
			
 
				+        <div v-bind:class="className">hello</div>
			
 
				+        <!-- 可以在指令中使用表达式 -->
			
 
				+        <div v-bind:class="className2+'3'">hello2</div>
			
 
				+        <!-- 可以在指令中使用条件表达式 -->
			
 
				+        <h1 v-bind:class="{'active':isShow}"> 你好 </h1>
			
 
				+        <!-- v-bind 可以缩写为 : -->
			
 
				+         <div :class="className">hello3</div>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                imgUrl:"./img/logo-mi2.png",
			
 
				+                imgUrl2:"./img/download.png",
			
 
				+                className:"div2",
			
 
				+                className2:"div",
			
 
				+                isShow:false,
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9_Vue/4_vif_vshow.html
+++ b/9_Vue/4_vif_vshow.html
@@ -0,0 +1,35 @@
 
				+<!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">
			
 
				+        <!-- v-if 指令 可以根据变量的真假来显示元素 -->
			
 
				+        <h1 v-if="isShow">hello Vue!</h1>
			
 
				+        <h1 v-if="num>10">num大于10</h1>
			
 
				+        <h1 v-else-if="num<10">num小于10</h1>
			
 
				+        <h1 v-else>num等于10</h1>
			
 
				+
			
 
				+        <!-- v-show 指令 可以根据变量的真假来显示元素 -->
			
 
				+        <h1 v-show="isShow2">显示</h1>
			
 
				+
			
 
				+        <!-- v-if 如果条件不成立那么将整个元素从DOM中移除 -->
			
 
				+        <!-- v-show 只是将元素的display属性设置为none -->
			
 
				+         <!-- 如果频繁切换显示隐藏 建议使用v-show 性能更好 -->
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                isShow:false,
			
 
				+                num:11,
			
 
				+                isShow2:false
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9_Vue/img/download.png
+++ b/9_Vue/img/download.png
--- a/9_Vue/img/logo-mi2.png
+++ b/9_Vue/img/logo-mi2.png