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: ,
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": }).then(function(res) {
_this.productList = res.body.result.list;
_this.totalMoney = res.body.result.totalMoney;
});
}
}
}
});

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. 1.MySQL基础架构

    好久没发博客了,终于又学完了一点知识并且进行了整理.就从这个MySQL系列开始继续坚持每个月产出几篇. 声明一下,这次的MySQL系列是针对已有一定基础的小伙伴的,关于SQL的使用,一些概念的介绍就不 ...

  2. leetcood学习笔记-171-excel表列序号

    题目描述: 方法: class Solution: def titleToNumber(self, s: str) -> int: num = 0 r = 1 for i in s[::-1]: ...

  3. Batch - %~dp0 modifiers

    %~dp0 简易解释 The variable %0 in a batch script is set to the name of the executing batch file. The ~dp ...

  4. delphi获得文件大小

    大概有这些方法可以获得文件大小 FileSizeByName(需要引用IdGlobal单元) GetFileSize FileSize(不能获得正在使用的文件大小) FileSeek TFileStr ...

  5. 【缓存】缓存穿透、缓存雪崩、key重建方案

    一.缓存穿透预防及优化 缓存穿透是指查询一个根本不存在的数据,缓存层和存储层都不会命中,但是出于容错的考虑,如果从存储层查不到数据则不写入缓存层,如图 11-3 所示整个过程分为如下 3 步: 缓存层 ...

  6. 牛客网 NOIP赛前集训营-普及组(第四场)C--部分和 (高维前缀和)

    传送门 解题思路 高维前缀和模板题.首先,求前缀和有两种方式,比如说对于求二维前缀和来说. 第一种 : for(int i=1;i<=n;i++) for(int j=1;j<=n;j++ ...

  7. NX二次开发-UFUN获取对象的显示属性(图层,颜色,空白状态,线宽,字体,高亮状态)UF_OBJ_ask_display_properties

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> UF_initialize( ...

  8. NX二次开发-NX11创建表达式组NXOpen::ExpressionGroup

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_part.h> #include < ...

  9. [JZOJ 5812] 区间

    题意:求经过多少次操作可以使得序列达到给定状态. 思路: 好像和\(CF\)某次比赛的题差不多啊... 差分统计每个点的值,将临近的\(+1\)和\(-1\)匹配即可. #include <bi ...

  10. 知识整理:字符串hash

    字符串hash唯一用途是快速判断两字符串是否相等,但存在极小概率假阳性(本来不相等,但算法返回相等). 根本思想是把一个字符串转换为一个整数,要求相同的字符串,对应的这个整数相同,不同的字符串,对应的 ...