vue mounted组件的使用
2023-09-27 14:23:16 时间
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—怎样使用组件,组件基础,轻松入门Vue(四)
- 带你用VUE实现上传图片效果
- vue组件传值 递增次数传递bug修复
- vue组件之子组件和父组件
- 【Vue 快速入门系列】组件的基本使用
- Vue 中 的 mixin 混入(合)
- vue中$once的使用
- 精品微信小程序ssm家校通系统+后台管理系统|前后分离VUE
- 138.(前端)数据统计显示图表——vue子组件的挂载与echarts基本效果实现
- 17.(前端)vue-cmd创建项目
- vue iframe嵌套外部网页
- Vue学习笔记之Vue的使用
- vue中的组件
- Vue中通过鼠标移入移出来添加或取消class样式(active)
- Vue中非父子组件传值的问题
- 修改vue中<router-link>的默认样式
- vue 2.0使用动态组件实现tab切换效果
- vue项目实战:页面公共组件的全局注册动态引入的考虑
- vue组件封装及父子组件传值,事件处理
- vue-router 快速入门
- 致敬 React: 为 Vue 引入容器组件和展示组件
- 这些vue技巧你肯定不知道
- Vue拖拽组件开发实例
- 基于Vue 2和高德地图的地图组件 - vue-amap
- 利用webpack和vue实现组件化
- vue-resource插件使用