1. 什么是 Axios
Axios 是一个开源的可以用在浏览器端和 Node.JS 的异步通信框架, 主要作用就是实现 Ajax 异步通信, 其功能特点如下:
从浏览器中创建 XMLHttpRequests
从 node.JS 创建 http 请求
支持 Promise API [JS 中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF(跨站请求伪造)
GitHub: https://github.com/axios/axios
中文文档: http://www.axios-js.com/
2. 为什么要使用 Axios
由于 vue.js 是一个 视图层框架 并且作者 (尤雨溪) 严格准守 SoC (关注度分离原则), 所以 vue.JS 并不包含 Ajax 的通信功能, 为了解决通信问题, 作者单独开发了一个名为 vue-resource 的插件, 不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架. 少用 jQuery, 因为它操作 Dom 太频繁!
3. 第一个 Axios 应用程序
1. 模拟 JSON 数据: 创建 data.JSON
- {
- "name": "第一个 Axios 程序",
- "url": "https://www.cnblogs.com/zhihaospace/p/12078861.html",
- "page": 1,
- "isNonProfit": true,
- "address": {
- "street": "科大南区",
- "city": "安徽",
- "country": "中国"
- },
- "links": [
- {
- "name": "海恋天",
- "url": "https://www.cnblogs.com/zhihaospace/"
- },
- {
- "name": "Vue 的组件",
- "url": "https://www.cnblogs.com/zhihaospace/p/12078835.html"
- },
- {
- "name": "Vue 的双向绑定",
- "url": "https://www.cnblogs.com/zhihaospace/p/12078708.html"
- }
- ]
- }
2. 导入 axios.JS
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3. 代码
说明:
data 函数: 与 data 属性不同, 返回数据给视图. 注意: data 函数返回的数据结构必须要和 Ajax 响应回来的数据格式相匹配, 也就是名字相同
mounted 函数: 钩子函数
axios: 使用 axios 框架的 get 方法请求 Ajax 并自动将数据封装进 Vue 实例的数据对象中
v-cloak: 让渲染时显示模版改为显示空白页面, 解决页面闪烁问题
v-text: 本身没有闪烁问题
- <!DOCTYPE HTML>
- <HTML lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <!--v-cloak 解决闪烁问题 -->
- <style>
- [v-cloak] { display: none; }
- </style>
- </head>
- <body>
- <!--view 层模块 -->
- <div id="vue">
- <!-- 默认 v-text 是没有闪烁问题的, 会覆盖标签的元素中原本的内容, 插值表达式只会替换占位符的内容, 不会覆盖原来的内容 -->
- <div v-text="info.url">
- </div>
- <!--v-cloak: 防止闪烁 -->
- <div v-cloak>
- 名称:{{info.name}}
- </div>
- <div v-cloak>
- 地址:{{info.address.country}}-{{info.address.city}}-{{info.address.street}}
- </div>
- <div v-cloak>
- 链接:
- <a v-bind:href="info.url" target="_blank" v-cloak>
- {{info.url}}
- </a>
- </div>
- </div>
- <!-- 导入 Vue.js-->
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">
- </script>
- <script src="https://unpkg.com/axios/dist/axios.min.js">
- </script>
- <script type="text/javascript">
- // 定义一个 Vue 组件
- Vue.component("first_component", {
- props: ["com"],
- template: "<li>{{com}}</li>"
- }) let vm = new Vue({
- el: '#vue',
- // 此处是 data 函数和 data 属性不同
- data() {
- return {
- info: {
- name: null,
- address: {
- country: null,
- city: null,
- street: null
- },
- url: null
- }
- }
- },
- mounted() { // 钩子函数, 链式编程, ES6 的 lambda
- axios.get('../data.json').then(response = >(this.info = response.data));
- }
- });
- </script>
- </body>
- </HTML>
4.Vue 的生命周期
官方文档: https://cn.vuejs.org/v2/guide/instance.html# 生命周期图示
Vue 实例有一个完整的生命周期, 也就是从开始创建, 初始化数据, 编译模板, 挂载 DOM, 渲染→更新→渲染, 卸载等一系列过程, 我们称这是 Vue 的生命周期. 通俗说就是 Vue 实例从创建到销毁的过程, 就是生命周期.
在 Vue 的整个生命周期中, 它提供了一系列的事件, 可以让我们在事件触发时注册 JS 方法, 可以让我们用自己注册的 JS 方法控制整个大局, 在这些事件响应方法中的 this 直接指向的是 Vue 的实例.
来源: http://www.bubuko.com/infodetail-3343953.html