vue.prototype如何使用

发布时间:2022-05-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue.prototype如何使用脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

vue.PRototyPE的使用方法:通过在原型上定义使其在每个Vue的实例中可用,代码为【Vue.prototype.$appName = 'my App'】,控制台会打印出My App。

vue.prototype如何使用

本教程操作环境:windows10系统、vue2.5.2,本文适用于所有品牌的脑。

【相关文章推荐:vue.js】

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,来避免和插件或未来的插件相冲突。

相关免费学习推荐:JavaScript(视频)

以上就是vue.prototype如何使用的详细内容,更多请关注脚本宝典其它相关文章!

脚本宝典总结

以上是脚本宝典为你收集整理的vue.prototype如何使用全部内容,希望文章能够帮你解决vue.prototype如何使用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:prototype