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
8f3dcb585f
commit
d9462a462e
19 changed files with 480 additions and 14 deletions
Unified View Show Diff Stats
  1. 16 6
      Basic/2.控制语句/if-else2.html
  2. 46 0
      Basic/2.控制语句/if-else3.html
  3. 0 0
      Basic/2.控制语句/json对象遍历2.html
  4. 0 0
      Basic/2.控制语句/json对象遍历3.html
  5. 0 0
      Basic/2.控制语句/整数遍历.html
  6. 33 0
      Basic/3.计算属性/computed计算属性.html
  7. 15 4
      Basic/3.计算属性/index.html
  8. 9 1
      Basic/模板语法/class样式绑定.html
  9. 35 0
      Basic/模板语法/class样式绑定2.html
  10. 31 0
      Basic/模板语法/v-show.html
  11. 45 0
      Basic/监听属性/emit事件传递.html
  12. 15 3
      Basic/监听属性/v-on事件处理.html
  13. 36 0
      Basic/组件/slot插槽.html
  14. 37 0
      Basic/组件/全局组件2.html
  15. 35 0
      Basic/组件/组合slot.html
  16. 48 0
      Basic/组件/表行组件.html
  17. 30 0
      Basic/表单/index.html
  18. 0 0
      Basic/表单/v-model双向绑定.html
  19. 49 0
      Basic/表单/参数验证.html

+ 16 - 6
Basic/2.控制语句/if-else2.html
View File 

@@ -13,19 +13,29 @@
 
 
 
 	<body>
 
 	<body>
 
 		<div id="app">
 
 		<div id="app">
 
-			<div v-if="Math.random() > 0.7">
 
-				Good
 
+			<h1>您的成绩评价</h1>
 
+			<div v-if="score > 80">
 
+				score:{{score}}  优秀生
 
 			</div>
 
 			</div>
 
-			<div v-else-if="Math.random() > 0.4">
 
-				Nomal
 
+			<div v-else-if="score > 60">
 
+				score:{{score}}  中等生
 
 			</div>
 
 			</div>
 
 			<div v-else>
 
 			<div v-else>
 
-				Bad
 
+				score:{{score}}  不及格
 
 			</div>
 
 			</div>
 
+			<div><button @click="btnClick">改变</button></div>
 
 		</div>
 
 		</div>
 
 		<script>
 
 		<script>
 
 			new Vue({
 
 			new Vue({
 
-				el: '#app'
 
+				el: '#app',
 
+				data: {
 
+					score: 0
 
+				},
 
+				methods: {
 
+					btnClick: function() {
 
+						this.score = Math.round(Math.random() * 100);
 
+					},
 
+				},
 
 			})
 
 			})
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>

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

@@ -0,0 +1,46 @@
 
+<!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">
 
+			<h1>您的成绩评价</h1>
 
+			<div>
 
+				score: {{score}} {{strResult}}
 
+			</div>
 
+			<div>
 
+				<button @click="btnClick">改变</button>
 
+			</div>
 
+		</div>
 
+		<script>
 
+			new Vue({
 
+				el: '#app',
 
+				data: {
 
+					score: 0,
 
+					strResult: "",
 
+				},
 
+				methods: {
 
+					btnClick: function() {
 
+						this.score = Math.round(Math.random() * 100);
 
+						if(this.score < 60)
 
+							this.strResult = "不及格";
 
+						else if(this.score < 80)
 
+							this.strResult = "中等生";
 
+						else if(this.score <= 100)
 
+							this.strResult = "优秀生";
 
+					},
 
+				},
 
+			})
 
+		</script>
 
+	</body>
 
+
 
+</html>

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


+ 0 - 0
Basic/2.控制语句/index5.html → Basic/2.控制语句/json对象遍历3.html
View File


+ 0 - 0
Basic/2.控制语句/index7.html → Basic/2.控制语句/整数遍历.html
View File


