Vue基础培训课件

1.学习交流PPT，目录，1。历史2。MVVM模式3。数据驱动和组件编程4。Vue HelloWorld！5.生命周期6。从Vue到第7页的重要选项。Vue组件8。通用命令2。“我在谷歌的工作需要很多浏览器上的原型设计，所以我想尽快得到有形的东西。当时，一些项目使用角度。Angular提供了一些数据绑定和数据驱动的方法来处理DOM，因此您不必亲自接触DOM。它也有一些副作用，也就是说，以它指定的方式构建代码。对当时的场景来说太重了。我想我只能把我最喜欢的部分从Angular中去掉，建立一个非常轻的库，没有任何额外的逻辑。我也很好奇Angular的源代码是如何设计的。起初，我只想开始提取Angular中的小特征，比如声明性数据绑定。Vue可能是这样开始的。用了一段时间后，我觉得我的东西还是有前途的，因为我非常喜欢用它们。所以我花了更多的时间打包它，取了一个名为Vue.js的名字。2014年2月，我第一次把它作为一个真正的项目发布在Github上，并将链接发送到HackerNews，它被推到了首页，然后在那里停留了几个小时。后来，我写了一篇文章来分享Vue第一周的使用数据和我的感受。这是我第一次看到这么多人在Github上启动一个项目。我在一周内收获了数百颗星星，整个人都很兴奋。原始链接：3、学会交流PPT、MVVM模式、MVC模式意味着软件可以分为三个部分。各部分之间的通信如下。所有通信都是单向的。4、学会交流PPT，MVVM模式，MVP模式将控制器的名称改为演示者，同时改变了交流的方向。1.所有部分之间的交流是双向的。2.视图与模型没有联系，通过演示者交付。3.视图非常薄，不部署任何业务逻辑，称为“被动视图”，即没有主动性，而演示者非常厚，所有逻辑都部署在那里。5，学会交流PPT，MVVM模式，MVVM模式采用双向绑定(数据绑定):视图中的变化会自动反映在视图模型中，反之亦然。Vue、Angular和Ember都采用这种模式。与Angular相比，Vue.js提供了一个更简单、更容易理解的应用编程接口，这使我们能够快速地使用Vue.js. 6。学习交流PPT，数据驱动和组件编程，数据驱动：7。学会交流PPT，程序=数据结构算法。这对于每个程序来说都是一个熟悉的句子，但是它在前端并不纯粹，因为前端需要处理接口。html css没有被抽象成js中使用的一些数据结构，而是更多地作为接口的配置。jquery程序员将他的方式作为ui的一部分。当他们使用它时，再一次，并且在获得它之后修改它。整个程序被写成一个分散的节点操作。一个更实际的情况是，当用户界面控件被链接时，如果没有机制来管理这些用户界面之间的变化，那么依赖程序员来手动管理这些用户界面的状态将是令人讨厌的，并且容易出现错误。总结一下基于dom操作的前端开发方法：拼写接口-查找dom节点-修改属性-检测是否有其他节点有影响-根据刚被修改的dom节点更新它们的状态，然后上面的句子变成：前端程序=拼写接口操作ui算法vue或angular。这些mvvm框架给了前端另一个想法，完全基于数据驱动编程。如果您以前已经习惯了使用jQuery操作DOM，那么在学习Vue.js时，请将手动操作DOM的想法放在一边，因为Vue.js是数据驱动的，您不需要手动操作DOM。Vue使用数据绑定方法来自动绑定dom节点的属性。这将您从操作dom节点的繁琐过程中解放出来。只要您关注数据的状态，就不需要担心ui更新，无论是样式还是内容、可见性还是切换类。该框架帮助您将焦点从传统的dom操作转移到数据，回到编程的本质： program=数据结构算法。这也是mvvm框架中最大的突破。8、学会交流PPT，基于组件的编程，这种思想并不是来自vue，基于组件的开发应该是对网络的开发做出反应，组件开发是一种简单的开发思想，划分和规则，大规模的系统分为小模块和小组件，分发给不同的人。另外一个好处是这个组件可以顺便重用。9、学会交流PPT，理解组件可类比功能的思想。函数包含什么？1.形式参数2。局部变量3。函数名4。vue中的返回值对应于什么？10，学会交流PPT，Vue的地狱世界！学习与PPT、Vue HelloWorld沟通使用Vue的过程就是定义MVVM的每个组成部分的过程。1.定义视图2。定义模型3。创建一个Vue实例或“视图模型”，用于连接视图和模型。创建Vue实例时，您需要传入一个选项对象，它可以包括数据、挂载元素、方法、模块生命周期挂钩等等。在这个例子中，选项对象的el属性指向视图，并且el:#app指示Vue实例将被安装到元素.数据属性指向模型，数据：范例数据表示我们的模型是范例数据对象。Vue.js有多种数据绑定语法。最基本的形式是文本插值。使用一对大括号语法，message将在运行时被数据对象的message属性替换，因此该页将输出“HelloWorld！”。12，学习通信PPT，生命周期，13，学习通信PPT，生命周期，每个Vue实例在创建之前都要经过一系列初始化过程。例如，一个实例需要配置一个数据观察器，编译一个模板，将该实例挂载到DOM，然后在数据改变时更新DOM。在这个过程中，实例还调用一些生命周期钩子，这给了我们执行定制逻辑的机会。它可以分为总共八个阶段：1 .在实例初始化之后、数据观察器和事件/观察器事件配置之前调用beforeCreate:2.created:实例在创建后被调用。在这一步中，实例完成了以下配置：dataobserver、属性和方法的操作、监视/事件事件回调。但是，装载阶段尚未开始，并且$el属性当前不可见。3 .在挂载开始之前调用beforeMount:第一次调用相关的渲染函数。在服务器端呈现期间不调用此挂钩。4.mounted:el被新创建的虚拟机替换。$el，钩子在装载到实例上之后被调用。如果根实例在文档中装载了一个元素。调用mounted时，$el也在文档中。在服务器端呈现期间不调用此挂钩。PPT，5.beforeUpdate:数据更新调用，发生在虚拟DOM重新呈现和修补之前。您可以在此钩子中进一步更改状态，这不会触发额外的重新呈现过程。在服务器端呈现期间不调用此挂钩。6.updated:由于数据变化，虚拟DOM被重新渲染和修补，之后将调用钩子。当这个钩子被调用时，组件DOM被更新，所以你现在可以执行依赖于DOM的操作了。然而，在大多数情况下，你应该避免在此期间改变你的状态。如果要进行相应的状态更改，通常最好使用计算属性或观察器。在服务器端呈现期间不调用此挂钩。7.调用7.beforeDestroy:实例。在这一步，实例仍然完全可用。在服务器端呈现期间不调用此挂钩。8.在摧毁8 .驱逐舰：Vue实例后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。在服务器端呈现期间不调用此