Vue实例和生命周期

创建一个Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始：

var vm = new Vue({//选项
})

数据与方法

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这个属性的值发生变化时，视图将产生"响应"，即匹配更新后的值。

//我们的数据对象
var data = {a: 1}//该数据对象加入到vue实例中
var vm = new Vue({data: data
})//获得这个实例上的属性
//返回源数据中对应的字段
vm.data == data.a // =&gt; true//设置属性也会影响
vm.a = 2
data.a //2

值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

除了数据属性，Vue实例还暴露一些有用的实例属性和方法，他们都有$前缀，以便与用户定义的属性区分开来。

var data = {a: 1}
var vm = new Vue({el: '#example',data: data
})vm.$data === data // true
vm.$el === document.getElementById('example') // truevm.$watch('a', function(newValue, oldValue){//这个回调将在vm.a改变后调用
})

实例生命周期钩子

created()可以用来在一个实例被创建之后执行代码。

生命周期钩子的this上下文指向调用它的Vue实例。

关于生命周期的可以接我另外一篇文章：https://segmentfault.com/a/11...

原文地址：https://segmentfault.com/a/1190000016836774

更多专业前端知识，请上【猿2048】www.mk2048.com

Vue实例和生命周期相关推荐

Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
vue实例的生命周期详解
Vue实例的生命周期简介此篇文章说的是最简单的单个VUE组件的生命周期. 官网中的长图诠释了Vue实例从创建,运行到销毁的整个过程.从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这 ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）
1.Vue实例 new Vue()创建一个Vue实例所有的组件其实都是Vue实例 2.Vue实例的生命周期钩子每个Vue实例在被创建时都要经过一系列的初始化过程初始化过程 created() 组 ...
vue 请求在子组件加载后了_从零单排vue第九课--Vue实例及生命周期
前期回顾上一节课我们重点学习了子组件如何与父组件通信,我们使用$emit方法在子组件中触发一个事件,然后在父组件中接收它.本节课我们来深入了解下vue实例以及它的生命周期是怎么样的? 创建一个Vue ...
关于Vue实例的生命周期created和mounted的区别
关于作者程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发.合适和够用是最完美的追求. 个人网站:http://w ...
vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue ...

Vue实例和生命周期

创建一个Vue实例

数据与方法

实例生命周期钩子

Vue实例和生命周期相关推荐

最新文章

热门文章