+ 33 - 0
Basic/3.计算属性/computed计算属性.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>

+ 15 - 4
Basic/3.计算属性/index.html
View File 

@@ -2,7 +2,7 @@
 
 <html lang="zh">
 
 <html lang="zh">
 
 
 
 <head>
 
 <head>
 
-    <title>计算属性</title>
 
+    <title></title>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
 
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
 
@@ -10,7 +10,8 @@
 
 
 
 <body>
 
 <body>
 
 <div id="myApp">
 
 <div id="myApp">
 
-    今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
 
+    <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
 
+    <button @click="btnClick(10800)">把含税改价为10800円</button>
 
 </div>
 
 </div>
 
 <script>
 
 <script>
 
     var myApp = new Vue({
 
     var myApp = new Vue({
 
@@ -19,13 +20,23 @@
 
             price: 29980
 
             price: 29980
 
         },
 
         },
 
         computed: {
 
         computed: {
 
-            priceInTax: function(){
 
-                return this.price * 1.08;
 
+            priceInTax: {
 
+                get:function(){
 
+                    return this.price * 1.08;
 
+                },
 
+                set: function(value){
 
+                    this.price = value / 1.08;
 
+                }
 
             },
 
             },
 
             priceChinaRMB: function(){
 
             priceChinaRMB: function(){
 
                 return Math.round(this.priceInTax / 16.75);
 
                 return Math.round(this.priceInTax / 16.75);
 
             },
 
             },
 
         },
 
         },
 
+        methods: {
 
+            btnClick: function(newPrice){
 
+                this.priceInTax = newPrice;
 
+            },
 
+        },
 
     });
 
     });
 
 </script>
 
 </script>
 
 </body>
 
 </body>

+ 9 - 1
Basic/模板语法/样式绑定.html → Basic/模板语法/class样式绑定.html
View File 

@@ -17,7 +17,10 @@
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 		<div id="myApp">
 
 		<div id="myApp">
 
-			<div v-bind:class="{ active: isActive }"></div>
 
+			<div v-bind:class="{ active: isActive }">红色文本1</div>
 
+			<div :class="{ active: !isActive }">红色文本2</div>
 
+			
+			<button @click="btnClick">改变class吧</button>
 
 		</div>
 
 		</div>
 
 		<script>
 
 		<script>
 
 			var myApp = new Vue({
 
 			var myApp = new Vue({
 
@@ -25,6 +28,11 @@
 
 				data: {
 
 				data: {
 
 					isActive: true
 
 					isActive: true
 
 				},
 
 				},
 
+				methods: {
 
+					btnClick: function() {
 
+						this.isActive = !this.isActive;
 
+					},
 
+				},
 
 			});
 
 			});
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>

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

@@ -0,0 +1,35 @@
 
+<!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 :class="myClass">红色文本</div>
 
+    <button @click="btnClick">改变class吧</button>
 
+</div>
 
+<script>
 
