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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js 数组操作代码集锦
Apr 28 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
深入理解python协程
2021/06/15 Python