6 years ago · 8f3dcb585f
--- a/Basic/1.引入VUE/index.html
+++ b/Basic/1.引入VUE/index.html
@@ -0,0 +1,26 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>1.引入VUE</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	</head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp"> {{ message }} </div>
			
 
				+		<script>
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					message: 'Hello World!'
			
 
				+				}
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/2.控制语句/README.md
+++ b/Basic/2.控制语句/README.md
@@ -0,0 +1,11 @@
 
				+### if
			
 
				+
			
 
				+使用v-if标签，
			
 
				+
			
 
				+### for
			
 
				+
			
 
				+使用v-for标签。
			
 
				+
			
 
				+### 变量引用
			
 
				+
			
 
				+{{xx.xx}}
			
--- a/Basic/2.控制语句/if-else.html
+++ b/Basic/2.控制语句/if-else.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>1.引入VUE</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	</head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<div v-if="Math.random() > 0.5">
			
 
				+				Good
			
 
				+			</div>
			
 
				+			<div v-else>
			
 
				+				Bad
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#app'
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/2.控制语句/if-else2.html
+++ b/Basic/2.控制语句/if-else2.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>1.引入VUE</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	</head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<div v-if="Math.random() > 0.7">
			
 
				+				Good
			
 
				+			</div>
			
 
				+			<div v-else-if="Math.random() > 0.4">
			
 
				+				Nomal
			
 
				+			</div>
			
 
				+			<div v-else>
			
 
				+				Bad
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#app'
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/2.控制语句/if.html
+++ b/Basic/2.控制语句/if.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>1.引入VUE</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	</head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			<h3>游戏列表</h3>
			
 
				+			<!-- Virtual DOM -->
			
 
				+			<div v-if="seen">2017最新发卖</div>
			
 
				+			<ol>
			
 
				+				<li v-for="game in games">{{game.title}} / {{game.price}}元</li>
			
 
				+			</ol>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					seen: false,
			
 
				+					games: [{
			
 
				+						title: '勇者斗恶龙',
			
 
				+						price: 400
			
 
				+					}, {
			
 
				+						title: '超级马里奥',
			
 
				+						price: 380
			
 
				+					}, {
			
 
				+						title: '我的世界',
			
 
				+						price: 99
			
 
				+					}, ],
			
 
				+				},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/2.控制语句/index5.html
+++ b/Basic/2.控制语句/index5.html
--- a/Basic/2.控制语句/index6.html
+++ b/Basic/2.控制语句/index6.html
--- a/Basic/2.控制语句/index7.html
+++ b/Basic/2.控制语句/index7.html
--- a/Basic/2.控制语句/json对象遍历.html
+++ b/Basic/2.控制语句/json对象遍历.html
--- a/Basic/2.控制语句/json数组遍历.html
+++ b/Basic/2.控制语句/json数组遍历.html
@@ -12,6 +12,11 @@
 
				       {{ s.name }}
			
 
				     </li>
			
 
				   </ol>
			
 
				+  <ol>
			
 
				+  	<li v-for="c in citys">
			
 
				+  		{{c}}
			
 
				+  	</li>
			
 
				+  </ol>
			
 
				 </div>
			
 
				 <!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
			
 
				 <script>
			
@@ -22,7 +27,8 @@ new Vue({
 
				       { name: 'Runoob.com' },
			
 
				       { name: 'Google.com' },
			
 
				       { name: 'Taobao.com' }
			
 
				-    ]
			
 
				+    ],
			
 
				+    citys:["上海","南京","北京"]
			
 
				   }
			
 
				 })
			
 
				 </script>
			
--- a/Basic/3.计算属性/README.md
+++ b/Basic/3.计算属性/README.md
@@ -0,0 +1,10 @@
 
				+计算属性
			
 
				+=========
			
 
				+* computed
			
 
				+
			
 
				+处理元数据，便于进行二次利用。（比如：消费税自动计算功能）。没啥用。
			
 
				+
			
 
				+* computed vs methods
			
 
				+
			
 
				+我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 
			
 
				+
			
