Vue.js开发基础 05
生命周期？
生命周期：vue实例从创建到销毁的一系列过程
在每个周期中被自动调用的函数叫做生命周期函数，也叫
钩子函数
作用：在实例被创建到被回收的整个过程中，会在不同
的时期有不同的钩子函数，我们可以使用不同时期的
钩子函数做完成不同的操作
vue中的生命周期分3个阶段：初始阶段，更新阶段，销毁阶段
生命周期中的this指向的都是实例本身
<body><div id ="example">{{message}}</div><script src="vue.js"></script><script>var vm = new Vue({el:'#example',data :{message:'match'},beforCreate(){//实例初始化之前，初始自己的生命周期console.log('beforCreate');},created() { // 挂载data中的数据，响应式的数据变化，观察数据(getter,setter)console.log('created');},beforeMount() { // dom元素挂载之前console.log('beforeMount'); },mounted() { // dom元素渲染之后console.log('mounted');},beforeUpdate() { // 数据更新之前执行,前提是更新的数据被使用了.console.log('beforeUpdate');},updated() { // 数据一更新就会触发console.log('updated');} ,beforeDestroy() { // 销毁前触发console.log('beforeDestroy');},destroyed() { // 销毁后执行// 此时销毁，响应式的数据没有了，实例还在console.log('destroyed');}})</script></body><body><div id="app"><button @click="msg ='哈哈哈哈'">修改msg的值</button> <input type="text" v-model="msg"> <p>{{ msg }}</p> <select v-model="fruit"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select><input type="checkbox" v-model="chk"></div><script src="./vue.js"></script> <script> new Vue({ el:'#app', data: { msg: '',fruit:'',chk:true }
})</script></body>
Vue.js开发基础 05相关推荐
- mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- h5+js调取相机做取景框_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- 使用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...
- Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
- 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
2019独角兽企业重金招聘Python工程师标准>>> ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方 ...
- 【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
- js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...
- Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
- java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署 本源码技术栈: ...
最新文章
- Golang用body来get或post数据
- linux 安装lnmp
- 俄亥俄州立大学计算机科学排名,俄亥俄州立大学CS专业排名2020年
- mqtt异步publish方法
- 『操作系统』 进程的描述与控制 Part3 管程
- DDD战略设计相关核心概念的理解
- 对IplImage 结构体的理解
- pythonwebview自动化测试_GitHub - githubwzg/python-appium: 基于PageObject UI自动化测试框架，支持Android/iOS...
- 学生管理系统分层开发
- 2011年度最佳开源软件：Bossie奖结果公布
- vue Class 与 Style 绑定
- perl system函数返回值问题
- 自己写的主从查询代码
- OC中关于NSDate详解及获取当前时间等常用操作
- oracle的varchar用法,以VARCHAR2作为key的索引表的使用
- 190812每日一句
- automation服务器不能创建对象的终极解决办法！
- 工业镜头与普通镜头有什么区别？
- java获取虾米数据_json获取属性值的方式
- VMware软件虚拟机不能全屏