我们知道，在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。即：对象具有属性proto，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。即 js 通过原型链可以实现继承。那么我们可以对Vue.prototype进行操作，对Vue.prototype添加属性或者方法，所有通过new Vue创建的实例都可以继承这些属性或方法。

3.原型赋值与全局变量

我们通过路由配置两个页面home和about

在main.js 中更改 Vue.prototype的

Vue.prototype.$myName="Nick"

分别在两个页面中添加

 created() {

   console.log(this.myName);//Nick

 }

Home 页面和About页面分别打印出了Nick

重新对Home添加函数

created() {

console.log(this.myName);//Nick 

this.myName="陌二哥"//重新赋值

console.log(this.myName);//陌二哥}

发现当页面从Home跳转到About后myName并没有更新

vue中使用全局对象举例

在main.js中

new Vue({

  router,

  store,

  data() {

    return {

      website: "https://www.qdtalk.com",

    }

  },

  render: h => h(App)

}).$mount('#app')

在其他页面中就可以使用this.$root.website进行读写操作了

注：$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突（覆写）。

二、axios

vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios。因为vue-cli创建的项目中没有包含这个工具，所以需要手动安装一次，输入命令

首先就是引入axios,

为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS（类似于JSON.stringify转换格式的一种方法）

一行命令解决

npm install --save axios vue-axios qs 

或者 npm i axiso + npm install qs

-save表示要将某个包安装到依赖库里，这样在打包时，webpack就会自动把这个包的代码一起打包到最终的js文件里。

两种方法在vue中使用 axios

方法一：修改原型链

首先在 main.js 中引入 axios：import Axiso from 'axiso'

再将 axios 改写为 Vue 的原型属性：Vue.prototype.$axios= Axios

在main.js使用

Get请求：

//发起一个user请求，参数为给定的ID

$axios.get('/user?ID=1234')

.then(function(respone){

    console.log(response);

})

.catch(function(error){

    console.log(error);

});

Post请求

$axios.post('/user', {

    firstName: 'Fred',

    lastName: 'Flintstone'

  })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

 为了保证请求的数据正确，可以在main.js配置如下内容：

Axios.defaults.baseURL = 'https://api.example.com';//配置你的接口请求地址

Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//配置token,看情况使用

Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头信息。

 那么最基本的配置已经完成了，但是还有一个问题，既然是前后端分离，那么肯定避免不了跨域请求数据的问题，接下来就是配置跨域了。

在config/index.js里面的dev里面配置如下代码：

dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

       '/api': {

        target: 'http://xxx.xxx.xxx.xxx:8081/',//设置你调用的接口域名和端口号 别忘了加http

        changeOrigin: true,

        pathRewrite: {

          '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我 要调用'http://xxx.xxx.xxx.xxx:8081/user/add'，直接写‘/api/user/add’即可

        }

      }

    },

注：这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题.

axios拦截器的使用 

当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。 

我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器，有token值则配置上token值

axios.interceptors.request.use(

    config => {

        if (token) {  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了

            config.headers.Authorization = token;

        }

        return config;

    },

    err => {

        return Promise.reject(err);

    });

// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token

axios.interceptors.response.use(

    response => {

        return response;

    },

    error => {

        if (error.response) {

            switch (error.response.status) {

                case 401:

                    // 这里写清除token的代码

                    router.replace({

                        path: 'login',

                        query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面

                    })

            }

        }

        return Promise.reject(error.response.data)

    });

 安装qs插件后的简化操作

$ npm install qs

import QS from 'qs'

//axios拦截器

// 超时时间

Axios.defaults.timeout = 5000;

// http请求拦截器 请求之前的一些操作

Axios.interceptors.request.use(config => {

  if(config.method=='post'){

    config.data=QS.stringify(config.data);//防止post请求参数无法传到后台

  }

  return config

}, error => {

  Message.error({

    message: '加载超时'

  });

  return Promise.reject(error)

});

// http响应拦截器  请求之后的操作

