Vue基础培训-优质课件.pptVIP

目录; 历史由来 尤雨溪谈Vue.js：“我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。 我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开??只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。 用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js。 2014 年 2 月，我第一次将它作为实际的项目发布在 Github 上，并把链接发送到了 Hacker News 上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了 Vue 第一周的使用数据以及我的感受。 那是我第一次看见这么多人在 Github 上为一个项目打星星。我当时一个星期收获了好几百个星星，整个人都激动坏了。 原文链接：;MVVM模式;MVVM模式;MVVM模式;数据驱动和组件式编程;1、我们的市场行为主要的导向因素，第一个是市场需求的导向，第二个是技术进步的导向，第三大导向是竞争对手的行为导向。 2、市场销售中最重要的字就是“问”。 3、现今，每个人都在谈论着创意，坦白讲，我害怕我们会假创意之名犯下一切过失。 4、在购买时，你可以用任何语言；但在销售时，你必须使用购买者的语言。 5、市场营销观念：目标市场，顾客需求，协调市场营销，通过满足消费者需求来创造利润。**** 6、我就像一个厨师，喜欢品尝食物。如果不好吃，我就不要它。***** 7、我总是站在顾客的角度看待即将推出的产品或服务，因为我就是顾客。*** 8、利人为利已的根基，市场营销上老是为自己着想，而不顾及到他人，他人也不会顾及你。**** ; 程序=数据结构+算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹,因为前端需要跟界面打交道,html+css并没用被抽象成某种在js中使用的数据结构,充当的更多是界面的一种配置,jquery程序员看待他的方式就一块块的ui,用到的时候再$一下,获取之后修改.整个程序写下来是零零散散的节点操作。一个比较实际的情况就是,在ui控件有联动的时候,如果没有一种机制来管理这些ui之间的修改,那么依赖程序员自己去手动管理这些ui的状态,会让人烦不胜烦,且容易出现bug。 总结一下基于操作dom的前端开发方式： 拼界面-找到dom节点-修改属性-检测是否有其他影响的节点-根据刚刚修改的dom节点更新自己的状态 那么上面的那句话就变成了 ：前端程序 = 拼界面+操作ui+算法 vue或者angular这些mvvm框架给了前端另一种思路,完全基于数据驱动的编程。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。Vue采用一种数据绑定的方式,自动绑定dom节点的属性.这样就把你从操作dom节点的繁琐过程中解脱出来了,你只要专注于数据的状态,ui更新的事情你不需要去管了,不管是样式还是内容,可见性还是切换class,框架帮你把关注点从传统的dom操作转移到了数据,回归编程的本质:程序=数据结构+算法. 这也是mvvm框架最大的思路上的突破。;组件式编程;理解组件的思想可以类比函数。一个函数包含哪些东西呢？ 1.形参 2.局部变量 3.函数名 4.返回值 那对应到vue中又是什么呢? ;Vue之Hello World！;Vue之Hello World！;生命周期;生命周期; 5.beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。 6.updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好