Vue 实例以及生命周期
最简单的 Vue 实例
//html <div id="app"> {{message}} </div> //javascript var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
由于 Vue 借鉴了 MVVM 的思想,这里的字符串 "Hello Vue!" 就相当于 Model,DOM 就相当于 View,Vue 实例 "vm" 则是起连接 Mode 和 View 作用的 ViewModel,因此我们才得以通过数据驱动视图,而不需要关心它是怎么实现的,因为 Vue 已经帮我们做好了一切。
Vue 实例内置的属性和方法都是以 "$" 开头的,例如:vm.$data、vm.$el 等,另外选项并不等于实例,选项是通过 new Vue() 构造函数时传入的参数对象,但是实例可以从暴露的接口访问某些选项的值,例如:console.log(vm.$data.message) 输出 "Hello Vue!"。
实例的生命周期
在创建实例的过程中,Vue 提供了一些生命周期钩子函数,允许我们再某一特定阶段执行一些额外的操作:
beforeCreate:
在实例初始化之后,数据绑定之前会调用这个函数,例如:
//javascript var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, beforeCreate: function() { console.log(this.message); //undefind } })
需要说明的有两点:1、这里的 "this" 指向 Vue 实例,即 "vm",2、Vue 实例同时也代理了选项中 "data" 下的所有属性,也就是说 vm.message == vm.$data.message == "Hello Vue!",但是因为在这个阶段数据并没有绑定到 Vun 实例上面,所以输出 "undefind"。在这之前数据会先保存在 vm.$options 中,如果要在这个阶段获取数据,可以先通过 vm.$options.data() 方法,返回 "data" 对象,通过 vm.$options.data().message 返回对应的值。
在这个阶段可以做一些不需要数据的工作,比如说开启全局 loading 效果。
created:
在实例创建完成,数据绑定之后会调用这个函数,此时 console.log(this.message) 输出正确的值 "Hello Vue!"。
在这个阶段,数据已经初始化为选项中的默认值,但是真实的数据还要通过 ajax 从后端数据库获取,因此这个阶段可以向后端发请求获取数据,然后绑定到对应属性上。
之后判断选项中有无 "el" 属性(作为 Vue 实例的挂载目标,在这里就是 id 为 app 的 div 标签),如果没有,则需要手动调用 vm.$mount(el) 方法指定挂载的目标;
接着判断选项中有无 "template" 属性,如果没有,则直接使用 "el" 属性指定的挂载目标,如果有,那么就用 "template" 属性指定的字符串模板替换挂载目标,挂载目标中的所有内容将被忽略;
beforeMount:
在实例挂载之前调用。
在这个阶段可以移除全局 loading 效果。
mounted:
在实例挂载之后调用。
在这个阶段页面已经加载完毕,可以对 DOM 进行操作。
beforeUpdate:
在数据更新时调用。
在这个阶段可以在数据更新前访问现有的 DOM。
updated:
在数据更新之后调用。
在这个阶段可以对更新后的 DOM 进行操作。
beforeDestroy
在实例销毁之前调用
destroy
在实例销毁之后调用
Vue 实例以及生命周期的更多相关文章
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
- 浅析vue实例的生命周期(生命周期钩子)
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- 从零开始学 Web 之 Vue.js(三)Vue实例的生命周期
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 关于Vue实例的生命周期(2)
关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...
- 7.Vue实例的生命周期
1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命 ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
随机推荐
- Android Dialogs(5)[正常显示dlg,将Fragment显示为dialog,将Aty显示为dlg,嵌入],关闭Dialog
Showing a Dialog When you want to show your dialog, create an instance of your DialogFragment and ca ...
- 了解移动用户的隐私期望:一种基于推荐的Crowdsourcing方法
应学习之需,最近一段时间阅读了一篇论文,特写下总结,若有纰漏,还望指出. 目录 引言 推荐机制 实现 评估 心得 1.1 为什么要了解移动用户的隐私期望 1.移动设备的广泛使用存在一些潜在的隐私威胁和 ...
- url传值的长度限制解决办法
今天写到两个页面传值,刚开始通过url上加参数进行传值, var strLink = "my.asp?str1=" + str1List + "&str2=&qu ...
- SQL Server xtype的介绍
sysobjects 表 在数据库内创建的每个对象(约束.默认值.日志.规则.存储过程等)在表中占一行.只有在 tempdb 内,每个临时对象才在该表中占一行. 列名 数据类型 描述 name sys ...
- pjax
下载地址: https://github.com/defunkt/jquery-pjax/find/master 使用方法: 0.先引入jquery和jquery.pjax.js 1.父页面定义区域d ...
- Shell书籍推荐
1.鸟哥私房菜 2.<Linux命令行与shell脚本编程大全> 第二本书买了,对于初学者来说一般.
- eigenface资料整合
把图片映射到能最好区分的空间(pca),在这个空间同类是聚集的,而不同类之间间隔大.这相当于一个模型,把验证集也映射到此空间,然后利用knn对验证集分类. pca:https://wenku.baid ...
- Windows命名规则
函数名: ·参照 Windows API 的命名规范. ·推荐使用动宾结构.函数名应清晰反映函数的功能.用途. ·函数名最长不得超过30个字符. ·函数名第一个字母必须大写. ·全局函数必须以小写前缀 ...
- 第2节 hive基本操作:12、hive当中的hql语法
3.2. hive查询语法 3.2.1.SELECT https://cwiki.apache.org/confluence/display/Hive/LanguageManual+Select 基本 ...
- iOS工具】rvm、Ruby环境和CocoaPods安装使用及相关报错问题解决
〇.前言 <p>在iOS开发中 CocoaPods作为库依赖管理工具就是一把利器. 有了 CocoaPods则无需再通过拖 第三方库及第三方库所依赖的 framework静态库到项目中等麻 ...