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;
});
}
}
}
});

钩子函数mounted:的更多相关文章

  1. 引入jquery利用Vue生命周期的钩子函数mounted操作DOM

    html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...

  2. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  3. Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器

    目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...

  4. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  5. vue中钩子函数的用法

    这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初 ...

  6. Vue之生命周期函数和钩子函数详解

    在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...

  7. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

  8. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  9. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

随机推荐

  1. 《Exploring in UE4》多线程机制详解[原理分析]

    转自:https://zhuanlan.zhihu.com/c_164452593 目录一.概述二."标准"多线程三.AsyncTask系统3.1 FQueuedThreadPoo ...

  2. 如何使用Python操纵Postgres数据库

    pip install psycopg2 psycopg2-binary #!/usr/bin/python import psycopg2conn = psycopg2.connect(databa ...

  3. vue2.0-组件传值

    父组件给子组件传值,子组件用props接收 例子:两个组件,一个是父组件标签名是parent,一个是子组件标签名是child,并且child组件嵌套在父组件parent里,大概的需求是:我们子组件里需 ...

  4. Mysql 中获取刚插入的自增长id的值

    insert into user (username,password) VALUES ('); //获取刚插入的自增长id的值 select last_insert_id(); 在MySQL中,使用 ...

  5. CS229 6.6 Neurons Networks PCA主成分分析

    主成分分析(PCA)是一种经典的降维算法,基于基变换,数据原来位于标准坐标基下,将其投影到前k个最大特征值对应的特征向量所组成的基上,使得数据在新基各个维度有最大的方差,且在新基的各个维度上数据是不相 ...

  6. jmeter插件如何协助进行内存监控 之 PerfMon Metrics Collector设置

    参考文章: http://www.cnblogs.com/zhaoxd07/p/5197669.html 当然最重要的是自己的实践,之前试的别人用的老的包 如XXstand.jar,结果并没有成功. ...

  7. WPF 自定义分页控件二

    一:添加自定义分页控件,命名为KDataPagerTwo: public class KDataPagerTwo : Control, INotifyPropertyChanged { static ...

  8. 最简单的DHCP服务

    这几天在准备网络安装linux操作系统.最后决定用pxe + kickstart 的方式完成.原理.方案弄完了之后,开始搭建,结果被DHCP给挡住了.这不就得研究研究最简单最实用的DHCP使用方法. ...

  9. 20165205 实验一 java开发环境的熟悉 实验报告

    20165205 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:刘喆君 学号:20165205 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...

  10. couchdb

    http://docs.couchdb.org/en/2.0.0/api/database/find.html#find-selectors