Home Explore Project
Register Sign In
vue
/
Vue
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

go on

liuyuqi-dellpc 6 years ago
parent
80c2d98699
commit
8f3dcb585f
34 changed files with 904 additions and 1 deletions
Unified View Show Diff Stats
  1. 26 0
      Basic/1.引入VUE/index.html
  2. 11 0
      Basic/2.控制语句/README.md
  3. 30 0
      Basic/2.控制语句/if-else.html
  4. 33 0
      Basic/2.控制语句/if-else2.html
  5. 43 0
      Basic/2.控制语句/if.html
  6. 0 0
      Basic/2.控制语句/index5.html
  7. 0 0
      Basic/2.控制语句/index6.html
  8. 0 0
      Basic/2.控制语句/index7.html
  9. 0 0
      Basic/2.控制语句/json对象遍历.html
  10. 7 1
      Basic/2.控制语句/json数组遍历.html
  11. 10 0
      Basic/3.计算属性/README.md
  12. 33 0
      Basic/3.计算属性/index.html
  13. 27 0
      Basic/3.计算属性/反转字符串.html
  14. 6 0
      Basic/4.过滤器/README.md
  15. 37 0
      Basic/4.过滤器/index.html
  16. 44 0
      Basic/css/style.css
  17. 41 0
      Basic/模板语法/v-bind.html
  18. 26 0
      Basic/模板语法/v-html.html
  19. 32 0
      Basic/模板语法/样式绑定.html
  20. 30 0
      Basic/监听属性/watch2.html
  21. 27 0
      Basic/监听属性/事件处理.html
  22. 31 0
      Basic/组件/全局组件.html
  23. 24 0
      Basic/组件/动态 Prop.html
  24. 31 0
      Basic/组件/局部组件.html
  25. 40 0
      Basic/网络/ajax.html
  26. 1 0
      Basic/网络/ajax_info.txt
  27. 24 0
      Basic/网络/响应接口.html
  28. 25 0
      Basic/表单/README.md
  29. 30 0
      Basic/表单/双向绑定.html
  30. 40 0
      Basic/表单/复选框.html
  31. 60 0
      Basic/表单/表单select下拉框.html
  32. 52 0
      Basic/表单/表单修饰符.html
  33. 46 0
      Basic/表单/表单单选按钮.html
  34. 37 0
      README.md

+ 26 - 0
Basic/1.引入VUE/index.html
View File 

@@ -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>

+ 11 - 0
Basic/2.控制语句/README.md
View File 

@@ -0,0 +1,11 @@
 
+### if
 
+
 
+使用v-if标签，
 
+
 
+### for
 
+
 
+使用v-for标签。
 
+
 
+### 变量引用
 
+
 
+{{xx.xx}}

+ 30 - 0
Basic/2.控制语句/if-else.html
View File 

@@ -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>

+ 33 - 0
Basic/2.控制语句/if-else2.html
View File 

@@ -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>

+ 43 - 0
Basic/2.控制语句/if.html
View File 

@@ -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>

+ 0 - 0
note1/v-for/index5.html → Basic/2.控制语句/index5.html
View File


+ 0 - 0
note1/v-for/index6.html → Basic/2.控制语句/index6.html
View File


+ 0 - 0
note1/v-for/index7.html → Basic/2.控制语句/index7.html
View File


+ 0 - 0
note1/v-for/index4.html → Basic/2.控制语句/json对象遍历.html
View File


+ 7 - 1
note1/v-for/index3.html → Basic/2.控制语句/json数组遍历.html
View File 

@@ -12,6 +12,11 @@
 
       {{ s.name }}
 
       {{ s.name }}
 
     </li>
 
     </li>
 
   </ol>
 
   </ol>
 
+  <ol>
 
+  	<li v-for="c in citys">
 
+  		{{c}}
 
+  	</li>
 
+  </ol>
 
 </div>
 
 </div>
 
 <!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
 <!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
 <script>
 
 <script>
 
@@ -22,7 +27,8 @@ new Vue({
 
       { name: 'Runoob.com' },
 
       { name: 'Runoob.com' },
 
       { name: 'Google.com' },
 
       { name: 'Google.com' },
 
       { name: 'Taobao.com' }
 
       { name: 'Taobao.com' }
 
-    ]
 
+    ],
 
+    citys:["上海","南京","北京"]
 
   }
 
   }
 
 })
 
 })
 
 </script>
 
 </script>

+ 10 - 0
Basic/3.计算属性/README.md
View File 

@@ -0,0 +1,10 @@
 
+计算属性
 
+=========
 
+* computed
 
+
 
+处理元数据，便于进行二次利用。（比如：消费税自动计算功能）。没啥用。
 
+
 
+* computed vs methods
 
+
 
+我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 
+

+ 33 - 0
Basic/3.计算属性/index.html
View File 

@@ -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>

+ 27 - 0
Basic/3.计算属性/反转字符串.html
View File 

@@ -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>

+ 6 - 0
Basic/4.过滤器/README.md
View File 

@@ -0,0 +1,6 @@
 
+过滤器
 
+=======
 
+
 
+### filters
 
+
 
+格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）

+ 37 - 0
Basic/4.过滤器/index.html
View File 

@@ -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>

+ 44 - 0
Basic/css/style.css
View File 

@@ -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;
 
+}

+ 41 - 0
Basic/模板语法/v-bind.html
View File 

@@ -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>

+ 26 - 0
Basic/模板语法/v-html.html
View File 

@@ -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>

+ 32 - 0
Basic/模板语法/样式绑定.html
View File 

@@ -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>

+ 30 - 0
Basic/监听属性/watch2.html
View File 

@@ -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>

+ 27 - 0
Basic/监听属性/事件处理.html
View File 

@@ -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>

+ 31 - 0
Basic/组件/全局组件.html
View File 

@@ -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>

+ 24 - 0
Basic/组件/动态 Prop.html
View File 

@@ -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>

+ 31 - 0
Basic/组件/局部组件.html
View File 

@@ -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>

+ 40 - 0
Basic/网络/ajax.html
View File 

@@ -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>

+ 1 - 0
Basic/网络/ajax_info.txt
View File 

@@ -0,0 +1 @@
 
+AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下

+ 24 - 0
Basic/网络/响应接口.html
View File 

@@ -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>

+ 25 - 0
Basic/表单/README.md
View File 

@@ -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">
 
+~~~

+ 30 - 0
Basic/表单/双向绑定.html
View File 

@@ -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>

+ 40 - 0
Basic/表单/复选框.html
View File 

@@ -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>

+ 60 - 0
Basic/表单/表单select下拉框.html
View File 

@@ -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>

+ 52 - 0
Basic/表单/表单修饰符.html
View File 

@@ -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>

+ 46 - 0
Basic/表单/表单单选按钮.html
View File 

@@ -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>

+ 37 - 0
README.md
View File 

@@ -1,5 +1,7 @@
 
 # VUE笔记
 
 # 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
 
+
 
+## 进阶
 
+
 
+
 
+## 开源项目