Vue基础培训培训资料.pptVIP

演示课件 Vue基础培训培训资料全文共21页，当前为第1页。 目录 1.历史由来 2.MVVM模式 3.数据驱动和组件式编程 4.Vue之Hello World！ 5.生命周期 6.从Vue到页面 7.Vue组件的重要选项 8.Vue常用指令 演示课件 Vue基础培训培训资料全文共21页，当前为第2页。 历史由来 尤雨溪谈Vue.js：“我在 Google 的工作需要在浏览器上进展大量原型设计，于是我想要尽快获得有形的东西。当时有些工程使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。 我想，我可以只把我喜欢的局部从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开场只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开场的。 用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js。 2021 年 2 月，我第一次将它作为实际的工程发布在 Github 上，并把链接发送到了 Hacker News 上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了 Vue 第一周的使用数据以及我的感受。 那是我第一次看见这么多人在 Github 上为一个工程打星星。我当时一个星期收获了好几百个星星，整个人都冲动坏了。 原文链接： s://mp.weixin.qq /s?__biz=MzA4NjE3MDg4OQ%3D%3Dmid=2650964658idx=1sn=20bffec66f8b45002addb417a51ea92dchksm=843aeed4b34d67c216f167bef8a1fdf85cc9bc5059007666869909d31ab86a8bd9d005614e4empshare=1scene=1srcid=06137IzUoM84mpRfbUu7tDb0 演示课件 Vue基础培训培训资料全文共21页，当前为第3页。 MVVM模式 MVC模式的意思是，软件可以分成三个局部。各局部之间的通信方式如下。 所有通信都是单向的。 演示课件 Vue基础培训培训资料全文共21页，当前为第4页。 MVVM模式 MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。 1. 各局部之间的通信，都是双向的。 2. View 与 Model 不发生联系，都通过 Presenter 传递。 3. View 非常薄，不部署任何业务逻辑，称为被动视图〔Passive View〕，即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。 演示课件 Vue基础培训培训资料全文共21页，当前为第5页。 MVVM模式 MVVM模式采用双向绑定〔data-binding〕：View的变动，自动反映在 ViewModel，反之亦然。Vue、Angular 和 Ember 都采用这种模式，相比于Angular，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 演示课件 Vue基础培训培训资料全文共21页，当前为第6页。 数据驱动和组件式编程 数据驱动： 演示课件 Vue基础培训培训资料全文共21页，当前为第7页。 程序=数据构造+算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹,因为前端需要跟界面打交道,html+css并没用被抽象成某种在js中使用的数据构造,充当的更多是界面的一种配置,jquery程序员对待他的方式就一块块的ui,用到的时候再$一下,获取之后修改.整个程序写下来是零零散散的节点操作。一个比较实际的情况就是,在ui控件有联动的时候,如果没有一种机制来管理这些ui之间的修改,那么依赖程序员自己去手动管理这些ui的状态,会让人烦不胜烦,且容易出现bug。 总结一下基于操作dom的前端开发方式： 拼界面-找到dom节点-修改属性-检测是否有其他影响的节点-根据刚刚修改的dom节点更新自己的状态 那么上面的那句话