基础事例:

在vue项目main.js文件中:

Vue.prototype.$appName = 'My App'

这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

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

控制台会打印出 My App。就这么简单!

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

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

比如写成:

Vue.prototype.appName = 'My App'

在vue实例中:

new Vue({
data: {
appName: 'The name of some other app'
},
beforeCreate: function () {
console.log(this.appName)
},
created: function () {
console.log(this.appName)
}
})

日志中会先出现 "My App",然后出现 "The name of some other app",因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 $_appName或 ΩappName,来避免和插件或未来的插件相冲突。

内容来自vue官网 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

Vue.prototype的用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  3. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  4. Vue.prototype 全局变量

    有两种都是在main.js声明 第一种 main.js 声明 Vue.config.productionTip = false // mount axios Vue.$http and this.$h ...

  5. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  6. 使用Vue.prototype在vue中注册和使用全局变量

    在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...

  7. vue.prototype和vue.use的区别和注意点

    1.vue.prototype:实例上挂载属性/方法,例如Vue.prototype.axios = axios; 2.vue.use:引入插件,例如vuex,vue.use(vuex)如图,vue. ...

  8. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  9. Array.prototype.slice && Array.prototype.splice 用法阐述

    目的 对于这两个数组操作接口,由于不理解, 往往被误用, 或者不知道如何使用.本文尝试给出容易理解的阐述. 数组 什么是数组? 数组是一个基本的数据结构, 是一个在内存中依照线性方式组织元素的方式, ...

随机推荐

  1. Group共享网元

    熟悉TWaver的用户都知道Group的概念,如果是Group,那必然会出现一个网元在多组的情况,最近有客户遇到这个问题,给写了Demo,这些也跟大家分享一下如何实现,先让我们看看共享网元的效果. 熟 ...

  2. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

  3. 洛谷——P1413 坚果保龄球

    P1413 坚果保龄球 题目描述 PVZ这款游戏中,有一种坚果保龄球.zombie从地图右侧不断出现,向左走,玩家需要从左侧滚动坚果来碾死他们. 我们可以认为地图是一个行数为6,列数为60的棋盘.zo ...

  4. Python学习笔记(1)对象类型

    强制转换字符串函数str 如果我们求2的一百万次方是多少那么我们可以 print(2**1000000) 如果我们要求2的一百万次方有多少位那么我们可以用str函数强制转换成字符串然后len函数计算 ...

  5. JDK的下载---官方

    1.去到官方网站 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据箭头选择, ...

  6. MySQL6

    MySQL数据库6 1. 集群概述 性能达到瓶颈的解决方案 Scale Up 向上扩展能力,如增加更好的硬件固态磁盘,加大内存等,成本高,效果不显著 Scale Out 向外扩展,例如建立更多的服务器 ...

  7. 类与类之间的关系UML模型图

    关联.依赖.聚合.组合.泛化.实现 类之间可能存在以下几种关系:关联(association).依赖(dependency).聚合(Aggregation,也有的称聚集).组合(Composition ...

  8. Swing之登录界面

    import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Login extends JFrame ...

  9. Spring MVC--第一个程序

    项目:primary 完成功能:用户提交一个请求,服务器端处理器在接收到这个请求后,给出一条欢迎信息,在响应页面中显示该信息. (1)导入jar包 在创建好web项目后,首先导入jar包.Spring ...

  10. 对百词斩&可可英语的测试

    第六周小组作业 基本任务:功能测试和测试管理 温馨提示:本篇博客中,看不清的图片,可以按住Ctrl同时滚动鼠标滚轮查看:也可以点击图片下方的链接,在新选项卡打开后,点击小加号查看. (1)计划说明 本 ...