参考地址:Vue.prototype详解

如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加。

不想污染全局作用域。这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可用。

Vue.prototype.$http = axios;

  这样 $http 就在所有Vue实例中可用了,甚至在实例被创建之前就可以用。 如果我们运行:

new Vue({
beforeCreate: function() {
console.log(this.$http)
}
});

  则控制台会打印出

  你可能会好奇:

  “为什么 http 要以 $ 开头? 这很重要吗? 他会怎样?”

  这里没有什么魔法。$ 是在Vue 所有实例中都可用的属性 的一个简单约定。这样做会避免与已被定义的数据、方法、计算属性产生冲突。

  “你指的冲突是什么意思?”

  另一个好问题!如果你写成:

Vue.prototype.http = axios

  那么你希望下面的代码输出什么呢?

new Vue({
data: {
http: '123456'
},
beforeCreate: function() {
console.log(this.http)
},
created: function() {
console.log(this.http)
}
});

  日志中会先出现

,然后出现'123456',因此 this.http 在实例创建之后被data覆写了。我们通过 $ 为实例属性设置 作用域 避免这种事情发生。你可以根据你的喜好使用自己的约定,诸如 $_http 或 Ωhttp,来避免和插件或未来的插件相冲突。

Vue.prototype详解的更多相关文章

  1. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  2. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  3. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  4. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  5. vue实例详解

    Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...

  6. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  7. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

  8. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  9. vue v-for详解

    1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists">     <div>     ...

随机推荐

  1. iOS 11适配

    1.http://www.cocoachina.com/ios/20170915/20580.html   简书App适配iOS 11   2.http://www.jianshu.com/p/efb ...

  2. 【JS新手教程】弹出两层div,及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

  3. python-Web-flask-蓝图和单元测试

    4 蓝图和单元测试: 能够使用代码实现蓝图对项目进行模块化 admin=Blueprint('admin',__name__) # 创建一个蓝图对象 @admin.route('/') def adm ...

  4. modbus4j中使用modbus tcp/ip和modbus rtu over tcp/ip模式

    通过借鉴高人博客,总结如下: 1. TcpMaster类,用于生成ModbusMaster主类 package sun.sunboat; public class TcpMaster { privat ...

  5. Had I not seen the Sun(如果我不曾见过太阳)

    Had I not seen the Sun by Emily Dickinson Had I not seen the Sun I could have borne the shade But Li ...

  6. 通用 spring cloud 微服务模板

    说明文档 功能 1. 基于映射数据库一键生成 spring cloud 微服务 2. 通用 Controller ,无需编写代码即可完成基于数据库的服务 3. 动态多条件 CRUD + 分页 使用说明 ...

  7. ffmpeg学习笔记-音频播放

    前文讲到音频解码,将音频解码,并且输入到PCM文件,这里将音频通过AudioTrack直接输出 音频播放说明 在Android中自带的MediaPlayer也可以对音频播放,但其支持格式太少 使用ff ...

  8. 【转帖】龙芯将两款 CPU 核开源,这意味着什么?

    龙芯将两款 CPU 核开源,这意味着什么? https://www.oschina.net/news/78316/loongson-open-source-two-cpu-core 文章挺不错的 也讲 ...

  9. JS利用async、await处理少见的登录业务逻辑

    在用uniapp开发一个项目时,有这样一个需求:用户首次登录后,uniapp自动保存用户名密码,之后不管是再次打开项目(打开项目时登录状态已失效)还是 请求接口(接口返回登录失效)时,都会先自动默认的 ...

  10. Linux系列(16)之系统资源的观察

    1.系统资源观察 1.观察内存使用情况:free 格式: free //默认显示的单位为KBytes,显示系统的内存容量 free  [-b | -k | -m | -g | -h]  [-t]  [ ...