--- a/Basic/3.计算属性/index.html
+++ b/Basic/3.计算属性/index.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title>计算属性</title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+    今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp',
			
 
				+        data: {
			
 
				+            price: 29980
			
 
				+        },
			
 
				+        computed: {
			
 
				+            priceInTax: function(){
			
 
				+                return this.price * 1.08;
			
 
				+            },
			
 
				+            priceChinaRMB: function(){
			
 
				+                return Math.round(this.priceInTax / 16.75);
			
 
				+            },
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/3.计算属性/反转字符串.html
+++ b/Basic/3.计算属性/反转字符串.html
@@ -0,0 +1,27 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title>反转字符串</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			<p>{{message}}</p>
			
 
				+			<p> {{ message.split('').reverse().join('') }}
			
 
				+			</p>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					message: "hello world"
			
 
				+				},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/4.过滤器/README.md
+++ b/Basic/4.过滤器/README.md
@@ -0,0 +1,6 @@
 
				+过滤器
			
 
				+=======
			
 
				+
			
 
				+### filters
			
 
				+
			
 
				+格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）
			
--- a/Basic/4.过滤器/index.html
+++ b/Basic/4.过滤器/index.html
@@ -0,0 +1,37 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title></title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+    <p>{{message}}</p>
			
 
				+    <p>{{message | toupper }}</p>
			
 
				+    <hr>
			
 
				+    <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})。</p>
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp',
			
 
				+        data: {
			
 
				+            message: 'hello vue.js world.',
			
 
				+            num: 0.3
			
 
				+        },
			
 
				+        filters: {
			
 
				+            toupper: function(value){
			
 
				+                return value.toUpperCase();
			
 
				+            },
			
 
				+            topercentage: function(value){
			
 
				+                return value * 100 + '%';
			
 
				+            },
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/css/style.css
+++ b/Basic/css/style.css
@@ -0,0 +1,44 @@
 
				+body {
			
 
				+    font-size: 24px;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+    width: 80px;
			
 
				+    height: 45px;
			
 
				+    font-size: 20px;
			
 
				+}
			
 
				+
			
 
				+.active {
			
 
				+    color: red;
			
 
				+}
			
 
				+
			
 
				+.big {
			
 
				+    font-weight: bolder;
			
 
				+    font-size: 64px;
			
 
				+}
			
 
				+
			
 
				+.border1 {
			
 
				+    border: 1px solid gray;
			
 
				+}
			
 
				+body {
			
 
				+	font-size: 24px;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+	width: 80px;
			
 
				+	height: 45px;
			
 
				+	font-size: 20px;
			
 
				+}
			
 
				+
			
 
				+.active {
			
 
				+	color: red;
			
 
				+}
			
 
				+
			
 
				+.big {
			
 
				+	font-weight: bolder;
			
 
				+	font-size: 64px;
			
 
				+}
			
 
				+
			
 
				+.border1 {
			
 
				+	border: 1px solid gray;
			
 
				+}
			
--- a/Basic/模板语法/v-bind.html
+++ b/Basic/模板语法/v-bind.html
@@ -0,0 +1,41 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+	<style>
			
 
				+		.class1 {
			
 
				+			background: #444;
			
 
				+			color: #eee;
			
 
				+		}
			
 
				+	</style>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
			
 
				+			<br><br>
			
 
				+			
			
 
				+			<div v-bind:class="{'class1': use}">
			
 
				+				v-bind:class 指令
			
 
				+			</div>
			
 
				+			
			
 
				+			<div :class="{'class1': use}">
			
 
				+				v-bind:class 指令
			
 
				+			</div>
			
 
				+		</div>
			
 
				+
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#app',
			
 
				+				data: {
			
 
				+					use: false
			
 
				+				}
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/模板语法/v-html.html
+++ b/Basic/模板语法/v-html.html
@@ -0,0 +1,26 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<div v-html="message"></div>
			
 
				+		</div>
			
 
				+
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#app',
			
 
				+				data: {
			
 
				+					message: '<h1>菜鸟教程</h1>'
			
 
				+				}
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/模板语法/样式绑定.html
+++ b/Basic/模板语法/样式绑定.html
@@ -0,0 +1,32 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<style>
			
 
				+			.active {
			
 
				+				width: 100px;
			
 
				+				height: 100px;
			
 
				+				background: green;
			
 
				+			}
			
 
				+		</style>
			
 
				+		<div id="myApp">
			
 
				+			<div v-bind:class="{ active: isActive }"></div>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					isActive: true
			
 
				+				},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/监听属性/watch2.html
