Vue基础培训（课堂PPT）

1、12目录1.VUE简介2.MVVM模式3.数据驱动和组件式编程4.Vue之Hello World！5.生命周期6.从Vue到页面7.Vue组件的重要选项8.Vue常用指令3 VUE 尤雨溪谈Vue.js：“我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。 我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些

2、额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。 用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js。 2014 年 2 月，我第一次将它作为实际的项目发布在 Github 上，并把链接发送到了 Hacker News 上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了 Vue 第一周的使用数据以及我的感受。 那是我第一次看见这么多人在 Github 上为一个项目打星星。

3、我当时一个星期收获了好几百个星星，整个人都激动坏了。 原文链接原文链接：https:/ 所有通信都是单向的。5MVVM模式 MVVM模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Vue、Angular 和 Ember 都采用这种模式，相比于Angular，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。6数据驱动和组件式编程数据驱动数据驱动：7 程序=数据结构+算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹,因为前端需要跟界面打交道,html+css并没用被抽象成某种在js中使用的数

4、据结构,充当的更多是界面的一种配置,jquery程序员看待他的方式就一块块的ui,用到的时候再$一下,获取之后修改.整个程序写下来是零零散散的节点操作。一个比较实际的情况就是,在ui控件有联动的时候,如果没有一种机制来管理这些ui之间的修改,那么依赖程序员自己去手动管理这些ui的状态,会让人烦不胜烦,且容易出现bug。 总结一下基于操作dom的前端开发方式： 拼界面-找到dom节点-修改属性-检测是否有其他影响的节点-根据刚刚修改的dom节点更新自己的状态 那么上面的那句话就变成了 ：前端程序 = 拼界面+操作ui+算法 vue或者angular这些mvvm框架给了前端另一种思路,完全基于数据

5、驱动的编程。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。Vue采用一种数据绑定的方式,自动绑定dom节点的属性.这样就把你从操作dom节点的繁琐过程中解脱出来了,你只要专注于数据的状态,ui更新的事情你不需要去管了,不管是样式还是内容,可见性还是切换class,框架帮你把关注点从传统的dom操作转移到了数据,回归编程的本质:程序=数据结构+算法. 这也是mvvm框架最大的思路上的突破。8组件式编程 这个理念不是来源于vue, 把web组件式开发发扬光大的应该是react了,组件开发是一种朴素的

6、开发思想,分而治之,大型系统拆分成一个个的小模块小组件,分配给不同的人。额外的好处是顺便能复用这个组件。9理解组件的思想可以类比函数。一个函数包含哪些东西呢？1.形参2.局部变量3.函数名4.返回值那对应到vue中又是什么呢?10Vue之Hello World！11Vue之Hello World！使用Vue的过程就是定义MVVM各个组成部分的过程的过程。1.定义View2.定义Model3.创建一个Vue实例或ViewModel，它用于连接View和Model 在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。 在这个示例中，选项对象的el属性

7、指向View，el: #app表示该Vue实例将挂载到.这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时 message 会被数据对象的message属性替换，所以页面上会输出Hello World!。12生命周期13生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些

8、生命周期钩子生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。 它可以总共分为8个阶段：1.beforeCreate:在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。2.created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。3.beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在该钩子在服务器端渲染期间不被调用。服务器端渲染期间

9、不被调用。4.mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。该该钩子在服务器端渲染期间不被调用。钩子在服务器端渲染期间不被调用。14 5.beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服该钩子在服务器端渲染期间不被调用。务器端渲染期间不被调用。 6.updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被

10、调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。该钩子在服务器端渲染期间不被该钩子在服务器端渲染期间不被调用。调用。 7.beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在该钩子在服务器端渲染期间不被调用。服务器端渲染期间不被调用。 8.destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染该钩子在服务器端渲染期间不

11、被调用。期间不被调用。15从Vue到页面16从Vue到页面17Vue组件的重要选项data:18Vue组件的重要选项props: methods: watch: computed: 19Vue组件的使用组件 注册一个全局组件语法格式如下： Vponent(tagName, options) 例子如下： / 注册 Vponent(runoob, template: 自定义组件! ) / 创建根实例 20使用VueX解决组件之间的通信如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件

