Vue的生命周期、vue-router、vue-resource

一、Vue的生命周期

如果发生问题，就需要借助于生命周期来寻找问题，如果有需求，也可以通过生命周期找到需求的位置。

// vue的生命周期，钩子函数
beforeCreate         组件实例化之前创建的函数
created                  组件实例化完毕，但页面还未显示
beforeMount          组件挂载前，页面仍未展示，但虚拟Dom已经配置
mounted                组件挂载后，此方法执行后，页面显示
beforeUpdate         组件更新前，页面仍未更新，但虚拟DOM已经配置
updated                  组件更新,此方法执行后，页面显示
beforeDestroy        组件销毁前
destroyed               组件销毁后

按照下面运行就可以在刷新页面的时候看到提示信息

 

二、Vue-router 路由

路由与a标签实现的功能是一样的，实现对应的跳转，路由不管点击多少次，都会发送对应的网络请求

安装路由

       首先打开我们的终端，在终端中切换到输入模式 按两次 ctrl+c，

       之后输入指令安装路由  npm install vue-router --save-dev 

       之后再输入指令重启服务  npm run dev

重新启动服务后，我们就可以使用路由了，

       我们先引入路由

如果要去掉链接地址栏中的#号,就设置mode:”history”

创建一个Home组件，将Home设置为Header,footer,users的父组件，将App.vue的内容复制到Home组件中

创建另一个父组件HelloWorld，用于切换比较

将App.vue组件清空,之后引入路由就可以实现页面效果了

效果

进阶：根组件app.vue内添加顶部导航

使用a标签点击会重新加载页面，a标签不管点击多少次，都是会实现重新加载页面。

为了提高项目的运行速度，就不能使用a标签，

要使用路由<router-link to=”路由设置的路径”></router-link> 之后点击就会发现没有进行重新加载

在main.js文件中路由配置设置的路径

之后就实现了简单的项目效果

项目源码下载地址：

链接：https://pan.baidu.com/s/1wQ8ikDYUNY1DwYscjkQvnA

提取码：9f5w

 

三、vue-resource 

如何使用自己的http请求 vue中自带的请求  vue-resource Vue 要实现异步加载需要使用到 vue-resource 库。

首先来到终端，先ctrl+c两次 进入输入模式，

使用命令指令安装 npm install vue-resource –save-dev  会将当前模块安装到我们的项目中来,

之后重新启动项目  npm run dev

使用网络接口：免费的在线REST服务（提供测试用的HTTP请求假数据）

 http://jsonplaceholder.typicode.com/

首先我们将Home组件的data里面的users数组数据注释掉，之后在创建时获取数据

之后就已经成功获取到数据

源码地址链接：https://pan.baidu.com/s/1KKLnX4BmMR_T4oztm-NwEQ 
提取码：jwqq 

如果阅读本教程之后，还有不清楚的部分，建议去看看与vue-cli项目相关的视频教程，这里推荐的视频教程地址：https://ke.qq.com/course/279700?taid=2294221205947540