+++ b/Basic/监听属性/watch2.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<p style="font-size:25px;">计数器: {{ counter }}</p>
			
 
				+			<button v-on:click="counter++" style="font-size:25px;">点我</button>
			
 
				+			<button @click="counter++" style="font-size:25px;">点我</button>
			
 
				+		</div>
			
 
				+		<script type="text/javascript">
			
 
				+			var vm = new Vue({
			
 
				+				el: '#app',
			
 
				+				data: {
			
 
				+					counter: 1
			
 
				+				}
			
 
				+			});
			
 
				+			vm.$watch('counter', function(nval, oval) {
			
 
				+				//alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/监听属性/事件处理.html
+++ b/Basic/监听属性/事件处理.html
@@ -0,0 +1,27 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<button v-on:click="counter += 1">增加 1</button>
			
 
				+			<p>这个按钮被点击了 {{ counter }} 次。</p>
			
 
				+		</div>
			
 
				+
			
 
				+		<script>
			
 
				+			new Vue({
			
 
				+				el: '#app',
			
 
				+				data: {
			
 
				+					counter: 0
			
 
				+				}
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/组件/全局组件.html
+++ b/Basic/组件/全局组件.html
@@ -0,0 +1,31 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			 <runoob>哈哈</runoob>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			// 先注册component
			
 
				+			Vue.component('runoob', {
			
 
				+				template: '<h2>自定义组件!</h2>'
			
 
				+			})
			
 
				+			// 然后实例化一个vue对象
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+
			
 
				+				},
			
 
				+			});
			
 
				+			
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/组件/动态
+++ b/Basic/组件/动态
@@ -0,0 +1,24 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title></title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp',
			
 
				+        data: {
			
 
				+           
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/组件/局部组件.html
+++ b/Basic/组件/局部组件.html
@@ -0,0 +1,31 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			<runoob>哈哈</runoob>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var Child = {
			
 
				+				template: '<h2>自定义组件!</h2>'
			
 
				+			}
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+
			
 
				+				},
			
 
				+				components: {
			
 
				+					'runoob': Child
			
 
				+				}
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/网络/ajax.html
+++ b/Basic/网络/ajax.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title></title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			<input type="button" @click="get()" value="点我异步获取数据(Get)">
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var vm = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					msg: 'Hello World!',
			
 
				+				},
			
 
				+				methods: {
			
 
				+					get: function() {
			
 
				+						//发送get请求
			
 
				+						var data = {
			
 
				+							a: 1,
			
 
				+							b: 2
			
 
				+						};
			
 
				+						this.$http.get('ajax_info.txt', data).then(function(res) {
			
 
				+							document.write(res.body);
			
 
				+						}, function() {
			
 
				+							console.log('请求失败处理');
			
 
				+						});
			
 
				+					}
			
 
				+				}
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/网络/ajax_info.txt
+++ b/Basic/网络/ajax_info.txt
@@ -0,0 +1 @@
 
				+AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下 
			
