• 技术文章 >web前端 >Vue.js

    vue.prototype如何使用

    coldplay.xixicoldplay.xixi2020-11-30 17:03:42原创42

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

    本教程操作环境: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如何使用的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:vue.prototype prototype
    上一篇:vue.js指令是什么 下一篇:vue.js中怎么添加favicon图标
    第14期线上培训班

    相关文章推荐

    • Javascript中prototype与__proto__的关系详解• JS面向对象、prototype、call()、apply()• prototype属性怎么用• js中prototype是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网