#视频主旨： vue.js 1 官网讲解 注：vue.js 2 如果公布且官网有2.0版，此站会暂停更新(因为 vue.js 1,将被作废)，所以会另建 vue.js 2 官网讲解(反正我也会任性，要作废的东西，不会讲解教学)。

[youtube vue.js 教学视频区] (https://www.youtube.com/playlist?list=PLxrdGdTjEw4S51aOvZGOJ-JCeCky2I2H-)

[百度云 vue.js 教学视频区] (http://pan.baidu.com/share/home?uk=3515901940#category/type=0)

#视频的目的

网路上有很多 VUE 综合应用的视频，但大部份的视频 ，都当你已经了解官网 所以讲的节奏难免偏快。 此视频，以官网为重，将官网的观念，以视频搭配代码，实际演示。 如果官网有看不懂的地方，比对一下，视频跟代码，就会了解了。 减少你摸索的时间。

目录

关于台湾小凡

豪哥的qq群

1.什么是-vuejs

2.讲解起步

3.概述

4.vue-实例

5.数据绑定语法

6.计算属性

7.class-与-style-绑定

8.条件渲染

9.列表渲染

10.方法与事件处理

11.表单控件与绑定

12.过渡

13.[组件第一篇] (https://github.com/bhnddowinf/vuejs-learn#13-组件第一篇)

13.[组件第二篇] (https://github.com/bhnddowinf/vuejs-learn#13-组件第二篇)

13.[组件第三篇] (https://github.com/bhnddowinf/vuejs-learn#13-组件第三篇)

13.[组件第四篇] (https://github.com/bhnddowinf/vuejs-learn#13-组件第四篇)

13.[组件第五篇] (https://github.com/bhnddowinf/vuejs-learn#13-组件第五篇)

#台湾小凡

目前在台湾的中小企业

担任资讯研发部副理

专长：

1.云端伺服器建置
2.网站开发
3.企业资源规划系统

手机：0922-731455

信箱：[email protected]

#豪哥的QQ群 小弟在中国有一个爱好前端的朋友，网名：豪情，不断贡献自已的知识分享最先进的前端资讯，带领着很多人学习前端。

小弟有幸能结交豪哥，以下是中国最专业的前端群

• Vuejs 364912432
• Angularjs 238251402
• React 530415177
• Nodejs 422910907
• PHP高级开发 132984819
• JAVA高级开发 145381037
• 移动微信前端开发 148257606
• 前端开发跳板群 492107297

仅供参考

vue.js 版本

随著官网更新, 因为尤雨溪大神，不断努力改良 vue.js , 所以 小凡讲解的章节，太旧时，会重新再讲解一次(不过备课作视频真的很花时间，不会马上跟进)

优酷视频专区(所有视频都会放在这，相关代码请见此 github)

http://i.youku.com/u/UMzQxOTE4MDE5Mg==

注：优酷视频专区，上传不易，自计算属性(006)以后章节之视频，以百度云为主(上传较快)。

##01.什么是 vuejs

简介：介绍 vue.js 是什么。

https://www.youtube.com/watch?v=IunxMtYWVLM&feature=youtu.be

https://pan.baidu.com/s/1hsay65A

##02.讲解起步

简介：怎么样开始使用 vue.js

https://www.youtube.com/watch?v=avMPdV0avok&feature=youtu.be

https://pan.baidu.com/s/1gfFHZVH

此章范例如下

1. [vue.js 简单结构] (http://codepen.io/bhnddowinf/pen/EKNEPd)

2. [使用文字框] (http://codepen.io/bhnddowinf/pen/QNGmKM)

3. [双向绑定] (http://codepen.io/bhnddowinf/pen/GZNxro)

4. [反转字串，按钮操作数据] (http://codepen.io/bhnddowinf/pen/KzNoay)

5. [综合] (http://codepen.io/bhnddowinf/pen/EKNEwr)

##03.概述

简介：讲解 vue.js 两个功能，响应式的数据绑定，组合的视图组件

https://youtu.be/c1PKzLMPpfQ

http://pan.baidu.com/s/1c1VNwFu

此章范例如下：

1. [响应式数据绑定] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/001%20Reactive%20data%20binding%20demo.html)

2. [响应式数据绑] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/002%20Reactive%20data%20binding%20second%20demo.html)

3. [定义模板，注册组件] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/003-%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%EF%BC%8C%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6.html)

4. [两栏式] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/004%20%E4%B8%A4%E6%A0%8F%E5%BC%8F.html)

5. [两栏式与 vue] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/005%20%E4%B8%A4%E6%A0%8F%E5%BC%8F%E4%B8%8E%20vue.html)

04.Vue 实例

简介：从构造器，建立 vue.js 的实例，而这个实例，有所谓的状态回调（实例生命周期），可以依业务撰写代码。

https://youtu.be/QbEJ5pfgxw0

https://pan.baidu.com/s/1c5IOBO

此章范例如下：

1.构造器 Constructor

2.组件 Component

3.属性与方法 Properties and Methods

4.属性与方法 Properties and Methods 2

5.实例生命周期 Instance Lifecycle

6.生命周期 图示 Life Cycle

05.数据绑定语法

简介：vue.js 从 model 层，调出资料至 view 层显示以及交互。

https://www.youtube.com/watch?v=K-T_i7X4lrY&feature=youtu.be

http://v.youku.com/v_show/id_XMTUxMzU3NzcwOA==.html

https://pan.baidu.com/s/1bpFkmIz

此章范例如下：

1.view-interpolations-text

2.Raw Html

3.partial

4.partial 1

5.partial 2

6.Attributes

7.Java Script Expressions

8.Java Script Expressons error

9.filters

10.filter 传参

11.filter 串联

12.filter 自定义

13.指令

14.指令 参数

15.指令 事件

16.指令 修饰符

06.计算属性

简介：将 model 层的资料，依 js 表达式，呈现业务逻辑。

https://youtu.be/T5faXmjGEgc

https://pan.baidu.com/s/1kVNbzZh

此章范例如下：

1. [计算属性基本] (https://github.com/bhnddowinf/vuejs-learn/blob/master/06/001%20Computed%20Properties%20Basic.html)

2. 观察 watch demo

3. 计算属性 computed demo

4. 计算属性 2 ，computed getter , setter demo

5. 计算属性 综合示例，computed sum

07.Class 与 Style 绑定

简介：vue.js 对于 css ，如何轻便使用 class, style 。

https://youtu.be/uXOdJZfY-WU

https://pan.baidu.com/s/1bDAgZ8

1.绑定html class, BindingHtmlClasses

2.对象语法，Object Styntax

3.对象语法1，object

4.对象语法2，object2

5.阵列语法，array

6.三元表达式，list conditionally

7.数组与对象语法，multiple conditional classes

8.绑定内联样式，binding inline styles

9.[绑定物件，binding object] (https://github.com/bhnddowinf/vuejs-learn/blob/master/07/008%20BindingObject.html)

10.绑定物件1，binding object1

11.数组语法，multiple style objects

12.自动添加前缀，transform

08.条件渲染

简介：v-if, v-show 观念或使用。

https://youtu.be/5nG0k1VN7ro

https://pan.baidu.com/s/1kVNbzZT

1.v-if

2.template

3.v-show

4.v-else

5.v-if many

09.列表渲染

简介：遍历 model

https://youtu.be/mKWnus9_EpU

https://pan.baidu.com/s/1skBdGdv

1.v-for

2.v-for1

3.[v-for temlpalte] (https://github.com/bhnddowinf/vuejs-learn/blob/master/09/03%20v-for%20template.html)

4.[Mutation Methods] (https://github.com/bhnddowinf/vuejs-learn/blob/master/09/04%20Mutation%20Methods.html)

5.[05 Replacing an Array.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/09/05%20Replacing%20an%20Array.html)

6.06 trackby.html

7.[07 trackbyindex.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/09/07%20trackbyindex.html)

8.[08 cavest.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/09/08%20cavest.html)

9.09 object v-for.html

10.10 object v-for2.html

11.[11 range v-for.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/09/11%20range%20v-for.html)

12.12 computed v-for.html

13.13 filterby.html

10 方法与事件处理

简介：事件执行方法

https://youtu.be/gdgbtTpNMYU

https://pan.baidu.com/s/1bFBZoM

1.01 methoder handler.html

2.02 InlineStatementHandler.html

3.03 $event.html

4.04 keyup.html

11 表单控件与绑定

简介：表单元素与双向绑定 model

https://youtu.be/2R0DC3vbWqk

https://pan.baidu.com/s/1qYd5Y5e

1.[textbox] (https://github.com/bhnddowinf/vuejs-learn/blob/master/11/01%20text.html)

2.checked

3.checked array

4.[radio] (https://github.com/bhnddowinf/vuejs-learn/blob/master/11/04%20radio.html)

5.select

6.select 1

7.select 2

8.value bindings

9.checkbox

10.radio

11.select options

12.lazy

13.number

14.debounce

15.onKeyup | bebounce 500

12 过渡

简介：css 动画与 vuejs

https://youtu.be/LXGGcnW6Oas

https://pan.baidu.com/s/1nvpNxED

css3 animations

css3 transitions

1.css transitions

2.dynamic binding transitions

3.java script hooks

4.custom transition classes animation

5.custom transition classes

6.2animation

7.animations

8.jsTransitions

9.Staggering Transitions

13 组件(第一篇)

https://youtu.be/-sFCcszkXBU

https://pan.baidu.com/s/1slHz9yX

1.is.html

2.extend.html

3.component.html

4.[replace.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/03%20replace.html)

5.child.html

6.[Registration Sugar.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/05%20Registration%20Sugar.html)

7.06 shared across all instances.html

8.07 shared across all instances 1.html

9.08 shared across all instances 2.html

10.09 Component Option Caveats el.html

11.10 is1.html

12.[11 use x-template.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/11%20use%20x-template.html)

13.[12 use template.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/12%20use%20template.html)

14.13 use table template.html

15.[14 use table tbody.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/14%20use%20table%20tbody.html)

13 组件(第二篇)

百度云，直接下载 http://pan.baidu.com/s/1bp0rrOz

1.2-1 passing data with props.html 

https://youtu.be/E2xDkWtCljw

2.2-2 kebab-case.html

https://youtu.be/GFFdXcfPc_g

3.2-3 Dynamic Props.html

https://youtu.be/97ssmFiu3SM

4.2-4 Literal vs Dynamic.html

https://youtu.be/EmOny-Z3JP4

5.2-5 Prop Binding Types.html

https://youtu.be/kVhxAukW_g8

6.2-6 Prop Validation.html

https://youtu.be/-Q1dklWL9jY

13 组件(第三篇)

http://pan.baidu.com/s/1jHOjCSQ

1.3-1 Parent Chain

https://youtu.be/X8i2Foz5NHQ

2.[3-2 Custom Events.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/3-2%20Custom%20Events.html)

https://youtu.be/Jq3djs2cE7Q

3.3-3 v-on for Custom Events

https://youtu.be/DeQZ_iVwd7I

4.3-4 Child Component Refs.html

https://youtu.be/hULS35nLdcw

13 组件(第四篇)

http://pan.baidu.com/s/1c2hsN6K

1.4-1 Compilation Scope.html

https://youtu.be/ZdrMnamJqVM

2.4-2 Compilation Scope 2.html

https://youtu.be/kz5R2dPcm8Y

3.4-3 Compilation Scope 3.html

https://youtu.be/kz5R2dPcm8Y

4.4-4 Single Slot.html

https://youtu.be/6YLi6jUfy5M

5.[4-5 Named Slots.html] (https://github.com/bhnddowinf/vuejs-learn/blob/master/13/4-5%20Named%20Slots.html)

https://youtu.be/zHzP7EcGxAM

13 组件(第五篇)

http://pan.baidu.com/s/1b4id9k

vue js 013 组件 5 1 Dynamic Components https://youtu.be/cPAEY86Lj_o

vue js 013 组件 5 2 Dynamic Components Keep alive https://youtu.be/6YTQCGpanWE

vue js 013 组件 5 3 activate Hook https://youtu.be/EHBeo0-vcg4

vue js 013 组件 5 4 transition mode https://youtu.be/5jmiwP1j-wk

vue js 013 组件 5 5 Components and v for https://youtu.be/azgjurpY-kU

vue js 013 组件 5 6 Authoring Reusable Components https://youtu.be/R_IF5bbH8UU

vue js 013 组件 5 7 Async Components https://youtu.be/R4TMPyTq0ZU

vue js 013 组件 5 8 Recursive Component1 https://youtu.be/Yby_DqAAPOo

vue js 013 组件 5 9 end https://youtu.be/bt-xuiOyFJU

1.5-1 Dynamic Components.html

2.5-2 Dynamic Components Keep alive.html

3.5-3 activate Hook.html

4.5-4 transition-mode .html

5.5-5 Components and v-for.html

6.5-6 Authoring Reusable Components .html

7.5-7 Async Components.html

8.5-8 Recursive Component1.html

License

MIT

Donate

小弟想把 vue.js 教学的视频，做的更好 但现实上，这需要很多的时间以及家人的支持

→→→→[请大力的鼓励作者] (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=77E3EEHBD3N5C)