Vue基础培训课件

1、1、学习交流PPT、目录、1 .历史由来2.MVVM模式3 .数据驱动和组件式编程4.Vue的Hello World！ 5 .从生命周期6.vue到页面7.Vue组件的重要选项8.Vue常用指令，2 .学习交流PPT，历史是尤雨溪谈Vue.js :“我在Google的工作中需要在浏览器中进行大量的原型设定修订，所以当时，有些项目使用了Angular。 Angular提供了多种方法来处理数据绑定和数据驱动的DOM，因此您不需要亲自触摸DOM。 此外，还有按照该规定构建代码的副作用。 对当时的场景来说很重。 我想，可以把我喜欢的部分从Angular中提取出来，制作出非常轻量的库。 你不需要那些追加

2、的逻辑。 我很感兴趣Angular的源代码是如何修改的。 开始时，我只是想着手提取Angular的小功能，如声明的数据绑定。 Vue大概是这样开始的。 过了一会儿，我觉得我做的东西还是有前途的。 因为我自己很喜欢用。 所以我花了更多的时间来封装它，取名为Vue.js。 2014年2月，我第一次将其作为实际项目发表在Github上，并向Hacker News发送了链接。 那个刊登在主页上，之后在主页上待了几个小时。 然后写了一篇文章，分享Vue第一周的使用数据和我的心情。 那是我第一次看到这么多人在Github为项目打星星。 我一周收获数百颗星星，全员兴奋地坏掉了。 原文链接：3，学习交流PPT

3、，MVVM模式，MVC模式，意味着软件分为三个部分。 各部分之间的通信方式如下所示。 所有的通讯都是单向的。 学习交流PPT、MVVM模式，MVP模式将控制器改名为Presenter，同时改变了通信方向。 1 .各部分之间的通信是双向的。 2. View与Model不联系，通过Presenter传达。 3. View非常薄，不引入业务逻辑，称为被动视图，没有主动性，Presenter非常厚，所有逻辑都放在那里。 5、学习交流PPT、MVVM模式、MVVM模式为双向绑定：视图的变动自动反映到视图模型，反之亦然。 Vue、Angular和Ember采用了此模型，Vue.js提供了比Angular更

4、简单、更易于理解的API，以便快速获得和使用Vue.js。 6、学习交流PPT、数据驱动和组件式编程、数据驱动：7、学习交流PPT、程序=数据结构算法，这是所有程序都熟悉的语言，前端不纯。 由于前端需要与接口交互，因此html css未抽象化为任何html css的一个相对现实的情形是依赖编程员本身，除非存在当联合ui控件的时候管理这些ui之间的修改的机制总结基于操作dom的前端开发方法：拼写接口-查找dom节点-修改属性-检测是否有其他影响如果习惯使用jQuery操作dom，在学习Vue.js时，请考虑手动操作dom Vue.js是由数据驱动的，因此不需要手动操作DOM。Vue采用一种数据绑

5、定方式，自动绑定dom节点的属性。 这样，您就可以从操作dom节点的繁琐过程中解放出来，仅集中在数据的状态上，而无需管理ui更新，并且样式、内容、可视性、class也一起将该关注点从传统的dom操作转移到数据，以进行编程学习组件式编程的理念不应来自于vue，发挥web组件式开发的应该是react，组件开发是朴素的开发思想，分开治疗，大型系统成为一个小模块小组件额外的优点是可以顺便重用这个组件。 9、学习交流PPT，理解组件思想类似于函数。 函数中包含了什么呢？ 1 .波形残奥表2 .局部变量3 .函数名称4 .与上限值vue对应的是什么？ 10、交流PPT，学习英雄世界！ 学习11、交流PPT

6、、欢乐世界！ 使用Vue的进程是为MVVM的每个组件定义进程的进程。 1 .定义视图2 .定义模型3 .创建Vue实例或视图模型。 要连接view和Model，必须在创建Vue实例时传递可选对象，包括数据、装载元素、方法、模型生命周期挂接等。 在此示例中，可选对象的el属性指向View，el: #app指向Model，指示Vue实例将挂载到.此元素中，而data: exampleData指向Model Vue.js有几种数据绑定语法，其中最基本的格式是文本插值，并且在页面上使用大括号语法对，以便在运行时用数据对象的message属性替换message，因此Hello World！ 的双曲馀弦值

7、。12、学习通信PPT、生命周期、13、学习通信PPT、生命周期，每个Vue实例在创建之前必须经过一系列初始化过程。 例如，实例必须设置数据观察器、编译模板、将实例装载到DOM，并在数据更改时更新DOM。 在此过程中，实例也调用一些生命周期挂接，以提供执行自定义逻辑的机会。 1.beforeCreate:分为八个阶段：实例初始化后、数据观察器和event/watcher事件部署前调用。 2 .创建2.created:实例后调用。 在此步骤中，实例完成了数据观察器、属性和方法运算以及watch/event事件回调的配置。 但是，装载阶段尚未开始，$el属性当前尚未显示。 3 .在开始装载之前调用

8、3.beforeMount: 首先调用相关的render函数。 在服务器端渲染期间不调用此挂接。 4.mounted: el将被新创建的vm.$el替换，并在装载到实例后调用挂接。 如果root实例挂载了文档中的元素，则在调用mounted时，vm.$el也在文档中。 在服务器端渲染期间不调用此挂接。14、学习通信PPT，更新5.beforeUpdate:数据时调用，在重新渲染虚拟DOM并应用修补程序之前发生。 您可以使用此挂接进一步更改状态。 这不会触发附加的重新渲染过程。 在服务器端渲染期间不调用此挂接。 6 .随后调用通过更改6.updated:数据重新渲染和修补虚拟DOM。 调用此挂接时，将更新组件DOM，因此现在可以执行依赖于DOM的操作。 但是，在大多数情况下，请确保状态在此期间不会更改。 更改状态时，通常建议改为使用修正属性或watcher。 在服务器端渲染期间不调用此挂接。 7 .在销毁7.beforeDestroy:实例之前调用。 在此步骤中，实例完全可用。 在服务器端渲染期间不调用此挂接。 8.destroyed:Vue实例被销毁后调