|
1 |
| -#Vue.js教程 |
| 1 | +# Vue.js教程 |
2 | 2 |
|
3 |
| -##1. Getting Started |
| 3 | +## 1. Getting Started |
4 | 4 |
|
5 | 5 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——60分钟快速入门](http://www.cnblogs.com/keepfool/p/5619070.html)
|
6 | 6 |
|
7 |
| -####Hello World双向绑定示例 |
| 7 | +#### Hello World双向绑定示例 |
8 | 8 |
|
9 | 9 | - [Hello World示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/index.html)
|
10 | 10 |
|
11 |
| -####常用内置指令 |
| 11 | +#### 常用内置指令 |
12 | 12 | - [v-if指令示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-if.html)
|
13 | 13 | - [v-show指令示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-show.html)
|
14 | 14 | - [v-else指令示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-else.html)
|
15 | 15 | - [v-for指令示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-for.html)
|
16 | 16 | - [v-bind指令示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-bind.html)
|
17 | 17 | - [v-on指令示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-if.html)
|
18 | 18 |
|
19 |
| -####页面示例 |
| 19 | +#### 页面示例 |
20 | 20 | - [循环列表、双向绑定、添加数据、删除数据综合示例](https://keepfool.github.io/vue-tutorials/01.GettingStarted/simple-demo.html)
|
21 | 21 |
|
22 |
| -##2. Components |
| 22 | +## 2. Components |
23 | 23 |
|
24 |
| -###Part-1 |
| 24 | +### Part-1 |
25 | 25 |
|
26 | 26 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——60分钟组件快速入门(上篇)](http://www.cnblogs.com/keepfool/p/5625583.html)
|
27 | 27 |
|
28 | 28 | 提醒:最好结合源码和Chrome的F12工具查看示例
|
29 | 29 |
|
30 |
| -####组件注册示例 |
| 30 | +#### 组件注册示例 |
31 | 31 |
|
32 | 32 | - [组件使用的基本步骤](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/registration-steps.html)
|
33 | 33 | - [组件的局部注册](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/local-registration.html)
|
|
37 | 37 | - [使用template标签替代HTML字符串模板](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/use-template-tag.html)
|
38 | 38 |
|
39 | 39 |
|
40 |
| -####父组件传递数据给子组件 |
| 40 | +#### 父组件传递数据给子组件 |
41 | 41 | - [props基础示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/basic-props.html)
|
42 | 42 | - [props单向绑定](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/single-bind-props.html)
|
43 | 43 | - [props双向绑定](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/double-bind-props.html)
|
44 | 44 | - [props单次绑定](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/once-bind-props.html)
|
45 | 45 |
|
46 |
| -####页面示例 |
| 46 | +#### 页面示例 |
47 | 47 | - [注册组件、过滤表格、父组件传递数据给子组件综合示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/simple-demo.html)
|
48 | 48 |
|
49 |
| -###Part-2 |
| 49 | +### Part-2 |
50 | 50 |
|
51 | 51 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——60分钟组件快速入门(下篇)](http://www.cnblogs.com/keepfool/p/5637834.html)
|
52 | 52 |
|
53 |
| -####slot示例 |
| 53 | +#### slot示例 |
54 | 54 |
|
55 | 55 | - [单个slot示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/single-slot.html)
|
56 | 56 | - [多个slot示例1——对话框](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/dialog-slot.html)
|
57 | 57 | - [多个slot示例2——多种颜色的对话框](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/dialog-slot-with-class.html)
|
58 | 58 | - [多个slot示例3——未指定footer的对话框](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/dialog-slot-with-class-no-footer.html)
|
59 | 59 |
|
60 |
| -####父子组件实例访问示例 |
| 60 | +#### 父子组件实例访问示例 |
61 | 61 |
|
62 | 62 | - [$children示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/$children.html)
|
63 | 63 | - [$ref示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/$parent.html)
|
64 | 64 | - [$parent示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/$parent.html)
|
65 | 65 |
|
66 |
| -####父子组件通信示例 |
| 66 | +#### 父子组件通信示例 |
67 | 67 |
|
68 | 68 | - [$dispatch:子组件向父组件派发事件](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/$dispatch.html)
|
69 | 69 | - [$broadcast:父组件向子组件广播事件](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/$broadcast.html)
|
70 | 70 |
|
71 |
| -####基于组件一步一步实现一个CURD示例 |
| 71 | +#### 基于组件一步一步实现一个CURD示例 |
72 | 72 |
|
73 | 73 | - [第1步:创建表格组件,添加查询和删除功能](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/demo/step01.html)
|
74 | 74 | - [第2步:创建对话框组件](https://keepfool.github.io/02.Components/Part-2/demo/step02.html)
|
|
77 | 77 | - [第5步:修改数据新建功能](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/demo/step05.html)
|
78 | 78 | - [第6步:完整示例](https://keepfool.github.io/vue-tutorials/02.Components/Part-2/demo/step06.html)
|
79 | 79 |
|
80 |
| -##3. Ajax |
| 80 | +## 3. Ajax |
81 | 81 |
|
82 | 82 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——基于$.ajax实现数据的跨域增删查改](http://www.cnblogs.com/keepfool/p/5648674.html)
|
83 |
| -###基于jquery或zepto的$.ajax示例 |
| 83 | +### 基于jquery或zepto的$.ajax示例 |
84 | 84 |
|
85 | 85 | - [$.ajax跨域GET示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/ajax-cors-get.html)
|
86 | 86 | - [$.ajax跨域JSONP示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/ajax-jsonp.html)
|
87 | 87 | - [$.ajax跨域POST示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/ajax-cors-post.html)
|
88 | 88 | - [$.ajax跨域PUT示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/ajax-cors-put.html)
|
89 | 89 | - [$.ajax跨域DELETE示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/ajax-cors-delete.html)
|
90 | 90 |
|
91 |
| -###基于vue-resource的示例 |
| 91 | +### 基于vue-resource的示例 |
92 | 92 |
|
93 | 93 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——vue-resource全攻略](http://www.cnblogs.com/keepfool/p/5657065.html)
|
94 | 94 |
|
95 |
| -####http示例 |
| 95 | +#### http示例 |
96 | 96 | - [http get示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/http-get.html)
|
97 | 97 | - [http jsonp示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/http-jsonp.html)
|
98 | 98 | - [http post示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/http-post.html)
|
99 | 99 | - [http put示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/http-put.html)
|
100 | 100 | - [http delete示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/http-delete.html)
|
101 | 101 |
|
102 |
| -####resouce示例 |
| 102 | +#### resouce示例 |
103 | 103 | - [resource get示例](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/resource-get.html)
|
104 | 104 | - [resource save示例(HTTP POST)](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/resource-post.html)
|
105 | 105 | - [resource update示例(HTTP PUT)](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/resource-put.html)
|
106 | 106 | - [resource remove示例(HTTP DELETE)](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/resource-delete.html)
|
107 | 107 |
|
108 |
| -####inteceptor示例 |
| 108 | +#### inteceptor示例 |
109 | 109 | - [inteceptor示例1——ajax请求的loading界面](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/inteceptor-demo1.html)
|
110 | 110 | - [inteceptor实例2——请求失败时的提示对话框](http://211.149.193.19:8090/vue-tutorials/03.Ajax/vue-resource/inteceptor-demo2.html)
|
111 | 111 |
|
112 |
| -##4. OAuth |
| 112 | +## 4. OAuth |
113 | 113 |
|
114 | 114 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用](http://www.cnblogs.com/keepfool/p/5665953.html)
|
115 | 115 |
|
116 |
| -###$.ajax示例 |
| 116 | +### $.ajax示例 |
117 | 117 |
|
118 | 118 | - [注册示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/jquery-zepto/step-01.html)
|
119 | 119 | - [登录和注销示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/jquery-zepto/step-02.html)
|
120 | 120 | - [登录获取Token并调用API示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/jquery-zepto/step-03.html)
|
121 | 121 | - [注册、登录、注销、调用API综合示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/jquery-zepto/step-04.html)
|
122 | 122 |
|
123 |
| -###vue-resource示例 |
| 123 | +### vue-resource示例 |
124 | 124 |
|
125 | 125 | - [注册示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/vue-resource/step-01.html)
|
126 | 126 | - [登录和注销示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/vue-resource/step-02.html)
|
127 | 127 | - [登录获取Token并调用API示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/vue-resource/step-03.html)
|
128 | 128 | - [注册、登录、注销、调用API综合示例](http://211.149.193.19:8090/vue-tutorials/04.OAuth/vue-resource/step-04.html)
|
129 | 129 |
|
130 |
| -###结合CURD、注册、登录、注销的页面示例 |
| 130 | +### 结合CURD、注册、登录、注销的页面示例 |
131 | 131 |
|
132 | 132 | [Demo](http://211.149.193.19:8090/vue-tutorials/04.OAuth/vue-resource/demo.html)
|
133 | 133 |
|
134 |
| -##5.官方项目模板 |
| 134 | +## 5.官方项目模板 |
135 | 135 |
|
136 |
| -###Browserify项目模板 |
| 136 | +### Browserify项目模板 |
137 | 137 |
|
138 | 138 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——60分钟browserify项目模板快速入门](http://www.cnblogs.com/keepfool/p/5677032.html)
|
139 | 139 |
|
140 | 140 |
|
141 | 141 | - [vue-browserify-simple模板示例](https://keepfool.github.io/vue-tutorials/05.OfficialTemplates/my-browserify-simple-demo/)
|
142 | 142 |
|
143 |
| -###Webpack项目模板 |
| 143 | +### Webpack项目模板 |
144 | 144 |
|
145 | 145 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——60分钟webpack项目模板快速入门](http://www.cnblogs.com/keepfool/p/5678427.html)
|
146 | 146 |
|
147 | 147 |
|
148 | 148 | - [vue-webpack-simple模板示例](https://keepfool.github.io/vue-tutorials/05.OfficialTemplates/my-webpack-simple-demo/)
|
149 | 149 |
|
150 |
| -##6.Vue-Router |
| 150 | +## 6.Vue-Router |
151 | 151 |
|
152 | 152 | 以下示例,在博客中有具体讲解,博客链接:[Vue.js——vue-router 60分钟快速入门](http://www.cnblogs.com/keepfool/p/5690366.html)
|
153 | 153 |
|
|
158 | 158 | - [让链接处于选中状态示例](https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_05.html)
|
159 | 159 | - [钩子函数示例](https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_06.html)
|
160 | 160 |
|
161 |
| -###乞丐版源码(页面和组件代码混合在一起) |
| 161 | +### 乞丐版源码(页面和组件代码混合在一起) |
162 | 162 |
|
163 | 163 | [乞丐版源码](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/basic)
|
164 | 164 |
|
165 |
| -###精装版源码(基于vue-webpack-simple模板构建) |
| 165 | +### 精装版源码(基于vue-webpack-simple模板构建) |
166 | 166 |
|
167 | 167 | - [精装版源码-demo01](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/demo01)
|
168 | 168 | - [精装版源码-demo02](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/demo02)
|
169 | 169 | - [精装版源码-demo03](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/demo03)
|
170 | 170 | - [精装版源码-demo04](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/demo04)
|
171 |
| -- [精装版源码-demo05](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/demo05) |
| 171 | +- [精装版源码-demo05](https://github.com/keepfool/vue-tutorials/tree/master/06.Router/demo05) |
0 commit comments