十八岁讨厌编程的博客

本文涉及组件通信、Vuex、VueRouter等内容，是更适合后端程序员快速实践的总结文章。

用于后端程序员快速掌握并实践vue

本文涉及生命周期钩子、路由守卫、路由器的两种工作模式等内容。

本文涉及props配置、router-link的replace属性、编程式路由导航、缓存路由组件等内容

本文涉及多级路由、路由传参、命名路由、路由的params参数等等内容。

本文涉及路由的简介、路由的基本使用、路由使用的注意点等内容

本文涉及多组件共享数据、Vuex的模块化等内容

当state中的数据需要经过加工后再使用时，可以使用getters加工。它与计算属性computed有些类似，但是它与计算属性的不同点在于，其可以在任意组件中复用，而计算属性只在当前组件中生效。那么它如何使用呢，我们举一个例子，在求和案例的基础上，将和放大十倍展示：步骤一：我们先在store中添加getter配置项这里于计算属性的写法一样，不过我们的方法中会传入一个参数state。步骤二：组件中读取数据我们可以在store的getters中找到他：于是我们的代码可以这么写：在开发者工具中我们可以查看

首先我们使用：来安装Vuex然后我们在main.js中引入，并使用use来使用这个插件：完成了上面的步骤之后，我们就可以在创建vm(或者组件实例对象vc)的时候传入一个store配置项，这个配置项在vm(或者组件实例对象vc)中体现为$store。接下来最关键的一步：我们要创建这个store。我们单独把它写在一个js文件中。index.js:接下来我们把写好的store放在vm身上：如果这样的话最后运行时会报错的:也就是说要在这句话之前进行，那么我们这样修改：正确的修改方式：index.js:

：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。为了更好地理解Vuex我们可以举一个例子：假如现在A组件有一些数据，B、C、D组件都想要，如果使用全局事件总线我们可以这么做：以上我们只考虑了读取，如果我们现在想修改数据，那么我们就要把修改的数据通过B、C、D组件传给A，如下图所示：可以发现如果我们想要实现某一部分数据在所有(部分)的组件中实现共享是很麻烦的。而Vuex这

我们现在有一个需求：代码：App组件：Category组件现在我们有一个新需求：这该如何去实现呢？如果我们使用条件渲染，那当需求多了之后，代码逻辑就会变得非常的混乱。这个时候我们可以使用 – 使用默认插槽有两个步骤：实现以上的需求我们的代码如下：App组件：Category组件：注意：在上面的代码中：你的img、ul、video标签都是在App组件里面解析完成之后才放到Category组件里面去的，所以说如果我们想控制img、ul、video的样式，我们完全可以把他们写在App组件中默

常用的发送Ajax请求的方法有哪些？我们在页面上创建一个按钮，点击即可发送get请求获的学生数据：然后我们发现：很明显这是一个跨域问题，也就是说我们违背了我们现在所处的位置是localhost:8080也就是说此时我们所处的状态：但服务器所处的状态：所以说并不同源，故发生了跨域问题那么我们如何解决跨域问题呢？这里有几种思路：左边红色方框代表本地浏览器，中间的粉色方框代表代理服务器，右边的蓝色方框代表服务器。这个代理服务器与我们所处的端口号一定是一样的！当我们向服务器请求学生信息的时候，我们不直接请

Vue 提供了 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：例如现在我们做一个案例：点击一下显示，再点击一下隐藏。中间有移入移出的动画。首先我们拿transition标签把要实现动画的元素给包裹起来：接下来我们使用和来定义进入的时候要激活的样式和离开时要激活的样式。我们关注一下和的作用时机：当我们点击显示的时候，在显示之前播放动画isShow立即改变当我们点击隐藏的时候，动画立即被触发isShow立即改变还有一个注意点：对于这些在过渡中切换的类名来说，如果你使用一个没有

消息的订阅与发布同样可以实现任意两个组件间的通信其分为两个步骤：接下来我们通过一个例子去理解它的步骤：现在我们想要实现组件A与C之间的通信(假设是组件C发送数据给A组件)：原生js无法轻松的实现消息的订阅与发布。所以我们一般是借助第三方库去完成这个功能。这里我使用的是，它可以在任意框架中实现消息的订阅与发布。首先我们安装：引入语法：这个引入的pubsub其本质是一个对象这里我们首先介绍一下，他的相关API：消息的发布语法：消息的订阅语法：取消订阅的语法：取消所有的订阅代码实操我们沿用

全局事件总线能实现任意两个组件间的通信例如我们现在有如下的结构：我们想要实现任意两组件的通信，少不了一个中介X(图中右上角的粉色圆圈)。例如现在D组件要向A组件传一点数据，过程如下：在这个过程中，我们不难发现这个类似于中介的X，是有一定的要求的：首先我们可以讨论第一个要求怎么实现，我们有如下几种方法：接下来我们实现第二个要求：因为Vue原型对象上的属性和方法都是给Vue的实例对象(vm)或组件的实例对象(vc)用的，所以这个X我们必须创建为Vue的实例对象或者组件的实例对象。例如我们现在有如下的组件结构

