A ppt for beginner to learn Vue.js

1. Vue.js
数据驱动 + 组件化的前端界面开发

2. • 安装指引
• Hello World
• 循环渲染
• 请求数据
• 条件渲染
• 事件处理
• 表单输入
• 过滤器

3. 安装使用

4. • 在 <script> 标签引入 CDN 上的 Vue.js
• 使用 npm 安装 Vue
• Vue-cli 初始化

5. Hello World

7. 表单输入

9. 计算属性

12. 循环渲染

14. 请求数据

16. 条件渲染

18. 事件处理

21. 事件修饰符

24. • .stop
• .prevent
• .capture
• .self
• .once
• .passive

25. 过滤器

27. 单文件组件

29. 小结

30. 核心思想：
• 数据驱动
• 组件化

31. 数据驱动
Data-Driven

33. jQuery 处理问题的思路
• 给按钮或者文本框绑定监听事件
• 如果事件触发则开始判断，各个 DOM 对象的当前状
态（通常会借助 css class 来表示状态）
• 改变对应的 DOM 来实现想要达到的效果（ tweet
box 下方显示还可以输入的字符数量，按钮是否可点
击）

36. Vue 代码处理问题的思路
• 创建一个状态变量用来追踪 textarea 中的字符的数
量
• 在 textarea 的 onChange 事件发生时改变其状态
• 自动重新渲染 tweet box ，显示还可以输入的字符的
数量

40. 1. 在 Vue 中，只有当事件发生的时候， data 才发生改变，之后，
Vue 自动更新 UI
2. data 成为了事件以及 UI 之间过渡：
• 每个事件不需要担心哪一部分的 DOM 发生变化，他们只需要设置
data 就可以了
• <template></template> 里的代码只需要关心当前的 data 是什么
3. jQuery 没有中间的过渡层 data ，我们需要花费很大的精力来解决它
们之间相互的联系 ( 对于复杂的组件，建议使用 Vue 而不是 jQuery)
4. Vue 中把各个 UI 组件独立出来，有利于提高 UI 组件的复用率同时降
低各个 UI 组件的耦合

41. 组件化
Component-Oriented

42. 每一个应用界面都可以
看作是组件构成的

43. 每一个组件都可以看做是一个
ViewModel

44. 所以可以把界面抽象为
组件树

45. Q&A