1.钩子函数 

钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。(百度百科)

2.相对于前端来讲 

对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行。

3.vue中的mounted 

在这发起后端请求,拿回数据,配合路由钩子做一些事情

类型:Function

详细:

el被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内 
该钩子在服务器端渲染期间不被调用。

4.代码实例

  1. new Vue({
  2. el: '#app',
  3. data: {
  4. totalMoney: ,
  5. productList: []
  6. },
  7. filters: {
  8. },
  9. mounted: function() {
  10. //这个是钩子函数
  11. //如果cartView函数要执行,必须先执行钩子函数
  12. //这个钩子函数完成了对cratView函数的调用
  13. //应该注意的是,使用mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick
  14. this.$nextTick(function () {
  15. this.cartView()
  16. })
  17. })
  18. },
  19. methods: {
  20. //这个是要执行的函数
  21. cartView: function() {
  22. var _this = this;
  23. this.$http.get("data/cartData.json", {"id": }).then(function(res) {
  24. _this.productList = res.body.result.list;
  25. _this.totalMoney = res.body.result.totalMoney;
  26. });
  27. }
  28. }
  29. }
  30. });

vue mounted组件的使用的更多相关文章

  1. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  2. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  3. vue的组件详解

    什么是组件 组件(Component)是 Vue.js 最强大的功能之一.(好比电脑中的每一个元件(键盘,鼠标,CPU),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行互相融合,变 ...

  4. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  5. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  6. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  7. vue 同一个组件的跳转, 返回时保留原来的下拉位置

    1,需求分析 公司的项目有这样一个需求: 同一个list组件,根据传过来的listId渲染成多个页面,每个页面都可以下拉.在返回到不同的list页面时,要保留当时下拉的位置. 说的我自己都有点懵逼了, ...

  8. vue父子组件生命周期函数执行顺序

    vue父组件加载和销毁执行最后一个钩子函数之前先执行一遍子组件的钩子: 1.加载 父:beforecreate-created-beforeMount-(子:beforecreate-created- ...

  9. vue的组件传输

    vue的组件传输有四种,我个人觉得pubsub(订阅/发布)是最好用的,因为他不用去考虑关系,所以我们下面就只讲解pubsub吧 1) 优点: 此方式可实现任意关系组件间通信(数据)   首先我们需要 ...

随机推荐

  1. ConcurrenHashMap介绍1.8 中为什么要用红黑树

    java8不是用红黑树来管理hashmap,而是在hash值相同的情况下(且重复数量大于8),用红黑树来管理数据. 红黑树相当于排序数据.可以自动的使用二分法进行定位.性能较高. 在Concurren ...

  2. Android开发 MediaPlayer播放本地视频完善的demo(只是代码记录)

    xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.w ...

  3. laravel passport client_credentials

    我是使用 Laravel 5.4 + Dingo Api + passport/jwt 两个验证方式 目前需要用到 passport 的 client_credentials 获取 token成功之后 ...

  4. 【BZOJ 3569】DZY Loves Chinese II

    题面 Description 神校XJ之学霸兮,Dzy皇考曰JC. 摄提贞于孟陬兮,惟庚寅Dzy以降. 纷Dzy既有此内美兮,又重之以修能. 遂降临于OI界,欲以神力而凌♂辱众生. 今Dzy有一魞歄图 ...

  5. 16. 继承(extends)

    1.语法 class 类名1 extends 类名2{ //成员变量和成员方法 } 2.继承要注意的事项: 1)千万不要为了减少重复代码而去继承,只有真正存在着继承关系的时候才去继承. 2)父类私有的 ...

  6. Spring Boot 2.X 对 web 的开发支持(二)

    Spring Boot 2.X 对 web 的支持开发 上章节的 Spring Boot 的入门案例,我们感受到 Spring Boot 简单的配置即可运行项目. 今天了解 Spring Boot 对 ...

  7. leetcode-159周赛-5233-规划兼职工作*

    方法: class Solution: def jobScheduling(self, startTime: List[int], endTime: List[int], profit: List[i ...

  8. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  9. JVM虚拟机瓜分内存原则

    操作系统分配给每个进程的内存是有限制的,例如32位的Windows限制为2GB.虚拟机提供了参数来控制java堆和方法区(非堆)这两部分内存的最大值.则剩余的内存为2GB(操作系统限制)减去Xmx(最 ...

  10. PAT_A1086#Tree Traversals Again

    Source: PAT A1086 Tree Traversals Again (25 分) Description: An inorder binary tree traversal can be ...