首先声明事件的解绑他不是必须的，但他一定是推荐的。这就跟定时器的关闭一样，我们只要开启就应该选择一个合适的时机关掉，但是你不关，就等着用户关网页，也是可以的。我们在上一篇的基础上对事件进行解绑。解绑使用的语法：$off(事件名)代码实现如下：但是如上的方法只能解绑一个自定义事件，如果我们有多个自定义事件需要解绑，则在上面的方法中传入一个数组即可：App组件在$on()方法中第二个参数我们既然传入的是一个函数，那么我们能不能直接将函数定义在on方法中，而不是在methods中定义呢？App组件：我们发现

我们前面在TodoList经典案例中提到过，如果父组件要向子组件传递数据，我们可以使用props。而如果子组件要向父组件传递数据，我们可以先在父组件中定义好方法，使用props传递给子组件，然后让子组件去调用它。现在我们多了一种子组件向父组件传递数据的方法，那就是。现在我们完成一个小案例，分别使用两种不同的方式，将子组件中的数据传递给父组件首先我们使用props的方法完成学校名称的传递，代码实现如下：App组件：School组件：然后我们使用组件的自定义事件来完成学生名称数据的传递：①首先我们使用

如下图所示：有几个小细节：当所有事件都被勾选之后，下面已完成前面的框也会自动勾选只有在至少一个事件被选中之后，才会出现“清除已完成任务”的按钮当列表中没有待办事件的时候，已完成的那一行整体都不会显示添加的事件出现在列表的最上面使用前端框架Vue实现且不使用全局事件总线、消息订阅与发布的有关知识首先根据组件化我们肯定是要对这个待办列表进行拆分的。当然这里有很多拆法，我推荐两种：在这里我使用第二种方式，我们将每一个组件命名：注意点：注意点：注意：在做这一部分的时候，难点肯定是怎么作用到具体的元

所谓的混入就是两个组件共享一个配置。(这个要共享的配置肯定是相同的)例如我们有如下两个组件：School组件：Student组件：我们发现其中的methods这个配置项在两个组件中是完全一样的，那么我们可以有如下处理：首先我们创建一个js文件(在哪无所谓，最好是跟main.js一个层级)，将相同的配置项放在一个对象中丢进去，然后进行暴露：我们就js文件引入，然后将两个组件中的相同配置项删除(如果不删除就是在原有的基础上进行添加)，添加全新配置项mixins，其值是一个数组，最后将引入的东西放进去：

我们拿出一个App组件：现在我们如果想要拿到这个h2元素，我们的第一反应就是使用原生js，给h2标签取个id，然后使用getElementById这个方法把它拿到。但是这是Vue我们应该减少直接操作DOM的操作。这个时候Vue给我们提供了一个属性ref，我们通过它给标签取一个名字：我们打印此时的组件实例对象vc发现：于是我们这样去获得：结果：以上我们都是在html标签中去使用ref属性，如果我们在组件标签中去使用会怎么样呢？结果：我们用这种办法可以拿到组件的实例对象vc。总结：我们知道组件时

也就是在脚手架的main.js函数中出现的一个函数：这与我们前面写过的main.js文件不一样：如果按照我们的代码来的话，编译项目会发生页面空白并且报错：他告诉我们我们正在使用一个运行时的Vue(可以简单地理解为残缺的Vue)，没有模板解析器。脚手架还告诉了我们两个解决办法：我们首先使用引入带有模板解析器的完整Vue的这个解决办法首先我们要知道，我们在脚手架中引入Vue的时候，代码如下：这与我们平时的引入似乎有些差别，我们平时都会带点/，精确到某一具体的文件，而这里直接就一个vue完事了，我们可以

Vue脚手架又称第一步（仅第一次执行）：全局安装@vue/cli。第二步：切换到你要创建项目的目录，然后使用命令创建项目第三步：启动项目如要停止项目使用ctrl + c然后我们再看src文件夹里的东西：其中main.js非常重要，在我们执行命令之后，直接就会执行main.js(所以它也被称为入口文件)。assets文件夹我们经常可以在前端项目中看到。这个文件夹里面一般放静态资源。components文件夹里放着所有的组件(除了App.vue)我们将上一节中的代码运行到脚手架上：注意：index.h

