window.cnblogsConfig = { blogUser: 'MoYu', blogAvatar: 'https://gitee.com/MoYu-zc/picgo/raw/master/img/20210213094450.jpg', blogStartDate: '2020-02-09', webpageTitleOnblur: '(o゚v゚)ノ Hi,Back', webpageTitleOnblurTimeOut: 500, webpageTitleFocus: '(*´∇`*) 欢迎回来!', webpageTitleFocusTimeOut: 1000, webpageIcon: "https://gitee.com/MoYu-zc/picgo/raw/master/img/20210213094450.jpg", enable: true, // 是否开启日/夜间模式切换按钮 auto: { // 自动切换相关配置 enable: false, // 开启自动切换 dayHour: 7, // 日间模式开始时间,整数型,24小时制 nightHour: 20 // 夜间模式开始时间,整数型,24小时制 } switchDayNight: { enable: true, auto: { enable: true } }, progressBar: { id : 'top-progress-bar', // 请勿修改该值 color : '#77b6ff', height : '2px', duration: 0.2, }, loading: { rebound: { tension: 16, friction: 5, }, spinner: { id: 'spinner', radius: 90, sides: 3, depth: 4, colors: { background: '#f0f0f0', stroke: '#272633', base: null, child: '#272633', }, alwaysForward: true, // When false the spring will reverse normally. restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation renderBase: false, } }, homeTopAnimationRendered: true, homeTopAnimation: { radius: 15, density: 0.2, color: 'rgba(255,255,255, .2)', // 颜色设置,“random” 为随机颜色 clearOffset: 0.3, }, essayTopAnimationRendered: true, essayTopAnimation: { triW : 14, triH : 20, neighbours : ["side", "top", "bottom"], speedTrailAppear : .1, speedTrailDisappear : .1, speedTriOpen : 1, trailMaxLength : 30, trailIntervalCreation : 100, delayBeforeDisappear : 2, colorsRandom: false, // v1.2.4 是否开启随机颜色 colors: [ '#96EDA6', '#5BC6A9', '#38668C', '#374D84', '#BED5CB', '#62ADC6', '#8EE5DE', '#304E7B' ] }, homeTopImg: [ "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp", "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp" ], homeBannerTextType: "one", essayTopImg: [ "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp", "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp", "https://gitee.com/MoYu-zc/picgo/raw/master/img/20210208190902.jpg", "https://gitee.com/MoYu-zc/picgo/raw/master/img/20210208190954.jpg", ], codeMaxHeight: true, codeLineNumber: true, essayCode: { fontFamily: "'Ubuntu Mono',monospace", // 代码框字体 fontSize: "14px" // 代码框字体大小 }, }

Vue-Axios

Vue-Axios

什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:

  • 从浏览器中创建XMLHttpRequests从node.js创建http请求
  • 支持Promise API[JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)

GitHub:https://github.com/gxios/axios

中文文档:http://www.axios-js.com/

1

第一个Axios实例

1.创建data.json

{
  "name":"MoYu",
  "url":"https://www.moyuzc.cn/",
  "page":1,
  "isNonProfit":true,
  "address": {
    "street":"含光门",
    "city":"陕西西安",
    "country":"中国"
  },
  "links":[
      {
        "name": "bilibili",
        "url": "https://space.bilibili.com/84493733"
      },
      {
        "name": "MoYu",
        "url": "https://moyu-zc.gitee.io/"
      }
    ]
}

2.Vue绑定

<div id="vue"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue'
    });
</script>

3.钩子函数

<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        mounted(){   //钩子函数   链式编程  ES6新特性
            axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
        }
    });
</script>

2

成功获取

注意:response=> 该表达式为ES6新特性,如果出错,可以这样解决:

3

4.页面显示信息

<div id="vue">
    <div>
        {{info.name}}
        <br>
        {{info.address}}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        data(){
            return{
                //请求的返回参数,必须和 json 字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                }
            }
        },
        mounted(){   //钩子函数   链式编程  ES6新特性
            axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
        }
    });
</script>

4

Vue-呼吸问题

在刚进入页面时,可能会出现如下情况:

5

显示的是html文件中的信息,而不是调用出的文字

过一会才会变为调用出的文字,这个就是Vue呼吸问题

解决方法

<div id="vue" v-clock>
</div>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>

这个就可以啦

5.a标签绑定

<div id="vue" v-clock>
    <div>
        {{info.name}}
        <br>
        {{info.address}}
        <br>
        <a v-bind:href="info.url">点击</a>
    </div>
</div>
data(){
    return{
        //请求的返回参数,必须和 json 字符串一样
        info:{
       		name: null,
            address: {
                street: null,
                city: null,
                country: null
            },
        	url: null
        }
    }
},

点击 a 标签,就会进入你在 data.json ,设置好的 url

个人博客为:
MoYu's Github Blog
MoYu's Gitee Blog

posted @ 2021-04-20 23:56  MoYu-zc  阅读(145)  评论(0编辑  收藏  举报