vue常见面试题（10-20）_v - lastmileage >= 10

11.axios及安装

1.axios是什么？

请求后台资源的模块
是一种创建快速动态网页的技术。
后台与服务器少量数据交换， 在不重新加载整个网页的情况下，对网页部分进行更新。
1.创建一个XMLHttpRequest的对象.
2.通过open（）与服务器建立连接。
3.使用send（） 来发送请求。
4.使用onreadystatechange事件来监听。如果表示readystate=4解析成功，且status==200(状态码成功)，与后台搭建成功。
5.使用responseText来获取服务器返回的数据

2.axios安装？

根目录运行

npm install axios -S
1

在使用的地方

import axios from  'axios'
1

12.axios解决跨域

首先在build/webpack.dev.conf.js设置代理

var express \= require('express')
var axios \= require('axios')
var app \= express()
var apiRoutes \= express.Router()
app.use('/api', apiRoutes)before(apiRoutes) {  
      apiRoutes.get('/api/getDiscList', function (req, res) {  
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' // 原api  
        axios.get(url, {  
          headers: {  
            referer: 'https://c.y.qq.com/',  
            host: 'c.y.qq.com'  
          },  
          params: req.query  
        }).then((response) => {  
          res.json(response.data)  
        }).catch((e) => {  
          console.log(e)  
        })  
      })}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在页面中使用

export function getDiscList() {
  const url = '/api/getDiscList'
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

13.v-model的使用

用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model在内部使用不同的属性为不同的输入元素并抛出不同的事件：