--- a/Basic/网络/响应接口.html
+++ b/Basic/网络/响应接口.html
@@ -0,0 +1,24 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title></title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp',
			
 
				+        data: {
			
 
				+           
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/表单/README.md
+++ b/Basic/表单/README.md
@@ -0,0 +1,25 @@
 
				+表单
			
 
				+==========
			
 
				+### .lazy
			
 
				+
			
 
				+用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。
			
 
				+
			
 
				+~~~html
			
 
				+用户名：<input v-model.lazy="username">
			
 
				+~~~
			
 
				+
			
 
				+### .number
			
 
				+
			
 
				+将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。
			
 
				+
			
 
				+~~~html
			
 
				+年龄：<input v-model.number="age" type="number">
			
 
				+~~~
			
 
				+
			
 
				+### .trim
			
 
				+
			
 
				+自动去掉用户输入内容两端的空格。
			
 
				+
			
 
				+~~~html
			
 
				+意见：<input v-model.trim="content">
			
 
				+~~~
			
--- a/Basic/表单/双向绑定.html
+++ b/Basic/表单/双向绑定.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title>双向绑定</title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+    <h1>表单控件绑定</h1>
			
 
				+    <input type="text" v-model="message" placeholder="请输入......">
			
 
				+    <p>Message is: {{ message }}</p>
			
 
				+    <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp', 
			
 
				+        data: {
			
 
				+            message: "我爱马里奥",
			
 
				+        },
			
 
				+        methods: {
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/表单/复选框.html
+++ b/Basic/表单/复选框.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title>复选框</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			<h1>表单复选框</h1>
			
 
				+
			
 
				+			<input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
			
 
				+			<label for="生化危机7">生化危机7</label>
			
 
				+
			
 
				+			<input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
			
 
				+			<label for="模拟飞行">模拟飞行</label>
			
 
				+
			
 
				+			<input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
			
 
				+			<label for="塞尔达传说">塞尔达传说</label>
			
 
				+
			
 
				+			<br>
			
 
				+			<p>您选择的游戏是:</p>
			
 
				+			<p v-for="game in checkedGames"> {{ game }} </p>
			
 
				+
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					checkedGames: []
			
 
				+				},
			
 
				+				methods: {},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/表单/表单select下拉框.html
+++ b/Basic/表单/表单select下拉框.html
@@ -0,0 +1,60 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title>表单下拉框</title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+    <h3>你最喜欢的NBA球星是：</h3>
			
 
				+    <select v-model="likedNBAStar" style="width:210px;">
			
 
				+        <option>科比</option>
			
 
				+        <option>詹姆斯</option>
			
 
				+        <option>哈登</option>
			
 
				+        <option>库里</option>
			
 
				+        <option>杜兰特</option>
			
 
				+    </select>
			
 
				+
			
 
				+    <h3>我的全明星：</h3>
			
 
				+    <select v-model="likedNBAStars" multiple style="width:210px;height:210px;">
			
 
				+        <option>阿德托昆博</option>
			
 
				+        <option>怀特赛德</option>
			
 
				+        <option>阿尔德里奇</option>
			
 
				+        <option>戴维斯</option>
			
 
				+        <option>格里芬</option>
			
 
				+        <option>詹姆斯</option>
			
 
				+        <option>杜兰特</option>
			
 
				+        <option>巴特勒</option>
			
 
				+        <option>德罗赞</option>
			
 
				+        <option>哈登</option>
			
 
				+        <option>科比</option>
			
 
				+        <option>韦德</option>
			
 
				+        <option>伦纳德</option>
			
 
				+        <option>库里</option>
			
 
				+        <option>欧文</option>
			
 
				+        <option>保罗</option>
			
 
				+        <option>林树豪</option>
			
 
				+    </select>
			
 
				+
			
 
				+    <h3>选择结果</h3>
			
 
				+    <p>我最最喜欢: {{ likedNBAStar }}</p>
			
 
				+    <p>我的全明星: {{ likedNBAStars }}</p>
			
 
				+
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp', 
			
 
				+        data: {
			
 
				+            likedNBAStar: null,
			
 
				+            likedNBAStars: [],
			
 
				+        },
			
 
				+        methods: {
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/表单/表单修饰符.html
+++ b/Basic/表单/表单修饰符.html
@@ -0,0 +1,52 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+<head>
			
 
				+    <title></title>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+    <link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+<body>
			
 
				+<div id="myApp">
			
 
				+    <h1>用户注册</h1>
			
 
				+    
			
 
				+    <div>
			
 
				+        <label for="username">用户：</label>
			
 
				+        <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
			
 
				+        <span v-if="checkUsernameOK">可注册</span>
			
 
				+    </div>
			
 
				+    <div>
			
 
				+        <label for="age">年龄：</label>
			
 
				+        <input type="number" id="age" v-model.number="age">
			
 
				+    </div>
			
 
				+    <div>
			
 
				+        <label for="content">个人简介：</label><br/>
			
 
				+        <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
			
 
				+    </div>
			
 
				+    
			
 
				+    <h4>信息区</h4>
			
 
				+    <p>{{username}}</p>
			
 
				+    <p>{{age}}</p>
			
 
				+    <p><pre>{{content}}</pre></p>
			
 
				+</div>
			
 
				+<script>
			
 
				+    var myApp = new Vue({
			
 
				+        el: '#myApp', 
			
 
				+        data: {
			
 
				+            username: "",
			
 
				+            checkUsernameOK: false,
			
 
				+            age: "",
			
 
				+            content: "",
			
 
				+        },
			
 
				+        methods: {
			
 
				+            checkUsername: function(){
			
 
				+                if (this.username.length > 0) this.checkUsernameOK = true;
			
 
				+                else this.checkUsernameOK = false;
			
 
				+            },
			
 
				+        },
			
 
				+    });
			
 
				+</script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Basic/表单/表单单选按钮.html
+++ b/Basic/表单/表单单选按钮.html
@@ -0,0 +1,46 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+
			
 
				+	<head>
			
 
				+		<title>表单单选按钮</title>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.js"></script>
			
 
				+		<link href="../css/style.css" rel="stylesheet"> </head>
			
 
				+
			
 
				+	<body>
			
 
				+		<div id="myApp">
			
 
				+			<h1>表单单选按钮</h1>
			
 
				+
			
 
				+			<h3>选择性别</h3>
			
 
				+			<input type="radio" id="male" value="男" v-model="pickedSex">
			
 
				+			<label for="male">男</label>
			
 
				+			<br>
			
 
				+			<input type="radio" id="female" value="女" v-model="pickedSex">
			
 
				+			<label for="female">女</label>
			
 
				+
			
 
				+			<h3>选择爱好</h3>
			
 
				+			<input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
			
 
				+			<label for="game">玩游戏</label>
			
 
				+			<br>
			
 
				+			<input type="radio" id="movie" value="看电影" v-model="pickedHobby">
			
 
				+			<label for="movie">看电影</label>
			
 
				+
			
 
				+			<h3>选择结果</h3>
			
 
				+			<p>性别: {{ pickedSex }}</p>
			
 
				+			<p>爱好: {{ pickedHobby }}</p>
			
 
				+
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			var myApp = new Vue({
			
 
				+				el: '#myApp',
			
 
				+				data: {
			
 
				+					pickedSex: "",
			
 
				+					pickedHobby: "",
			
 
				+				},
			
 
				+				methods: {},
			
 
				+			});
			
 
				+		</script>
			
 
				+	</body>
			
 
				+
			
 
				+</html>
			
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 
				 # VUE笔记
			
 
				 
			
 
				+## 基础
			
 
				+
			
 
				 模板语法
			
 
				 条件语句
			
 
				 循环语句
			
@@ -13,3 +15,38 @@
 
				 路由
			
 
				 过渡 & 动画
			
 
				 
			
 
				+条件与循环
			
 
				+04. 处理用户输入
			
 
				+05. 按钮事件
			
 
				+06. 组件
			
 
				+07. 过滤器
			
 
				+08. 计算属性
			
 
				+09. 观察属性
			
 
				+10. 设定机算属性
			
 
				+11. Class绑定
			
 
				+12. Class对象绑定
			
 
				+13. 条件渲染
			
 
				+14. 元素显示v-show
			
 
				+15. 列表渲染
			
 
				+16. JS对象迭代
			
 
				+17. 事件处理器
			
 
				+18. 表单控件绑定
			
 
				+19. 表单复选框
			
 
				+20. 表单单选按钮
			
 
				+21. 表单下拉框
			
 
				+22. 表单修饰符
			
 
				+23. 组件：基础的基础
			
 
				+24. 组件：局部的组件
			
 
				+25. 组件：表行组件
			
 
				+26. 组件：数据
			
 
				+27. 组件：传递数据
			
 
				+28. 组件：传递变量
			
 
				+29. 组件：参数验证
			
 
				+30. 组件：事件传递
			
 
				+31. 组件：slot插槽
			
 
				+32. 组件：组合slot
			
 
				+
			
 
				+## 进阶
			
 
				+
			
 
				+
			
 
				+## 开源项目
		`@@ -0,0 +1 @@`
		`+AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下`