vue2.0

hyion · Mar 10, 2017 · 6c076ab · 6c076ab
commit 6c076ab
Show file tree

Hide file tree

Showing 32 changed files with 20,569 additions and 0 deletions.
diff --git a/1-helloWorld.html b/1-helloWorld.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<div id="app">
+		<input v-model="userName"/>
+		<p>{{userName}}</p>
+	</div>
+
+<script src="js/vue-2.1.3.js"></script>	
+<script>
+	var vm = new Vue({
+		el: '#app',
+		data: {
+			userName: '张三'
+		}
+	});
+
+
+</script>
+</body>
+</html>
diff --git a/10-过滤器.html b/10-过滤器.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <div id="app">
+        <p>首字母变大写: {{userName | capitalize}}</p>
+        <button v-on:click="test|debounce 2000">延迟触发事件</button>
+        <p>对象变json字符串: {{cat | json}}</p>
+    </div>
+
+
+<script src="vue.js"></script>
+<script>
+    var vm = new Vue({
+        el: '#app',
+        data: {
+            userName: 'huruqing',
+            cat: {
+                color: '红色',
+                age: '2岁'
+            }
+        },
+        methods: {
+            test: function() {
+                alert('测试延迟');
+            }
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/10_filterBy.html b/10_filterBy.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<div id="app">
+	  <input v-model="str">
+	  <ul>
+	    <li v-for="user in users | filterBy str in 'name'">
+	      {{ user.name }}
+	    </li>
+	  </ul>
+	</div>
+
+
+
+
+	<script src="js/vue-2.1.3.js"></script>
+	<script>
+		var vm = new Vue({
+			el: '#app',
+			data: {
+				// 根据str过滤列表
+				str: '',
+			    users: [
+			      { name: 'Bruce' },
+			      { name: 'Chuck' },
+			      { name: 'Jackie' }
+			    ]
+			}
+		})
+	</script>
+</body>
+</html>
diff --git a/11.1_方法处理器.html b/11.1_方法处理器.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<div id="app">
+		<!-- 方法处理器 -->
+		<button @click="test">click me</button><br />
+		<!-- 内联处理器,可以传递参数和事件对象$event -->
+		<button v-on:click="testIn(222, $event)">传递参数</button>
+
+	</div>
+
+	<script src="js/vue-2.1.3.js"></script>
+	<script>
+		var vm = new Vue({
+			el: '#app',
+			data: {
+
+			},
+			methods: {
+				test: function() {
+					console.log(this);
+					console.log(event.target);
+				},
+				testIn: function(num, ev) {
+					console.log(num);
+					console.log(ev.target);
+				}
+			}
+		});
+
+	</script>
+
+
+</body>
+</html>
diff --git a/11.2_事件修饰符.html b/11.2_事件修饰符.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<pre>
+		事件修饰符: 修饰事件的,比如阻止事件冒泡,阻止默认事件
+	</pre>
+	<div id="app" v-on:click="parentClick" style="border: 1px solid;height: 100px;">
+		<button v-on:click="subClick">sub</button>
+		<!-- 加了stop修饰符,阻止事件冒泡 -->
+		<button v-on:click.stop="subClick">sub</button>
+		<a href="http://www.baidu.com" v-on:click.stop.prevent="clickUrl">百度</a>
+	</div>
+
+	<script src="js/vue-2.1.3.js"></script>
+	<script>
+		var vm = new Vue({
+			el: '#app',
+			data: {},
+			methods: {
+				parentClick: function() {
+					alert('你点击了父元素');
+				},
+				subClick: function() {
+					alert('你点击了子元素');
+				},
+				clickUrl: function() {
+					alert('修饰符可以串联,阻止事件默认事件和冒泡;');
+				}
+			}
+		})
+	</script>
+</body>
+</html>
diff --git a/11.3_按键修饰符.html b/11.3_按键修饰符.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<div id="app">
+		<!-- 只有当按下的键是回车时才触发事件 -->
+		<input v-on:keyup.enter="login" />
+	</div>
+
+	<script src="js/vue-2.1.3.js"></script>
+	<script>
+		var vm = new Vue({
+			el: '#app',
+			methods: {//method 方法
+				login: function() {
+					alert('登录');
+				}
+			}
+		})
+	</script>
+</body>
+</html>
diff --git a/12-自定义过滤器.html b/12-自定义过滤器.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	<h3>自定义过滤器</h3>
+	<div id="app">
+		<p>调用多个过滤器:</p>
+		<p>
+			{{msg | reverse('_')| wrap}}    <!-- ('_')这是自定义传参a要传的参数 -->
+		</p>
+		<p>传入多个参数:</p>
+		<p>
+			{{msg | wrap}}
+		</p>
+	</div>
+
+<script type="text/javascript" src="js/vue-2.1.3.js"></script>	
+<script type="text/javascript">	
+	// 自定义过滤器要先于创建实例之前
+	Vue.filter('wrap', function (value) {
+  		return value + '....................';
+	});
+	Vue.filter('reverse', function (value, a) {//a是自定义传参数
+
+  		return value.split('').reverse().join(a);//reverse()倒序
+	});
+	var vm = new Vue({
+		el: '#app',
+		data: {
+			msg: 'hello world'
+		}
+	});
+
+</script>
+</body>
+</html>
diff --git a/13-自定义指令.html b/13-自定义指令.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	<div id="app">
+		<p v-text="obj"></p>
+		<p v-ots="obj"></p>
+		<p v-ots="msg"></p>
+	</div>
+
+	<script type="text/javascript" src="js/vue-2.1.3.js"></script>
+	<script type="text/javascript">
+
+		// 自定义指令object to str 变量是对象时转为字符串
+		Vue.directive('ots', {
+			  bind: function (el,binding) {
+			    console.log('demo bound!');
+			    var str;
+			  	if (typeof binding.value === 'object') {
+			  		// 如果是对象,先转为字符	串
+			  		str = JSON.stringify(binding.value);
+			  	} else {
+			  		str = binding.value;
+			  	}
+			    el.innerHTML = str;
+			  },
+			  update: function (el,binding,vnode,oldVnode) {
+			  	console.log('do nothing!');
+			  	console.log(vnode);
+			  	console.log(oldVnode);
+			  	// var str;
+			  	// if (typeof binding.value === 'object') {
+			  	// 	// 如果是对象,先转为字符串
+			  	// 	str = JSON.stringify(binding.value);
+			  	// } else {
+			  	// 	str = binding.value;
+			  	// }
+			   //  el.innerHTML = str;
+			}
+		})
+
+	var vm = new Vue({
+	  el: '#app',
+	  data: {
+	  	msg: '自定义指令ots',
+	    obj: {
+	    	userName: '楚留香',
+	    	age: 200,
+	    	hobby: '武功'
+	    }
+	  }
+	})
+
+	</script>
+</body>
+</html>
diff --git a/14-source(ajax)组件.html b/14-source(ajax)组件.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	<div id="app">
+
+	</div>
+
+
+	<script type="text/javascript" src="js/vue-2.1.3.js"></script>
+	<script type="text/javascript" src="js/vue-resource.js"></script>
+	<script type="text/javascript">
+		var vm = new Vue({
+			el: '#app',
+			data: {
+
+			}
+		});
+		vm.$http.get("./test.json",{dataType:'json'}).then(function(res) {
+			// 调用json()方法得到对象
+			console.log(res.json());
+		}, function() {
+			alert('error');
+		})
+
+	</script>
+</body>
+</html>
diff --git a/2-数据填充.html b/2-数据填充.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<div id="app">
+		<!--填充text文本-->
+		<p>{{className}}</p>
+		<p v-text="className"></p>
+
+		<!--填充带标签的文本-->
+		<p v-html="btn"></p>
+	</div>
+
+<script src="js/vue-2.1.3.js"></script>
+<script>
+	var vm = new Vue({
+		el: '#app',
+		data: {
+			className: '北801',
+			btn: '<button>这是个按钮</button>'
+		}
+	})
+
+
+</script>
+</body>
+</html>
diff --git a/3-双向绑定.html b/3-双向绑定.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+<body>
+	<div id="app">
+		<input v-model="userName" />
+		<p v-text="userName"></p>
+	</div>
+
+	<script src="js/vue-2.1.3.js"></script>
+	<script>
+		var vm = new Vue({
+			el: '#app',
+			data: {
+				userName: '张三'
+			}
+		});
+		// vm.userName = '李四';
+	</script>
+</body>
+</html>