Axios.interceptors.response.use(data => {

  return data

}, error => {

  Message.error({

    message: '加载失败'

  });

  return Promise.reject(error)

});

方法二：在src目录下新建一个api.js的文件

文件中输入以下代码

import axios from 'axios';

import qs from 'qs';

axios.defaults.timeout = 5000;

axios.defaults.baseURL = process.env.API_URL;

axios.interceptors.request.use(

  config => {

    config.headers = {

      'Content-Type': 'application/x-www-form-urlencoded'

    };

    if (config.method == 'post') {

      config.data = qs.stringify(config.data)

    }

    return config;

  },

  err => {

    return Promise.reject(err);

  }

);

export default axios;

然后在main.js文件里加入以下代码

import api from './api.js'

global.api = api

将axios赋值给全局变量api，这样在任何页面上都可以直接通过api.get或api.post这样的方式来实现ajax请求。

三、Vue

el（即element的缩写），它指定vm实例对象将要控制的区域，(模板中为id="app"的模块。)

data 是个对象，指定了控制区域内要用到的数据。

methods 虽然有s后缀，但是它代表对象，在此代表部分自定义方法。

在VM实例中，如果要访问data上的数据，或者要访问 methods中的方法，必须要在前面加 this。

v-bind和v-model

简单来说
.v-bind用来绑定数据和属性以及表达式，缩写为'：'
.v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用

v-if和v-show

本质区别：

v-show指令，元素隐藏时，只是增加了display:none的样式，而 v-if 指令则直接通过把该行删除来实现了隐藏效果。

v-if和v-show的相同点：

都能够实现指定内容的显示和隐藏操作的效果

v-if和v-show的不同点：

v-if在每次完成显示和隐藏功能时，需要不断的在dom树上完成节点的创建和删除操作

v-show则直接通过修改display样式的属性值来完成。

v-if和v-show的使用场景总结：

当一个元素会被频繁的显示和影藏时，使用v-show。

当元素在响应式网页的操作过程中，根据不同用户的需求，可能永远不会被显示或被隐藏，则选择使用v-if。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

四、箭头函数

x => x * x

等价于

function (x) {

    return x * x;

}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

x => {

    if (x > 0) {

        return x * x;

    }

    else {

        return - x * x;

    }

}

如果参数不是一个，就需要用括号()括起来：

// 两个参数:

(x, y) => x * x + y * y

// 无参数:

() => 3.14

// 可变参数:

(x, y, ...rest) => {

    var i, sum = x + y;

    for (i=0; i<rest.length; i++) {

        sum += rest[i];

    }

    return sum;

}

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：x => { foo: x }

因为和函数体的{ ... }有语法冲突，所以要改为：

x => ({ foo: x })

箭头函数看上去是匿名函数的一种简写，但和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

但由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略

五、http的四种请求方式

(get/post/put/delete)

http常见四种请求

<1>get 通常用来请求某条数据或是一个数组的列表数据,参数会放在地址栏进行传输,常见的大部分请求都是get请求

缺点: 因为参数放在地址栏上,所以不安全,一般get请求会发送一些对安全性不高的数据请求,像登录注册相关的请求不会采用get请求

地址栏的长度是有限制的,大概2kb左右

<2> post 比较安全,参数放在请求的body体中的,传输的数据量很大,跟表单提交的一般都是post请求.登录,注册,新建一般都是post

<3>put 和post一样,参数和数据都一样,一般用作修改数据

<4>delete 和get一样,参数一样,一般用作删除数据

jquery中的标准请求，只有get和post，而put和delete其实都是post请求，只是分别加了参数_method: put和method: delete, 

所以在jquery中ajax delete请求时就可以使用

$.post(url, {_method: "delete"}, function(data){...})。

这个要比直接使用$.ajax({method: :delete})好的多，

有两个原因，1： 部分浏览器不支持{method: :delete}和{method: :post}

                    2： 这个ajax请求无法处理返回的数据