+    var myApp = new Vue({
 
+        el: '#myApp',
 
+        data: {
 
+            myClass: {
 
+                active: true,
 
+                big: true,
 
+            },
 
+        },
 
+        methods: {
 
+            btnClick: function(){
 
+                this.myClass.active = !this.myClass.active;
 
+                this.myClass.big = !this.myClass.big;
 
+            },
 
+        },
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 31 - 0
Basic/模板语法/v-show.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">
 
+    <h1 v-show="result">任天堂新一代主机Switch</h1>
 
+    <button @click="btnClick">显示按钮</button>
 
+</div>
 
+<script>
 
+    var myApp = new Vue({
 
+        el: '#myApp', 
+        data: {
 
+            result: true
 
+        },
 
+        methods: {
 
+            btnClick: function(){
 
+                this.result = !this.result;
 
+            },
 
+        },
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 45 - 0
Basic/监听属性/emit事件传递.html
View File 

@@ -0,0 +1,45 @@
 
+<!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>
 
+    <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
 
+    <hr/>
 
+    <h3>{{result}}</h3>
 
+</div>
 
+<script>
 
+    Vue.component('add-method', {
 
+        props: ['a', 'b'],
 
+        template: '<div><button v-on:click="add">加吧</button></div>',
 
+        methods: {
 
+            add: function(){
 
+                var value = 0;
 
+                value = this.a + this.b;
 
+                this.$emit('add_event', {
 
+                    result:value
 
+                });
 
+            }
 
+        },
 
+    });
 
+    var myApp = new Vue({
 
+        el: '#myApp', 
+        data: {
 
+            result: 0
 
+        },
 
+        methods: {
 
+            getAddResult: function(pval){
 
+                this.result = pval.result;
 
+            }
 
+        },
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 15 - 3
Basic/监听属性/事件处理.html → Basic/监听属性/v-on事件处理.html
View File 

@@ -10,8 +10,14 @@
 
 
 
 	<body>
 
 	<body>
 
 		<div id="app">
 
 		<div id="app">
 
-			<button v-on:click="counter += 1">增加 1</button>
 
-			<p>这个按钮被点击了 {{ counter }} 次。</p>
 
+			<div>
 
+				<button v-on:click="counter += 1">增加 1</button>
 
+				<p>这个按钮被点击了 {{ counter }} 次。</p>
 
+			</div>
 
+			<div>
 
+				<button v-on:click="btnClick('测试1')">测试1</button>
 
+				<button @click="btnClick('测试2')">测试2</button>
 
+			</div>
 
 		</div>
 
 		</div>
 
 
 
 		<script>
 
 		<script>
 
@@ -19,7 +25,13 @@
 
 				el: '#app',
 
 				el: '#app',
 
 				data: {
 
 				data: {
 
 					counter: 0
 
 					counter: 0
 
-				}
 
+				},
 
+				methods: {
 
+					btnClick: function(pname) {
 
+						this.mygame = pname;
 
+						alert(pname);
 
+					},
 
+				},
 
 			})
 
 			})
 
 		</script>
 
 		</script>
 
 	</body>
 
 	</body>

+ 36 - 0
Basic/组件/slot插槽.html
View File 

@@ -0,0 +1,36 @@
 
+<!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">
 
+    <say-to pname="koma">
 
+        你的视频做的太差了。
 
+    </say-to>
 
+    <say-to pname="mike">
 
+        你千万不要学koma。
 
+    </say-to>
 
+    <say-to pname="john">
 
+        你教教他们两个吧。
 
+    </say-to>
 
+</div>
 
+<script>
 
+    Vue.component('say-to', {
 
+        props: ['pname'],
 
+        template: '<div>'
 
+            + '你好，<strong>{{pname}}</strong>！'
 
+            + '<slot></slot>'
 
+            + '</div>',
 
+    });
 
+    var myApp = new Vue({
 
+        el: '#myApp',
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 37 - 0
Basic/组件/全局组件2.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">
 
+  <ol>
 
+    <game-item v-for="item in games" v-bind:game="item"></game-item>
 
+  </ol>
 
+</div>
 
+<script>
 
+/* 组件定义：game-item */
 
+Vue.component('game-item', {
 
+  props: ['game'],
 
+  template: '<li>{{ game.title }}</li>'
 
+});
 
+/* Vue对象实例化 */
 
+var myApp = new Vue({
 
+  el: '#myApp',
 
+  data: {
 
+    games: [
 
+      { title: '斗地主' },
 
+      { title: '打麻雀' },
 
+      { title: 'UNO' }
 
+    ]
 
+  }
 
+});
 
+</script>
 
+</body>
 
+
 
+</html>

+ 35 - 0
Basic/组件/组合slot.html
View File 

@@ -0,0 +1,35 @@
 
+<!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">
 
+    <nba-all-stars c="奥尼尔" pf="加内特">
 
+        <span slot="sf">皮尔斯</span>
 
+        <span slot="sg">雷阿伦</span>
 
+        <span slot="pg">隆多</span>
 
+    </nba-all-stars>
 
+</div>
 
+<script>
 
+    Vue.component('nba-all-stars', {
 
+        props: ['c', 'pf'],
 
+        template: '<div>'
 
+            + '<div>中锋：{{c}}</div>'
 
+            + '<div>大前：{{pf}}</div>'
 
+            + '<div>小前：<slot name="sf"></slot></div>'
 
+            + '<div>分卫：<slot name="sg"></slot></div>'
 
+            + '<div>控卫：<slot name="pg"></slot></div>'
 
+            + '</div>',
 
+    });
 
+    var myApp = new Vue({
 
+        el: '#myApp',
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 48 - 0
Basic/组件/表行组件.html
View File 

@@ -0,0 +1,48 @@
 
+<!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>2017年最期待的游戏是：</h1>
 
+    <table border="1">
 
+        <tr>
 
+            <td>编号</td>
 
+            <td>游戏名称</td>
 
+        </tr>
 
+        <tr is="my-row1"></tr>
 
+        <tr is="my-row2"></tr>
 
+        <tr is="my-row3"></tr>
 
+<!--
 
+        <my-row1></my-row1>
 
+        <my-row2></my-row2>
 
+        <my-row3></my-row3>
 
+-->
 
+    </table>
 
+</div>
 
+<script>
 
+    Vue.component('my-row1', {
 
+        template: '<tr><td>(1)</td><td>塞尔达传说:荒野之息(3/3)</td></tr>'
 
+    });    
+    Vue.component('my-row2', {
 
+        template: '<tr><td>(2)</td><td>新马里奥赛车(4/28)</td></tr>'
 
+    });    
+    Vue.component('my-row3', {
 
+        template: '<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
 
+    });    
+    var myApp = new Vue({
 
+        el: '#myApp', 
+        data: {
 
+        },
 
+        methods: {
 
+        },
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 30 - 0
Basic/表单/index.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">
 
+    <div>请输入您的名字：<input v-model="myname"></div>
 
+    <hr/>
 
+    <say-hello :pname="myname" />
 
+</div>
 
+<script>
 
+    Vue.component('say-hello', {
 
+        props: ['pname'],
 
+        template: '<div>你好，<strong>{{pname}}</strong>！</div>',
 
+    });
 
+    var myApp = new Vue({
 
+        el: '#myApp', 
+        data: {
 
+            myname: 'Koma'
 
+        }
 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>

+ 0 - 0
Basic/表单/双向绑定.html → Basic/表单/v-model双向绑定.html
View File


+ 49 - 0
Basic/表单/参数验证.html
View File 

@@ -0,0 +1,49 @@
 
+<!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>
 
+    <show-member-info name="koma" :age="25" :detail="{address:'earth', language:'世界语'}"></show-member-info>
 
+</div>
 
+<script>
 
+    Vue.component('show-member-info', {
 
+        props: {
 
+            name: {
 
+                type: String,
 
+                required: true,
 
+            },
 
+            age: {
 
+                type: Number,
 
+                validator: function (value) {
 
+                    return value >= 0 && value <= 130;
 
+                }                
+            },
 
+            detail: {
 
+                type: Object,
 
+                default: function() {
 
+                    return {
 
+                        address: 'US',
 
+                        language: 'English',
 
+                    };
 
+                }
 
+            },
 
+        },
 
+        template: '<div>姓名：{{this.name}}<br/>' 
+            + '年龄：{{this.age}}岁<br/>'
 
+            + '地址：{{this.detail.address}}<br/>'
 
+            + '语言：{{this.detail.language}} </div>',
 
+    });
 
+    var myApp = new Vue({
 
+        el: '#myApp', 
+    });
 
+</script>
 
+</body>
 
+
 
+</html>