Vue.prototype的用法
基础事例:
在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的用法的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- Vue.prototype 全局变量
有两种都是在main.js声明 第一种 main.js 声明 Vue.config.productionTip = false // mount axios Vue.$http and this.$h ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- 使用Vue.prototype在vue中注册和使用全局变量
在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...
- vue.prototype和vue.use的区别和注意点
1.vue.prototype:实例上挂载属性/方法,例如Vue.prototype.axios = axios; 2.vue.use:引入插件,例如vuex,vue.use(vuex)如图,vue. ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- Array.prototype.slice && Array.prototype.splice 用法阐述
目的 对于这两个数组操作接口,由于不理解, 往往被误用, 或者不知道如何使用.本文尝试给出容易理解的阐述. 数组 什么是数组? 数组是一个基本的数据结构, 是一个在内存中依照线性方式组织元素的方式, ...
随机推荐
- Deepin系统关于每次启动终端都要输入source /etc/profile的问题
关于每次启动终端都要输入source /etc/profile的问题 当我在Deepin系统中下载了node以及npm之后,我为了将node导入到系统文件,使用了以下命令sudo gedit ``/e ...
- 关于fragment+viewpager的优化
上次写了一个问答项目,用的fragment+viewpager架构,后来发现,划了几次之后,再划回来,会重新加载布局,重新获取数据,这样整个程序和卡,并且占用太多的网络资源. 当时的解决办法是,自己重 ...
- 题解 洛谷P3203/BZOJ2002【[HNOI2010]弹飞绵羊】
裸的LCT,关键是要怎么连边,怎么将这种弹飞关系转化成连边就行了. 那么我们可以这样连边: 一个节点i的爸爸就是i+ki. 没有i+ki那么就被弹飞了,即\(i\)的爸爸是虚拟节点n+1. 那么怎么求 ...
- selenium的调用
selenium的调用 制作人:全心全意 selenium调用谷歌浏览器 chrome = webdriver.Chrome() //创建谷歌浏览器对象 url="http://www.ba ...
- calculate Cp history (from Fluent) using Matlab
input data : unscaled time history of moment/thrust from ANSYS fluent example of input data, "m ...
- 【Codeforces 382C】Arithmetic Progression
[链接] 我是链接,点我呀:) [题意] 让你在n个数字中再加入一个数字 使得这n+1个数字排序之后 相邻两个数字的差都相同 [题解] 注意相邻为0的情况 这种情况 只有全都相同才行 只有一种情况 然 ...
- Java基础学习总结(77)——Java枚举再总结
在Java SE5之前,我们要使用枚举类型时,通常会使用static final 定义一组int常量来标识,代码如下 public static final int MAN = 0; public s ...
- nyoj 8 一种排序(用vector,sort,不用set)
一种排序 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数 ...
- HDU 1210
感觉就是乱搞找规律 自己写几组数据 本来开始是想着把 n 个数字每次回到原来位置各需要多少次,然后取它们的最小公倍数就好了 但是数据写着写着发现每一个数回到原来位置次数都是一样的,那么就简单了,直接第 ...
- A multiprocessing system including an apparatus for optimizing spin-lock operations
A multiprocessing system having a plurality of processing nodes interconnected by an interconnect ne ...