/vuejs-learn

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

Primary LanguageJavaScript

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

#视频的目的

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

#**小凡

目前在**的中小企业

担任资讯研发部副理

专长:

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

手机:0922-731455

信箱:bhnddowinf@yahoo.com.tw

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

小弟有幸能结交豪哥,以下是**最专业的前端群

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

仅供参考

vue.js 版本

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

Donate

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

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

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

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

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

##01.什么是 vuejs

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

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

链接: http://pan.baidu.com/s/1jI6fvJw 密码: 32g1

##02.讲解起步

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

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

链接: http://pan.baidu.com/s/1jHOgbNC 密码: yi8t

此章范例如下

  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/1kV1Z8Uj 密码: acjv

此章范例如下:

  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

链接: http://pan.baidu.com/s/1gfpW2Qn 密码: je3e

此章范例如下:

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

链接: http://pan.baidu.com/s/1c2qI6e0 密码: wvg6

此章范例如下:

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

链接: http://pan.baidu.com/s/1gfjQQyB 密码: 7ect

此章范例如下:

  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

链接: http://pan.baidu.com/s/1nvBzHDf 密码: hyj5

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

链接: http://pan.baidu.com/s/1jHV8vOU 密码: e47p

1.v-if

2.template

3.v-show

4.v-else

5.v-if many

09.列表渲染

简介:遍历 model

https://youtu.be/mKWnus9_EpU

链接: http://pan.baidu.com/s/1c0r2ZO 密码: u49d

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

链接: http://pan.baidu.com/s/1boPHWn1 密码: vx56

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/1pKDPjej 密码: 9gy4

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/1jIEV7fC 密码: 2axj

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

License

MIT