Vue基础培训.ppt

整理课件
目录



World！




整理课件
历史由来
：“我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。
我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。
用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 。
2014 年 2 月，我第一次将它作为实际的项目发布在 Github 上，并把链接发送到了 Hacker News 上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了 Vue 第一周的使用数据以及我的感受。
那是我第一次看见这么多人在 Github 上为一个项目打星星。我当时一个星期收获了好几百个星星，整个人都激动坏了。
原文链接：?__biz=MzA4NjE3MDg4OQ%3D%3D&mid=2650964658&idx=1&sn=20bffec66f8b45002addb417a51ea92d&chksm=843aeed4b34d67c216f167bef8a1fdf85cc9bc5059007666869909d31ab86a8bd9d005614e4e&mpshare=1&scene=1&srcid=06137IzUoM84mpRfbUu7tDb0
整理课件
MVVM模式
MVC模式的意思是，软件可以分成三个部分。各部分之间的通信方式如下。

所有通信都是单向的。
整理课件
MVVM模式
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
1. 各部分之间的通信，都是双向的。
2. View 与 Model 不发生联系，都通过 Presenter 传递。
3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
整理课件
MVVM模式
MVVM模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Vue、Angular 和 Ember 都采用这种模式，相比于Angular，、更易于理解的API，。
整理课件
数据驱动和组件式编程
数据驱动：
整理课件
程序=数据结构+算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹,因为前端需要跟界面打交道,html+css并没用被抽象成某种在js中使用的数据结构,充当的更多是界面的一种配置,jquery程序员看待他的方式就一块块的ui,用到的时候再$一下,。一个比较实际的情况就是,在ui控件有联动的时候,如果没有一种机制来管理这些ui之间的修改,那么依赖程序员自己去手动管理这些ui的状态,会让人烦不胜烦,且容易出现bug。
总结一下基于操作dom的前端开发方式：
拼界面->找到dom节点->修改属性->检测是否有其他影响的节点->根据刚刚修改的dom节点更新自己的状态
那么上面的那句话就变成了 ：前端程序 = 拼界面+操作ui+算法
vue或者angular这些mvvm框架给了前端另一种思路,完全基于数据驱动的编程。如果你之前已经****惯了用jQuery操作DOM，，，你无需手动操作DOM。Vue采用一种数据绑定的方式,