这也就意味着我们需要把一个个的组件写成文件。我们知道组件由三个部分组成，部分html代码、css、js。在vue文件中为我们提供了三种标签，去完成每部分的内容：我们现在尝试把上图中的student组件放入到vue文件中去：还可以更简洁一点，我们知道Vue.extend()是有简便写发的，然后我们再给组件添加一个名字：接下来我们将以下代码按照单文件组建的方式进行编写：文件结构：App.vue:index.html:main.js:School.vue:Student.vue:做完这

我们已经知道了如何去创建一个组件，例如以下代码：但是我们不知道这个const后面的school到底是什么？或者说它是什么类型的数据？我们可以把它打印出来看看：由此我们可知组件的本质是一个函数，而且还是一个构造函数(因为函数名的每个单词开头是大写的)！它不是由程序员定义的，是Vue.extend生成的既然是构造函数，不应该使用new去使用它吗？事实上，我们只需要写或这样的组件标签，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的......

如果是一个单词组成的，Vue官方推荐两种写法：如果是多个单词组成的，Vue官方推荐两种写法：组件标签有两种写法：const school = Vue.extend(options) 可简写为：const school = options我们通过前面的这个案例，完成组件的嵌套：打开Vue的开发者工具我们可以看到两个组件的关系是平级的。如果使用组建的嵌套来写，代码如下：可以发现student是嵌套在NEFU中的。我们在开发中会定义这么一种组件，这个组件的名字叫，这个组件的作用是管理应用里面所有的组

我们先看看使用传统方式编写应用：例如我们编写如左图的页面，我们先使用html搭建基础结构，再使用css文件对每一个部分进行美化(如此方便维护)，最后使用js编写每个部分的交互逻辑(方便维护)。现在我们多了一个需求，还要写一个页面结构如左下角所示，其中顶部和底部完全相同：我们的做法是：再写一个HTML文件，然后引入顶部和底部相应的css、js文件达到复用，最后编写商品列表的样式和逻辑：以上的过程存在两个问题：接下来我们来看使用组件方式编写应用：完成同样的需求，使用组件的方式，相当于是把每一个部分

：例如我们现在有一个需求，页面上显示一行文字，并且动态的改变它的透明度。代码如下：注意：这样写可以实现功能，但是Vue实例与处理逻辑分开了，且处理逻辑还在操作Vue中的数据。也就是说从功能上来讲两者连在一起，但是从代码层面上来讲，他们俩是割裂开的。我们希望将这个逻辑放入到Vue中去。此时我们就可以借助生命周期函数。在Vue完成模板的解析并把真实DOM全部到页面上完毕之后，会调用一个mounted()函数，我们可以借助它来完成这个案例：挂载流程下图中红圈mounted之前的部分都属于挂载部分。红色圆框

