参考地址: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. linux服务端导入oracle数据库.sql脚本

    一般情况下,后缀名为.sql或者为记事本类型的文本脚本可以通过打开后复制或者直接在客户端打开执行,但如果脚本比较大时(比如文件达到几百M以上), 普通文本工具和数据库客户端都无法打开,哪怕可以打开,也 ...

  2. BUUCTF-writeup

    Reverse RSA 使用openssl模块 rsa -pubin -text -modulus -in pub.key得到n值,在 factordb.com上分解大素数得到p,q值,脚本生成pri ...

  3. 11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局

    /* Flutter 页面布局 Stack层叠组件: Stack与Align Stack与Positioned实现定位布局: Flutter Stack组件: Stack表示堆得意思,我们可以用Sta ...

  4. php错误机制总结

    转 http://www.cnblogs.com/yjf512/p/5314345.html

  5. java工具类学习,系统中用户密码加密总结

    现在项目,用户注册登录部分很少有涉及到了,原因:现在热门开发框架都已经在底层帮我们做了一套用户注册,密码加密,登录认证,权限控制,缓存数据等基本功能. 这有利于项目的快速完成,只需要搬砖码畜们专注于业 ...

  6. JDK1.8新特性之Optional

    概念 Optional 是JDK1.8中出现的一个容器类,代表一个值存在或者不存在.原来使用null表示一个值不存在,现在Optional可以更好的表达这个概念.并且可以避免空指针异常. 场景分析 需 ...

  7. Java学习笔记-基础语法

    Java基础包含关键字,标识符,注释,常量和变量,运算符 关键字 关键字的定义和特点 定义:被Java语言赋予了特殊含义的单词 特点:关键字中所有字母都为小写 Java的关键字 用于定义数据类型的关键 ...

  8. 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用

    目录 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...

  9. chrome 监听touch类事件报错:无法被动侦听事件preventDefault

    先上错误信息: Unable to preventDefault inside passive event listener due to target being treated as passiv ...

  10. [转帖]密钥库文件格式(Keystore)和证书文件格式(Certificate)

    密钥库文件格式[keystore]代码 https://blog.csdn.net/zzhongcy/article/details/22755317 格式 : JKS 扩展名 : .jks/.ks ...