From f4dbef94dd52e10614f73f89485b50fea5ea4be0 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 11 Jun 2018 23:02:04 +0800 Subject: [PATCH] =?UTF-8?q?add=20Vue=202.x=EF=BC=9Avue-resource=E5=8F=91?= =?UTF-8?q?=E8=B5=B7Ajax=E8=AF=B7=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/03-VS Code.md | 24 ++++++-- 21-Vue基础/02-Vue实例的生命周期函数.md | 60 +++++++++++++------ ...Vue中的Ajax请求.md => 03-Vue中的Ajax请求.md} | 56 ++++++++++++++--- 3 files changed, 107 insertions(+), 33 deletions(-) rename 21-Vue基础/{02-Vue中的Ajax请求.md => 03-Vue中的Ajax请求.md} (83%) diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md index 12175eb..dda1588 100644 --- a/00-前端工具/03-VS Code.md +++ b/00-前端工具/03-VS Code.md @@ -79,14 +79,14 @@ live-server "username": "", //用户名 "password": "", //密码 "protocol": "sftp", //模式 - "agent": null, + "agent": null, "privateKeyPath": null, "passphrase": null, "passive": false, "interactiveAuth": false, "remotePath": "/root/node/build/", //服务器上的文件地址 "context": "./server/build", //本地的文件地址 - + "uploadOnSave": true, //监听保存并上传 "syncMode": "update", "watcher": { //监听外部文件 @@ -136,11 +136,25 @@ Sass 文件格式化。 - +### Express + +在本地开启Node服务器： + +20180611_2230.png + +然后在浏览器的地址栏输入`http://localhost/` + 文件的相对路径，就可以通过服务器的形式打开这个文件。 + +### Copy Relative Path + +复制文件的相对路径：（相对于根路径而言） + +20180611_2235.png -### Vue 相关的插件 -- vetur：vue 文件的基本语法高亮 +## Vue 相关的插件 + +### vetur：vue 文件的基本语法高亮 安装完 vetur 后还需要加上这样一段配置下： @@ -176,7 +190,7 @@ Sass 文件格式化。 |:-------------|:-------------|:-----|:-----| | Shift + Alt + F |Shift + option + F| 代码格式化 | | | Ctrl + Shift + N | |在当前行上面增加一行并跳至该行 | | -| **Ctrl + Shift + D** | |复制当前行到下一行 | | +| **Ctrl + Shift + D** | |复制当前行到下一行 | | diff --git a/21-Vue基础/02-Vue实例的生命周期函数.md b/21-Vue基础/02-Vue实例的生命周期函数.md index 6f37337..7ab7e82 100644 --- a/21-Vue基础/02-Vue实例的生命周期函数.md +++ b/21-Vue基础/02-Vue实例的生命周期函数.md @@ -3,8 +3,6 @@ ## 介绍 -### 定义 - - [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。 @@ -15,11 +13,14 @@ 生命周期钩子 = 生命周期函数 = 生命周期事件。 -### 生命周期函数的主要分类 +## 生命周期函数的主要分类 ![](http://img.smyhvae.com/20180422_1650.png) -1、创建期间的生命周期函数： +根据上面这张图，我们把生命周期函数主要分为三类。 + + +### 1、创建期间的生命周期函数 - beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 @@ -29,21 +30,8 @@ - mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 -2、运行期间的生命周期函数： -- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 - -- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。 - - -3、销毁期间的生命周期函数： - -- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 - -- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 - - -举例1：创建期间的生命周期函数 +**举例**： ```html @@ -103,9 +91,15 @@ 20180610_1500.png +### 运行期间的生命周期函数 -举例2：运行期间的生命周期函数 +- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 +- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。 + + + +**举例**： ```html @@ -167,3 +161,31 @@ 当我们点击按钮后，运行效果是： 20180610_1528.png + +可以看出： + +- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的 + +- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 + + + +### 3、销毁期间的生命周期函数 + +- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 + +- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 + + + + +## 生命周期函数图解 + +20180610_2130.png + +PS：图片来自网络。 + + + + + diff --git a/21-Vue基础/02-Vue中的Ajax请求.md b/21-Vue基础/03-Vue中的Ajax请求.md similarity index 83% rename from 21-Vue基础/02-Vue中的Ajax请求.md rename to 21-Vue基础/03-Vue中的Ajax请求.md index 80ba621..e6bce92 100644 --- a/21-Vue基础/02-Vue中的Ajax请求.md +++ b/21-Vue基础/03-Vue中的Ajax请求.md @@ -1,21 +1,34 @@ -## vue-resource + +## vue-resource的介绍 + +`vue-resource`是Vue高度集成的第三方包。 官网链接： -- http相关： +- 文档（http相关）： + +vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。 + +**解释**： + +`vue.js`文件向Windows对象暴露了`Vue`这个关键词；`vue-resource.js`向Vue身上挂载了`this.$http`这个属性。于是，我们可以直接写`this.$http.get`或者`this.$http.post`或者`this.$http.jsonp`来调用。 + +## vue-resource 发送Ajax请求 + +常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。 -按照先后顺序，导入vue.js和vue-resource.js文件。 ### get 请求 -**格式**： +**格式举例**： ```javascript this.$http.get(url) - .then(function (response) { - var data = response.body; //response.body是要获取的数据 + .then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数 + console.log(result.body); // response.body就是服务器返回的成功的数据 + var result = result.body; }, function (err) { //err是异常数据 @@ -135,17 +148,18 @@ ![](http://img.smyhvae.com/20180422_2152.png) -如果我直接在浏览器中输入请求的url，获取的json数据如下：（这种方式获取的是相同的数据） +如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据） ![](http://img.smyhvae.com/20180422_2150.png) ### post请求 -**格式**： +**格式举例**： ```javascript - // 调用 $http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true}) + // 方法：$http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true}) + // 通过 post 方法的第三个参数{ emulateJSON: true } ，来设置 提交的内容类型 为 普通表单数据格式 this.$http.post(url, { name: '奔驰' }, { emulateJSON: true }) .then(function (response) { alert(response.body.message); @@ -425,6 +439,9 @@ ![](http://img.smyhvae.com/20180420_2250.png) + +**格式举例**： + ```javascript // 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是： // url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上 @@ -441,5 +458,26 @@ ![](http://img.smyhvae.com/20180420_2256.png) +## JSONP的实现原理 + +由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。 + +**JSONP的实现原理**：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。 + 具体实现过程： + + +- 先在客户端定义一个回调方法，预定义对数据的操作 + +- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口； + +- 服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行； + +- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了 + + +## axios + +除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。 +