Vue基础培训.ppt

-1/23-2/23-目录目录1.历史由来历史由来2.MVVM模式模式3.数据驱动和组件式编程数据驱动和组件式编程4.Vue之之Hello World！5.生命周期生命周期6.从从Vue到页面到页面7.Vue组件的重要选项组件的重要选项8.Vue常用指令常用指令-3/23-历史由来历史由来 尤雨溪谈尤雨溪谈Vue.js：“我在我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。我想，我可以只把我喜欢的部分从我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。里面很小的功能，如声明式数据绑定。Vue 大大概就是这么开始的。概就是这么开始的。用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做取了一个名字叫做 Vue.js。2014 年年 2 月，我第一次将它作为实际的项目发布在月，我第一次将它作为实际的项目发布在 Github 上，并把链接发送到了上，并把链接发送到了 Hacker News 上，它就被顶到了上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了 Vue 第一周的使用数据以及我的感受。第一周的使用数据以及我的感受。那是我第一次看见这么多人在那是我第一次看见这么多人在 Github 上为一个项目打星星。我当时一个星期收获了好几百个星星，整个人都激动上为一个项目打星星。我当时一个星期收获了好几百个星星，整个人都激动坏了。坏了。原文链接：原文链接：https:/ 模式将模式将 Controller 改名为改名为 Presenter，同时改变了通信方向。，同时改变了通信方向。1.各部分之间的通信，都是双向的。各部分之间的通信，都是双向的。2.View 与与 Model 不发生联系，都通过不发生联系，都通过 Presenter 传递。传递。3.View 非常薄，不部署任何业务逻辑，称为非常薄，不部署任何业务逻辑，称为被动视图被动视图（Passive View），即没有任何主动性，而），即没有任何主动性，而 Presenter非常厚，非常厚，所有逻辑都部署在那里。所有逻辑都部署在那里。-6/23-MVVM模式模式 MVVM模式采用双向绑定（模式采用双向绑定（data-binding）：）：View的变动，自动反映在的变动，自动反映在 ViewModel，反之亦然。，反之亦然。Vue、Angular 和和 Ember 都采用这种模式，相比于都采用这种模式，相比于Angular，Vue.js提供了更加简洁、更易于理解的提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使，使得我们能够快速地上手并使用用Vue.js。-7/23-数据驱动和组件式编程数据驱动和组件式编程数据驱动：数据驱动：-8/23-程序程序=数据结构数据结构+算法，这是每个程序都耳熟能详的一句话算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹可在前端这里并不纯粹,因为前端需要跟界面打交道因为前端需要跟界面打交道,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框架最大的思路上的突破。框架最大的思路上的突破。-9/23-组件式编程组件式编程 这个理念不是来源于这个理念不是来源于vue,把把web组件式开发发扬光大的应该是组件式开发发扬光大的应该是react了了,组件开发是一种朴素的开发思想组件开发是一种朴素的开发思想,分而治之分而治之,大大型系统拆分成一个个的小模块小组件型系统拆分成一个个的小模块小组件,分配给不同的人。额外的好处是顺便能复用这个组件。分配给不同的人。额外的好处是顺便能复用这个组件。-10/23-理解组件的思想可以类比函数。一个函数包含哪些东西呢？理解组件的思想可以类比函数。一个函数包含哪些东西呢？1.形参形参2.局部变量局部变量3.函数名函数名4.返回值返回值那对应到那对应到vue中又是什么呢中又是什么呢?-11/23-Vue之之Hello World！-12/23-Vue之之Hello World！使用使用VueVue的过程就是定义的过程就是定义MVVMMVVM各个组成部分的过程的过程。各个组成部分的过程的过程。1.1.定义定义ViewView2.2.定义定义ModelModel3.3.创建一个创建一个VueVue实例或实例或ViewModelViewModel，它用于连接，它用于连接ViewView和和ModelModel 在创建在创建VueVue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。在这个示例中，选项对象的在这个示例中，选项对象的elel属性指向属性指向ViewView，el:#appel:#app表示该表示该VueVue实例将挂载到实例将挂载到.这个元这个元素；素；datadata属性指向属性指向ModelModel，data:exampleDatadata:exampleData表示我们的表示我们的ModelModel是是exampleDataexampleData对象。对象。Vue.jsVue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时 message message 会被会被数据对象的数据对象的messagemessage属性替换，所以页面上会输出属性替换，所以页面上会输出Hello World!Hello World!。-13/23-生命周期生命周期-14/23-生命周期生命周期 每个每个 Vue Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)(data observer)、编译、编译模版、挂载实例到模版、挂载实例到 DOM DOM，然后在数据变化时更新，然后在数据变化时更新 DOM DOM。在这个过程中，实例也会调用一些。在这个过程中，实例也会调用一些 生命周期钩子生命周期钩子 ，这就给我，这就给我们提供了执行自定义逻辑的机会。们提供了执行自定义逻辑的机会。它可以总共分为它可以总共分为8 8个阶段：个阶段：1.beforeCreate:1.beforeCreate:在实例初始化之后，数据观测在实例初始化之后，数据观测(data observer)和和 event/watcher 事件配置之前被调用。事件配置之前被调用。2.created:2.created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)(data observer)，属性和方，属性和方法的运算，法的运算，watch/event watch/event 事件回调。然而，挂载阶段还没开始，事件回调。然而，挂载阶段还没开始，$el$el 属性目前不可见。属性目前不可见。3.beforeMount:3.beforeMount:在挂载开始之前被调用：相关的在挂载开始之前被调用：相关的 render render 函数首次被调用。该钩子在服务器端渲染期间不被调用。函数首次被调用。该钩子在服务器端渲染期间不被调用。4.mounted:4.mounted:el 被新创建的被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，实例挂载了一个文档内元素，当当 mounted 被调用时被调用时 vm.$el 也在文档内。该钩子在服务器端渲染期间不被调用。也在文档内。该钩子在服务器端渲染期间不被调用。-15/23-5.beforeUpdate:5.beforeUpdate:数据更新时调用，发生在虚拟数据更新时调用，发生在虚拟 DOM DOM 重新渲染和打补丁之前。重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。该钩子在服务器端渲染期间不被调用。6.updated:6.updated:由于数据更改导致的虚拟由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件件 DOM 已经更新，所以你现在可以执行依赖于已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用如果要相应状态改变，通常最好使用计算属性计算属性或或 watcher 取而代之。该钩子在服务器端渲染期间不被调用。取而代之。该钩子在服务器端渲染期间不被调用。7.beforeDestroy:7.beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。8.destroyed:8.destroyed:Vue 实例销毁后调用。调用后，实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。-16/23-从从Vue到页面到页面-17/23-从从Vue到页面到页面-18/23-Vue组件的重要选项组件的重要选项data:-19/23-Vue组件的重要选项组件的重要选项props:methods:watch:computed:-20/23-Vue常用指令常用指令-21/23-结束结束