基础事例:

在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. [转载] Linux Futex的设计与实现

    Linux Futex的设计与实现 引子 在编译2.6内核的时候,你会在编译选项中看到[*] Enable futex support这一项,上网查,有的资料会告诉你"不选这个内核不一定能正 ...

  2. 类模板成员函数默认值问题:an out-of-line definition of a member of a class template cannot have default arguments

    template <typename T> class A { ); }; template<typename T> ) { /* */ } 对于类似上文代码,VS编译器会报 ...

  3. Qt中实现无边框的窗体

    1 自定义窗体类继承自QWidget 2 在构造函数中设置无边框效果 setWindowFlags(Qt::FramelessWindowHint);//无边框 setAttribute(Qt::WA ...

  4. Re0:DP学习之路 数塔 HDU - 2084(基础递推)

    解法 首先是输入的问题,输入的时候还要注意每一层都有多少个 然后是怎么求解,一般求解首先要考虑顺序,是正序还是倒序 如果这个题是正序的话那么最终还需要将最后一行进行一次找max的运算 如果是倒序的话那 ...

  5. Linux 服务器 U盘安装(避免U盘启动)以及拔除U盘后无法引导系统

    一.U盘制作 首先下载两个文件: ·         rhel-server-6.3-i386-boot.iso    启动镜像 ·         rhel-server-6.3-i386-dvd. ...

  6. 51nod 1096 距离之和最小 1108 距离之和最小 V2

    [题解] 很显然在一条坐标轴上到各个点距离之和最小的点就是它们的中位数.怎么证明呢?我们假设现在找的某个点x左边有a个点,右边有b个点(a>b).我们把x向左移动d个单位,并保证x左边依然有a个 ...

  7. JUnit基本用法

    JUnit的一些注意事项: 测试方法必须使用@Test修饰 测试方法必须使用public void进行修饰,不能带参数 一般使用单元测试会新建一个test目录存放测试代码,在生产部署的时候只需要将te ...

  8. cocos2dx luajavaBridge 学习笔记

    我在网上看到了 LuaJavaBridge 的 使用方法这篇文章 https://segmentfault.com/a/1190000004252394?utm_source=tuicool& ...

  9. 推销员(codevs 5126)

    题目描述 Description 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有N家住户,第i家住户到入口的距 ...

  10. git巧妙命令行

    git cherry-pick c7081607cfd1bfa99b6e6c70c208e71fbd8767ae