vue mounted组件的使用


Posted in Javascript onJune 18, 2018

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.JS有更加深入系统的学习,可以参阅 Vue.js实战 PDF高质量扫描版 这本经典书籍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
jquery实现拖动效果
Aug 10 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
基于rollup的组件库打包体积优化小结
Jun 18 #Javascript
详解组件库的webpack构建速度优化
Jun 18 #Javascript
Javascript实现异步编程的过程
Jun 18 #Javascript
详解JS函数stack size计算方法
Jun 18 #Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
node.js自动上传ftp的脚本分享
Jun 16 #Javascript
Vue中props的使用详解
Jun 15 #Javascript
You might like
Thinkphp中Create方法深入探究
2014/06/16 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
PHP 图片处理
2020/09/16 PHP
IE8 原生JSON支持
2009/04/13 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js实现拖拽效果
2015/02/12 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
Scrapy的简单使用教程
2017/10/24 Python
Python socket聊天脚本代码实例
2020/01/02 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
基于FME使用Python过程图解
2020/05/13 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
平面设计师的工作职责
2013/11/21 职场文书
公司委托书范本5篇
2014/09/20 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
助学金感谢信
2015/01/20 职场文书
如何利用python实现Simhash算法
2022/06/28 Python