中国建设银行云南省分行官方网站,大型网站制作需要什么设备,wordpress多站点不同主题,哈尔滨中企动力公司怎么样一#xff1a;简介 在 Vue.js 中#xff0c;经常会看到 this.$XXX 这种写法#xff0c;那么这个是什么呢#xff1f;其实这里就是使用 Vue.prototype 所定义的一个挂载到本身的全局方法#xff0c;主要是为了防止全局变量的污染#xff0c;所以我们来共同商议的一种写法…一简介 在 Vue.js 中经常会看到 this.$XXX 这种写法那么这个是什么呢其实这里就是使用 Vue.prototype 所定义的一个挂载到本身的全局方法主要是为了防止全局变量的污染所以我们来共同商议的一种写法。 Vue.prototype 可以用来添加一些全局的属性或方法使其在每个 Vue 实例中都可用。Vue.prototype 可以添加任何类型的属性或方法比如常量、对象、方法等。 它是就是解决 替换全局使用的一个标识。 添加全局属性 添加全局属性可以方便我们在项目中使用。例如在项目中我们需要获取当前时间戳我们可以在 main.js 中添加如下代码
Vue.prototype.$getTimestamp function () {return new Date().getTime()
} 上面的代码定义了一个名为 $getTimestamp 的全局方法可以在整个项目中使用。在组件中使用该全局方法只需在组件中使用 this.$getTimestamp 即可。
添加全局方法 添加全局方法也是同样的道理在 main.js 文件中添加如下代码
Vue.prototype.$sayHello function (name) {console.log(Hello, ${name}!)
}上面的代码定义了一个名为 $sayHello 的全局方法它接收一个参数 name可以在整个项目中使用。在组件中使用该方法只需在组件中使用 this.$sayHello(John)就可以打印出 Hello, John! 了。
二示例 下面我们通过两个示例说明 Vue.prototype 的使用。
示例一 在项目中经常会用到 Vue 的生命周期函数如 created()、mounted() 等。如果每个组件都想要执行特定的逻辑就需要在每个组件中的对应生命周期函数中实现代码会显得非常冗余。这时可以考虑将该逻辑封装到共享的函数中在 Vue.prototype 中定义该函数。
// 定义全局函数
Vue.prototype.$log function (msg) {console.log([${new Date().toLocaleString()}]: ${msg})
}// 使用全局函数
export default {created() {this.$log(组件创建成功)},mounted() {this.$log(组件挂载成功)}
}上面的代码中我们在 Vue.prototype 中定义了一个名为 $log 的全局函数用于记录每个组件的生命周期然后在组件的 created()、mounted() 生命周期中分别调用 $log() 函数。
示例二 在 Vue.js 中我们可以通过 $http 或 axios 等第三方库来进行网络请求。为了方便我们可以将其包装成插件形式通过 Vue.use() 来引入。
// 封装插件
import axios from axiosconst myPlugin {install(Vue) {Vue.prototype.$http axios}
}// 使用插件
Vue.use(myPlugin)// 在组件中使用 $http
export default {mounted() {this.$http.get(/api/users).then(response console.log(response)).catch(error console.log(error))}
}上面的代码中我们把 axios 封装成一个插件并将其添加到 Vue.prototype 中使其在每个 Vue 实例中都可用。在组件中使用 $http只需像普通的函数一样调用不需再引入和初始化 axios。
三为什么“$”开头 $ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。其实可以是任意字符比如“#”“”等都可以。
错误示例 如果代码书写如下其全局和局部定义了同一个变量名
Vue.prototype.appName My Appnew Vue({data: {// 啊哦appName *也*是一个我们定义的实例属性名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 有这种使用的情况下那么建议使用 require/import 来替换就好了大型项目使用它就比较好维护。