我们先定义一个需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。我们首先将代码框架写好，先不定义v-big指令，代码如下：此时运行的话，数字n是可以实现增加的，控制台会报错：注意报错报的式big，而不是v-big。有两种情况是没有前缀的：我们在Vue的实例对象中添加一个配置项 – ，在其中我们就能定义自己的指令。接下来我们的重点在于探索big方法身上其中的两个重要参数：我们发现big方法中会有两个形参，一个是指令所处的元素(也可以说是指令所绑定的元素，它可以用来直接操

作用：向其所在的节点中渲染文本内容。与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。(所以说插值语法更加的灵活)例如：效果：v-html指令：1.作用：向指定节点中渲染包含html结构的内容。2.与插值语法的区别：(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。(2).v-html可以识别html结构。3.严重注意：v-html有安全性问题！！！！(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2).一定要在可信的内容上使

我们经常会遇到一种情况：将时间戳格式化为特定的形式。现在我们使用三种方法来完成这个需求：效果如下：我们在这里可以引用第三方库。我们在bootCDN.cn上面可以找到，其中较为好用的时间第三方库是：他的功能非常强大，不过它的体积稍微有点大。我们可以使用他的轻量化版本:打开GitHub查看其使用文档：代码如下：使用methods实现代码如下：使用过滤器实现使用步骤：代码如下：注意：过滤器还可以传递参数，例如我们可以这样：效果：过滤器还可以串联例如我们接着上面的案例，现在我们只显示年份

我们前面在数据绑定的时候就知道可以用v-model的数据双向流动性完成对数据的收集。不过当时我们只是简单的对输入框进行了数据收集。在表单中还有很多其他类型的组件，我们怎么对他们进行数据收集呢？我们通过一个案例来理解。我们先完成一个表单，并对表单中的信息进行收集：代码如下：最后收集到的数据：收集表单数据：若：，则v-model收集的是value值，用户输入的就是value值。若：，则v-model收集的是value值......

我们前面知道只要data中的数据发生变化，那么Vue会重新解析模板更新数据。那么这一定是决定的吗？我们可以看看下面的例子：我们借用原来的列表案例，对其中的一项进行修改：如果只是对其中对象的属性进行修改，是奏效的：而如果是对其中的对象整体修改，会发现不奏效：如何实现针对对象进行数据监测在前面我们说到数据代理的时候，我们当时说Vue会将中的数据放到中去，然后再将_data中的数据进行代理。其实在Vue将中的数据放到之前，Vue对data中的数据进行了加工，而这个加工的步骤就是Vue实现数据监测的关键。

我们可以先用Vue创建一个基本的列表：注意:这里的key是必不可少的，他让每一个li都有一个特殊的标识。我们后面会做详细的介绍in前面可以接收到两个返回值，一个是列表中的元素，另一个是列表索引。我们也可以利用列表索引的特殊独特性，将其作为key如果接收多个返回值那个括号也可以省略。(但最好不要，有可能在一些老的脚手架中报错)这个in可以替换为of除了遍历列表之外，我们还可以遍历对象类型：效果：我们还可以遍历字符串：效果：还可以遍历指定次数：效果：总结：首先我们先粗劣的理解key的作用：

隐藏元素，但是在网页源码中的结构仍然存在例如：结果：隐藏元素，但是结构在源码中不再存在。(相当于在DOM中把这个节点删除了)既然存在那么也会存在、，他们的语义和if、else if、else是一样的。例如：结果：将三者组合：结果：我们现在想要把三个段落一起显示。如果全用if来判断效率不高。我们的第一想法是将三个段落放到一个div当中去，然后去控制div的显示与隐藏。这种做法确实可以，但是美中不足之处就是破坏了结构。这有可能导致css选择器得不到相应的元素了。所以此处我们可以引入。：其最大

现在有几组样式。 basic是基本样式必须有，happy、sad、normal这三组样式必选其一，add1、add2、add3这三组样式可以叠加，我们现在将他们添加到某一个元素身上。按照我们以前的想法，肯定是直接操作DOM，先去获得元素，再去添加。但是使用了Vue我们可以利用数据绑定。如下：我们把固定类型basic写死在class中，动态变化的类型使用v-bind进行数据绑定。接下来我们提出另一个需求：我们可能随时需要 添加/去掉 绑定。通过对象绑定再来一个需求：我们已经确定可能使用两个样式。

我们实现以下的一个小案例：点击切换天气会分别显示凉爽、炎热(只有这两种状态)，且每一次天气切换的时候都会被控制台给捕获到。我们先不考虑控制台的那一部分，先把切换部分给做出来。我们可以使用前文刚刚介绍的计算属性。第一部分实现代码如下：然后控制台的捕获部分就要使用监视属性了。监视属性顾名思义就是我们要监视的属性。那么我们如何去监视一个属性呢。Vue为我们提供了一个新的配置项。我们直接看相关实现代码，再进行解释：watch里面的被监视属性同样也要写成一个配置对象。其中：我们也可以不通过watch来进行监

现在我们做一个小案例，如下图所示：我们创建三个input框，其中第一个框写姓，第二个框写名，第三个框是姓名，也就是将第一个框中的内容和第二个框中的内容中间用连接在一起。同时在修改姓、名的时候姓名会跟着动态的发生变化。这个需求很简单，代码实现如下：现在我们提一个新需求：不管姓、名有多长，我们永远只截取他们的前三位进行拼接。我们可以用多种方法去实现它：方法①：直接调用api首先我们的第一反应是直接调用相关的api代码实现如下：但是考虑到如果需求变得更加复杂，如果将处理逻辑全写在那个地方，会造成语义不

我们已经知道在原生js中如何去绑定一个事件，那么在Vue中我们怎么实现事件绑定呢？我们可以先来看一个最简单的例子：我们点击一个按钮，出现一个弹窗显示你好优快云。代表时Vue的指令，代表是什么时候，代表是点击的时候。满足条件则Vue执行回调函数，函数名作为值。函数体写在Vue实例对象的methods属性对象中。这里我们有几个注意的点：这个show方法会接受一个事件对象show方法中的this是一个Vue实例。但是如果你使用的是箭头函数，他没有自己的this，就会向外部寻找，最后this就是window。

图的右下角是一个model它指的是一个一般的JS对象。整个绿色的部分讲就是Vue所缔造的实例对象。我们可以先看到向左指的箭头，他代表的意思是：存在JS一般对象里的数据经过Vue示例进行数据绑定，就把数据摆在了页面中想要的位置(页面就是把模板进行解析)再看向右指的箭头，他的大致意思是：页面上的改变，能映射回数据里的改变。完整过程：DOM监听器通过监听视图的数据变化来动态的改变JS对象里存储的数据。我们还可以通过代码来理解：说白了ViewModel就是把一堆乱七八糟的数据和DOM结构在中间进行了一次链接(相

文章目录模板语法插值语法指令语法总结数据绑定el与data的两种写法写法总结模板语法插值语法我们在前面的Hello小案例中运用到的就是插值语法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../VueEnv