vue学习三:生命周期钩子
生命周期钩子介绍:
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
这个生命周期钩子函数可以在官网上看到,只要记住最重要的mounted就可以了,是html进行发送请求后台进行数据交互的钩子函数:
这个生命周期函数的图片是可以在官网上看到的,所以可以进行官网进行理解:
比如 created
钩子可以用来在一个实例被创建之后执行代码:
new Vue({
data: {
a:
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted
、updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数,比如
created: () => console.log(this.a)
或 vm.$watch('a', newValue => this.myMethod())
。
因为箭头函数是和父级上下文绑定在一起的,this
不会是如你所预期的 Vue 实例,
经常导致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function
之类的错误。
vue学习三:生命周期钩子的更多相关文章
- Vue学习之生命周期钩子小结(四)
一.生命周期钩子(函数): 1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运 ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- vue学习之五生命周期
一.vue生命周期图解 下图展示了实例的生命周期.你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高. 二.vue钩子函数使用 2.1beforeCreate 在实例初始 ...
- Vue项目的创建、路由、及生命周期钩子
目录 一.Vue项目搭建 1.环境搭建 2.项目的创建 3.pycharm配置并启动vue项目 4.vue项目目录结构分析 5.Vue根据配置重新构建依赖 二.Vue项目创建时发生了什么 三.项目初始 ...
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue组件的生命周期
先来张组件生命周期的示意图: 文档里是这样描述的:你不需要立马弄明白所有的东西,不过以后它会有帮助.传送门. Vue2.0的生命周期钩子一共有10个,同样结合官方文档作出了下表 生命周期钩子 详细 b ...
随机推荐
- Windows安装mysql 5.7.*.zip步骤
1.去官网上下载.zip格式的文件. 2.解压到一个文件夹,这里我用D:\MySql表示 3.在D:\MySql\mysql-5.7.17-winx64下新建my.ini配置文件 黄色背景色的地方需要 ...
- kvm iptables 3306端口
# iptables -t nat -A PREROUTING -p TCP --dport 3306 -j DNAT --to-destination 192.168.122.102:3306# i ...
- Eclipse一步一步搭建SSM+Maven
Eclipse 搭建SSM(Spring.Spring MVC .Mybatis) 利用Maven管理Jar包 一般而言,新的eclipse都已经集成了maven,如果没有那么 ...
- 【274】Python 相关问题
一.中文编码 参考:Python 中文编码 Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字,所以在读取中文时会报错. 解决方法为只要在文件开头加入如下代码,任 ...
- day17-jdbc 2.jdbc介绍
SQL是一种非过程性语言,只能写一条嘛,你写多条不行嘛.每个数据库都有自己的存储过程.你可以做编程,你可以写多条SQL语句把它放到一起.这就是存储过程.然后用的时候一调它就执行这个逻辑结构了.因为多条 ...
- cocos2dx中的内存管理方式
转载:http://www.cocoachina.com/bbs/read.php?tid=195219 今天看了一下cocos2dx的内存管理机制,有些地方不太好理解搞了挺长的时间,现在感觉自己理解 ...
- Opengl创建机器人手臂代码示例
/*******************************************************robot.cpp*基于opengl的机械手臂示例代码*s:机械臂逆时针旋转*S:机械臂 ...
- DPDK内存管理-----rte_mbuf(转)
本文主要介绍rte_mbuf与rte_mempool数据结构之间的组织关系.以及网卡接收到的数据是如何存储在rte_mbuf中的. 一.rte_mbuf.rte_mempool及网卡收到的数据包在内存 ...
- PCL —— RCNN Family 中层次点云处理
博客转载自:http://www.cnblogs.com/ironstark/p/6046411.html RCNN是从图像中检测物体位置的方法,严格来讲不属于三维计算机视觉.但是这种方法却又非常非常 ...
- 10.model/view实例(1)
1.如图显示一个2x3的表格: 思考: 1.QTableView显示这个表 2.QAbstractTableModel作为模型类. 3.文档中找到subclass的描述 When subclassin ...