Vue实例和生命周期

BitAetherPro
• 阅读 1624

创建一个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 // => 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') // true

vm.$watch('a', function(newValue, oldValue){
    //这个回调将在vm.a改变后调用
})

实例生命周期钩子

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

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

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

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
Vue3 - 响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用:创建一个响应式数据。本质:传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
Souleigh ✨ Souleigh ✨
4年前
Vue3 的 15 个常用 API
来自公众号:前端印象本文会频繁地对比Vue2来介绍Vue3,也将对各个API结合代码实例讲解,这既是对自己知识的总结,也希望能帮助到大家一、前言大家都知道,现在Vue3的各个版本已经陆续发布了,并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级,我们当然也不能落后,所以赶紧将你手中的Vue2升级到Vue3,跟着本文一起学
九路 九路
4年前
Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗?
有关系吗?没关系,面试的时候总会问如何在Vue的实例上挂载一个方法/属性,也就是Vue.prototype的小技巧,但是突然有人问他俩有啥关系还真是新鲜.(https://imghelloworld.osscnbeijing.aliyuncs.com/8accd67b8a68646ac4d99fd7297e0fbc
Easter79 Easter79
3年前
vue 生命周期的理解(created && mouted的区别)
生命周期先上图(笑skr个人~~)!(https://oscimg.oschina.net/oscnet/6d899c3576884ee9db73c0263ac9f4027e0.png)什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我
Jacquelyn38 Jacquelyn38
4年前
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用:创建一个响应式数据。本质:传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
Jacquelyn38 Jacquelyn38
4年前
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用:创建一个响应式数据。本质:传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
CuterCorley CuterCorley
4年前
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
Tankard825 Tankard825
4年前
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。5.1.Vue实例初始
Wesley13 Wesley13
3年前
02、Vue.js
1、插值    在Vue.js指令学习之前,先简单学习一下Vue插值    语法:_{{}}_,将vue实例中的数据写入到页面对应的位置。下面代码中hello、msg、num等均是在vue的data中定义的变量。1.1文本插值<div{{hello}}<div1.2HTML标签插
BitAetherPro
BitAetherPro
Lv1
夜闻归雁生乡思,病入新年感物华。
文章
3
粉丝
0
获赞
0