init

zhishaofei3 · Jun 18, 2017 · fac45fc · fac45fc
commit fac45fc
Show file tree

Hide file tree

Showing 30 changed files with 10,440 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Created by .ignore support plugin (hsz.mobi)
+*.iml
+.idea
+.ipr
+.iws
+*.diff
+*.patch
+*.bak
+.DS_Store
+node_modules/
+node_modules2/
+.project
+.settings
+npm-debug.log
+.*proj
+.svn/
+*.swp
+*.swo
+*.log
+examples/dist/
+dist/
+yarn-error.log
+test/unit/coverage
+.vscode
diff --git a/1.Introduction/1.DeclarativeRendering.html b/1.Introduction/1.DeclarativeRendering.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-声明式渲染</title>
+</head>
+<body>
+<div id="app">
+	{{ message }}
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var app = new Vue({
+		el: '#app',
+		data: {
+			message: 'Hello Vue!'
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/2.DeclarativeRendering.html b/1.Introduction/2.DeclarativeRendering.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-声明式渲染</title>
+</head>
+<body>
+<div id="app-2">
+	<span v-bind:title="message">
+        鼠标悬停几秒钟查看此处动态绑定的提示信息！
+	</span>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var app2 = new Vue({
+		el: '#app-2',
+		data: {
+			message: '页面加载于 ' + new Date()
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/3.ConditionalsAndLoops.html b/1.Introduction/3.ConditionalsAndLoops.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-声明式渲染</title>
+</head>
+<body>
+<div id="app-3">
+	<p v-if="seen">现在你看到我了</p>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var app3 = new Vue({
+		el: '#app-3',
+		data: {
+			seen: true
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/4.ConditionalsAndLoops.html b/1.Introduction/4.ConditionalsAndLoops.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-条件与循环</title>
+</head>
+<body>
+<div id="app-4">
+	<ol>
+		<li v-for="todo in todos">
+			{{ todo.text }}
+		</li>
+	</ol>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var app4 = new Vue({
+		el: '#app-4',
+		data: {
+			todos: [
+				{ text: 'Learn JavaScript' },
+				{ text: 'Learn Vue' },
+				{ text: 'Build something awesome' }
+			]
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/5.HandlingUserInput.html b/1.Introduction/5.HandlingUserInput.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-处理用户输入</title>
+</head>
+<body>
+<div id="app-5">
+	<p>{{ message }}</p>
+	<button v-on:click="reverseMessage">Reverse Message</button>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var app5 = new Vue({
+		el: '#app-5',
+		data: {
+			message: 'Hello Vue.js!'
+		},
+		methods: {
+			reverseMessage: function () {
+				this.message = this.message.split('').reverse().join('')
+			}
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/6.HandlingUserInput.html b/1.Introduction/6.HandlingUserInput.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-处理用户输入</title>
+</head>
+<body>
+<div id="app-6">
+	<p>{{ message }}</p>
+	<input v-model="message">
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var app6 = new Vue({
+		el: '#app-6',
+		data: {
+			message: 'Hello Vue!'
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/7.ComposingWithComponents.html b/1.Introduction/7.ComposingWithComponents.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-组件化应用构建</title>
+</head>
+<body>
+<div id="app-7">
+	<ol>
+		<!-- 创建一个 todo-item 组件的实例 -->
+		<todo-item></todo-item>
+	</ol>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	Vue.component('todo-item', {
+		template: '<li>这是个待办项</li>'
+	})
+
+	var app7 = new Vue({
+		el: '#app-7'
+	})
+
+</script>
+</body>
+</html>
diff --git a/1.Introduction/8.ComposingWithComponents.html b/1.Introduction/8.ComposingWithComponents.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-组件化应用构建</title>
+</head>
+<body>
+<div id="app-7">
+	<ol>
+		<!-- 现在我们为每个todo-item提供待办项对象    -->
+		<!-- 待办项对象是变量，即其内容可以是动态的 -->
+		<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
+	</ol>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	Vue.component('todo-item', {
+		props: ['todo'],
+		template: '<li>{{ todo.text }}</li>'
+	})
+	var app7 = new Vue({
+		el: '#app-7',
+		data: {
+			groceryList: [
+				{ text: '蔬菜' },
+				{ text: '奶酪' },
+				{ text: '随便其他什么人吃的东西' }
+			]
+		}
+	})
+</script>
+</body>
+</html>
diff --git a/1.Introduction/9.Imaginary.html b/1.Introduction/9.Imaginary.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>介绍-组件化应用构建-假设的例子</title>
+</head>
+<body>
+<div id="app">
+	<app-nav></app-nav>
+	<app-view>
+		<app-sidebar></app-sidebar>
+		<app-content></app-content>
+	</app-view>
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	Vue.component('app-nav', {
+		template: '<nav>我是头部</nav>'
+	})
+	Vue.component('app-view', {
+		template: '<div><slot></slot></div>'
+	})
+	Vue.component('app-sidebar', {
+		template: '<div>我是侧边栏</div>'
+	})
+	Vue.component('app-content', {
+		template: '<div>我是主体内容</div>'
+	})
+	var app = new Vue({
+		el: '#app'
+	})
+</script>
+</body>
+</html>
diff --git a/2.TheVueInstance/1.ComponentConstructors.html b/2.TheVueInstance/1.ComponentConstructors.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Vue 实例-组件构造器</title>
+</head>
+<body>
+<div id="app">
+	{{ message }}
+</div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var MyComponent = Vue.extend({
+		data: function () {
+			return {
+				a: 5
+			}
+		}
+	})
+	// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
+	var myComponentInstance = new MyComponent()
+	console.log(myComponentInstance.a);//5
+</script>
+</body>
+</html>
diff --git a/2.TheVueInstance/2.PropertiesAndMethods.html b/2.TheVueInstance/2.PropertiesAndMethods.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Vue 实例-属性与方法</title>
+</head>
+<body>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var data = {a: 1}
+	var vm = new Vue({
+		data: data
+	})
+	vm.a === data.a//true
+	// 设置属性也会影响到原始数据
+	vm.a = 2
+	data.a//2
+	// ... 反之亦然
+	data.a = 3
+	vm.a// 3
+</script>
+</body>
+</html>
diff --git a/2.TheVueInstance/3.PropertiesAndMethods.html b/2.TheVueInstance/3.PropertiesAndMethods.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Vue 实例-属性与方法</title>
+</head>
+<body>
+<div id="example"></div>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var data = {a: 1}
+	var vm = new Vue({
+		el: '#example',
+		data: data
+	})
+	vm.$data === data // -> true
+	vm.$el === document.getElementById('example') // -> true
+	// $watch 是一个实例方法
+	vm.$watch('a', function (newVal, oldVal) {
+		// 这个回调将在 `vm.a`  改变后调用
+		console.log(newVal);
+		console.log(oldVal);
+	})
+	vm.a = 2;//修改vm.a或data.a
+</script>
+</body>
+</html>
diff --git a/2.TheVueInstance/4.InstanceLifecycleHooks.html b/2.TheVueInstance/4.InstanceLifecycleHooks.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Vue 实例-实例生命周期</title>
+</head>
+<body>
+<script type="text/javascript" src="../js/vue.js"></script>
+<script type="text/javascript">
+	var vm = new Vue({
+		data: {
+			a: 1
+		},
+		created: function () {
+			// `this` 指向 vm 实例
+			console.log('a is: ' + this.a)// "a is: 1"
+		}
+	})
+</script>
+</body>
+</html>