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. javaScrip字符串(String)相关

    -----------------------------------------此页只记录前端关于String的东西----------------------------------------- ...

  2. Install Greenplum OSS on Ubuntu

    About Greenplum Database Greenplum Database is an MPP SQL Database based on PostgreSQL.  Its used in ...

  3. 软硬链接ln

    1:软链接 -- 快捷方式 I:ln -s 文件名 快捷方式的名字 文件名:使用绝对路径 II':目录也可以创建链接 2:硬链接 I: ln 文件名 硬链接的名字

  4. MySQL存储过程 事务transaction

    MySQL 中,单个 Store Procedure(SP) 不是原子操作,而 Oracle 则是原子的.如下的存储过程,即使语句2 失败,语句 1 仍然会被 commit 到数据库中: create ...

  5. MySQL高可用架构之基于MHA的搭建

    一.MySQL MHA架构介绍: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Fa ...

  6. Solr——Windows下部署Solr6.6.0至Tomcat8.5.28(一)

    一.window 环境 solr 6.6.3 下载地址 http://archive.apache.org/dist/lucene/solr/ jdk 1.8    tomcat 8.5 本机tomc ...

  7. redis中key过期事件

    刚到新公司一个月左右,有个新需求,想做定时任务,比如在用户注册时间的3天后推送用户一条消息. 从刚开始脑子里面闪现的数据库轮询,立马否定掉(浪费资源),再到linux系统的定时任务,但是当用户量过大时 ...

  8. 银行手机APP安全评估报告【转载】

    猫头鹰工作室 我不相信命运,但尊敬命运 主页 大数据 Kafka Spark Hbase Redis Flume ActiveMQ 渗透测试 方法论 Kali测试 APP安全 OWASP 脑图 Too ...

  9. js语法规则 ---console.log ---- prompt ----基本类型 ---parseInt

    在页面中可以在body里面加入type=”text/javascript” 例如: <script type="text/javascript"> </scrip ...

  10. swt text 回车 defaultSelected

    今天试了一下SWT控件 TEXT 中的回车事件,使用 defaultSelected 进行处理,结果怎么也不能触发事件. 经过仔细排查,发现是TEXT选中了 wrap 的原因,毕竟如果是多行的话,肯定 ...