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> ...
随机推荐
- 十个Python爬虫武器库示例,十个爬虫框架,十种实现爬虫的方法!
一般比价小型的爬虫需求,我是直接使用requests库 + bs4就解决了,再麻烦点就使用selenium解决js的异步 加载问题.相对比较大型的需求才使用框架,主要是便于管理以及扩展等. 1.Scr ...
- socket常见问题
socket编程中主动关闭VS被动关闭 tcp中server,client都可能是主动关闭方或者被动关闭方,现阐述下两者之间的关系: 客户端(client) ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_08-vuejs研究-vuejs基础-v-if和v-for指令
1.2.4 v-if和v-for <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Qt编写安防视频监控系统4-删除视频
一.前言 一般会有两种处理方式来删除视频,一种是鼠标右键菜单,删除当前视频或者删除所有视频,一种是直接按住当前视频,移到视频通道界面以外就表示删除当前视频,这也是个比较人性化的设置,每个人的喜好不一样 ...
- JAVA 基础编程练习题48 【程序 48 加密】
48 [程序 48 加密] 题目:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密 规则如下:每位数字都加上 5,然后用和除以 10 的余数代替该数字,再将第一位和第四位交 ...
- 使用STM32F103ZET霸道主板实现SD卡的读写(非文件系统)
了解STM32F103ZET是高容量多管脚的芯片 了解SD读写线路图 了解SD的基地址 阅读STM32F10xx英文参考 SDIO那章,我们编写代码边看文档解析 建工程,打开包含所有包括外设库函数的样 ...
- OpenGL学习(3)——Shader(补)
完成章节后练习. 练习 1. Adjust the vertex shader so that the triangle is upside down. #version 330 core layou ...
- from提交数据,高级选择器,伪类选择器,前端样式等
1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...
- golang语言sql Rows转化保存成map
func DoQuery(db *sql.DB, sqlInfo string, args ...interface{}) ([]map[string]interface{}, error) { ro ...
- 【LOJ】#3096. 「SNOI2019」数论
LOJ#3096. 「SNOI2019」数论 如果\(P > Q\)我们把\(P\)和\(Q\)换一下,现在默认\(P < Q\) 这个时候每个合法的\(a_i\)都可以直接落到\(Q\) ...