12、 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 。之所以麻烦 , 是因为父组件可以通过 props 给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数。这时候 , 使用 vuex 就可以比较方便的解决这种问题了 。https:/ 点击 import dialog from ./components/dialog.vueexport default data() return show:false , components: t-dialog:dialog export default props:show, computed: currentSho

13、w: get() return this.show , set(val) this.$emit(update:show,val) 22之所以这么麻烦 , 是因为父组件可以通过 props 给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数。这时候 , 使用 vuex 就可以比较方便的解决这种问题了 : 点击 import dialog from ./components/dialog.vueexport default components: t-dialog:dialog export default Vuex 是一个专为是一个专为 Vue.js 应用程序开发的状态管理模式。它

14、采用集中式存储管理应用的所有组件的状应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。态，并以相应的规则保证状态以一种可预测的方式发生变化。23安装、使用 vuexnpm install vuex -save然后 , 在 main.js 中加入 :import vuex from vuexVue.use(vuex);var store = new vuex.Store(/store对象 state: show:false )再然后 , 在实例化 Vue对象时加入 store 对象 :new Vue( el: #app, ro

15、uter, store,/使用store template: , components: App )完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。24modules这里 $store.state.show 无论哪个组件都可以使用,那组件多了之后,状态也多了,这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 ?我们可以使用 vuex 的 modules , 把 store 文件夹下的 index.js 改成 :import Vue from vueimport vuex from vuexVue.use(vuex);import di

16、alog_store from ./components/dialog_store.js;/引入某个store对象export default new vuex.Store( modules: dialog: dialog_store )这里我们引用了一个 dialog_store.js , 在这个 js 文件里我们就可以单独写 dialog 组件的状态了 :export default state: show:false 做出这样的修改之后 , 我们将之前我们使用的 $store.state.show 统统改为 $store.state.dialog.show 即可。如果还有其他的组件需要使

17、用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中。modules: dialog: dialog_store, other: other,/其他组件25mutations我们对vuex 的依赖仅仅只有一个 $store.state.dialog.show 一个状态 , 但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那管理起来又麻烦了 !mutations 登场 , 问题迎刃而解 :export default state:/state show:false , mutations: switch

18、_dialog(state) /这里的state对应着上面这个state state.show = state.show ? false : true; / 你还可以在这里执行其他的操作改变state 使用 $mit(switch_dialog) 来触发 mutations 中的 switch_dialog 方法。注意：注意：mutations 中的方法是不分组件的 , 假如你在 dialog_stroe.js 文件中的定义了switch_dialog 方法 , 在其他文件中的一个 switch_dialog 方法 , 那么$mit(switch_dialog) 会执行所有的 switch_d

19、ialog 方法。mutations里的操作必须是同步的。你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要在 mutationss 里执行异步操作而已。26actions多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了:export default state:/state show:false , mutations: switch_dialog(state)/这里的state对应着上面这个state sta

20、te.show = state.show?false:true; /你还可以在这里执行其他的操作改变state , actions: switch_dialog(context)/这里的context和我们使用的$store拥有相同的对象和方法 mit(switch_dialog); /你还可以在这里触发其他的mutations方法 , 那么 , 在之前的父组件中 , 我们需要做修改 , 来触发 action 里的 switch_dialog 方法:使用 $store.dispatch(switch_dialog) 来触发 action 中的 switch_dialog 方法。官方推荐 , 将

21、异步操作放在 action 中。27gettersgetters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。还是前面的例子 , 假如我们需要一个与状态 show 刚好相反的状态 , 并且我们需要写很多很多个 not_show , 使用 getters 就可以解决这种问题 :export default state: show:false , getters: not_show(state) /这里的state对应着上面这个state return !state.show; , mutations: switch_dialog(state) /这里的state对应着上面这个state state.show = state.show?false:true; /你还可以在这里执行其他的操作改变state , actions: switch_dialog(context)/这里的context和我们使用的$store拥有相同的对象和方法 mit(switch_dialog); /你还可以在这里触发其他的mutations方法 , 我们在组件中使用 $store.state.dialog.show 来获得状态 show , 类似的 , 我们可以使用 $store.getters.not_sho