vue mounted组件的使用
更新时间：2018年06月18日 10:34:56 作者：EffIdong
这篇文章主要介绍了vue mounted组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1.钩子函数
钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科）
2.相对于前端来讲
对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。
3.vue中的mounted
在这发起后端请求，拿回数据，配合路由钩子做一些事情
类型：Function
详细：
el被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内
该钩子在服务器端渲染期间不被调用。
4.代码实例
new Vue({
el: '#app',
data: {
totalMoney: 0,
productList: []
},
filters: {
},
mounted: function() {
//这个是钩子函数
//如果cartView函数要执行，必须先执行钩子函数
//这个钩子函数完成了对cratView函数的调用
//应该注意的是，使用mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick
this.$nextTick(function () {
this.cartView()
})
})
},
methods: {
//这个是要执行的函数
cartView: function() {
var _this = this;
this.$http.get("data/cartData.json", {"id": 123}).then(function(res) {
_this.productList = res.body.result.list;
_this.totalMoney = res.body.result.totalMoney;
});
}
}
}
});
如果大家想对VUE.JS有更加深入系统的学习，可以参阅 Vue.js实战 PDF高质量扫描版 这本经典书籍
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3子组件向父组件传递消息,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue中对时间戳的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧2022-12-12
这篇文章主要介绍了Vue3在jsx下父子组件实现使用插槽方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。这篇文章给大家介绍Vue仿手机qq的实例代码，需要的的朋友参考下吧2017-09-09
今天小编就为大家分享一篇解决vue props 拿不到值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了ue-admin-template动态路由的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了Element Backtop回到顶部的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章介绍了vue.js实现开关(switch)组件的实例代码，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue 弹框产生的滚动穿透问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论