Vue.prototype详解
参考地址: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详解的更多相关文章
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- vue实例详解
Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue实例详解与生命周期
http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...
- vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
- vue v-for详解
1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists"> <div> ...
随机推荐
- PHP + Smarty + MySQL
Help me please! How to transfer data from table to smarty? Function: public function getBanLog() { g ...
- Eclipse安装Spring Tools Suites
第一种:离线安装 下载地址:较高版本 http://spring.io/tools/sts/all/ 比较低版本:http://spring.io/tools/ggts/all 选择适合自己Eclip ...
- PostgreSql 使用自定义序列(Sequence)向表插入数据
最近公司使用到了PostgreSql,哈哈,这个SQL之前基本上没有用过,既然公司使用到了,那就学习一下吧,记一篇小笔记: 什么是PostgreSql:https://www.postgresql.o ...
- Spring Security(1):认证和授权的核心组件介绍及源码分析
Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方式的安全框架.它包括认证(Authentication)和授权(Authorization)两个部 ...
- iOS实现图片无限轮播之使用第三方库SDCycleScrollView(转)
下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView #import "ViewController.h" # ...
- kdd cup 2019
比赛简介: 任务1:推荐最佳交通方式 任务描述:给定用户的一些信息,预测用户使用何种最佳交通方式由O(起点)到D(终点) 数据描述: profiles.csv: 属性pid:用户的ID: 属性p0~p ...
- QFramework 使用指南 2020 (四):脚本生成(2)ViewController 与 ViewController 嵌套绑定
在上一篇,我们学习了,脚本生成的基本使用. 在这一篇,我们试着深入,聊聊脚本生成给我们带来的便利. 脚本生成的便利 首先,我们要知道,在 Unity 的游戏世界中都是以 GameObject 为单位的 ...
- 最新 映客java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.映客等10家互联网公司的校招Offer,因为某些自身原因最终选择了映客.6.7月主要是做系统复习.项目复盘.LeetCode ...
- 最新 朗玛信息java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.朗玛信息等10家互联网公司的校招Offer,因为某些自身原因最终选择了朗玛信息.6.7月主要是做系统复习.项目复盘.Leet ...
- Spring 工程分层