Vue.js 学习(2) -- Vue实例

淡淡的烟草味﹌ 2022-06-15 01:26 148阅读 0赞

Vue.js都是通过new Vue…创建一个Vue的根实例来开始运行的，上一节我们已经看到了很多这样格式的栗子：

var vm = new Vue({
      // ...我的代码,这里其实是传入了一个开发者定义的对象,这里暂时命名为setting。
    })

在setting中，可以定义我们需要的数据、模板、挂载元素、方法、生命周期等选项。

## data&属性： ##

Vue实例，也就是上文的vm，会代理起data对象中的所有属性，也就是，data的属性，可以用vm的属性的形式来直接访问，这样说可能不太好理解，来看一个栗子：

var data = { a: 1 }
    var vm = new Vue({
      data: data
    })
    vm.a === data.a // -> true 说明vm代理了data
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3

除了代理data，Vue实例还暴露了一些有用的实例属性和方法，但是这些实例和方法都必须以$符号开头（有点像jQuery呢），这样我们就可以区分到底是在代理data，还是在访问vm实例自己的方法：

var data = { a: 1 }
    var vm = new Vue({
      el: '#example',
      data: data
    })
    vm.$data === data // -> true
    vm.$el === document.getElementById('example') // -> true
    // $watch 是一个实例方法
    vm.$watch('a', function (newVal, oldVal) {
      // 这个回调将在 `vm.a` 改变后调用
    })

## 实例的生命周期： ##

有图有真相，图中西瓜红色的方框里的都是生命周期方法  
![生命周期图][SouthEast]

**注：文章 Vue.js学习–xxx 中的代码均来自于Vue.js官网。**

[SouthEast]: /images/20220615/53a0768bfb2e4255b81409d420bee2eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE实例2

VUE实例2 <!DOCTYPE html> <html> <head> <title>Vue Demo</title>

- 日理万妓/ 2022年12月20日 01:59/ 0 赞/ 109 阅读

相关【Vuejs】887- 深入浅出 Vue Mixin

![1745288bca3b2c242f8b84e72c766ead.png][] 作者：flyyang https://flyyang.me/2019/01/24/vue

淩亂°似流年/ 2022年11月05日 05:17/ 0 赞/ 175 阅读

相关【Vuejs】1072- Vue 3.2 有哪些新变化？

1前言 8.10号凌晨，尤雨溪在微博平台官宣 Vue 3.2 版本正式发布：![a861724f2df6df855b0c8fd9046cc130.png][] 此版本包

￡神魔★判官ぃ/ 2022年09月10日 07:22/ 0 赞/ 142 阅读

相关 VueJs学习汇总

最近更新时间：2017年6月2日16:58:06 [《我的博客地图》][Link 1] 前端的框架很多，需要不断的摸索和学习，截止20170602已经接触和使

落日映苍穹つ/ 2022年06月15日 12:11/ 0 赞/ 425 阅读

相关 Vue.js 学习(2) -- Vue实例

Vue.js都是通过new Vue…创建一个Vue的根实例来开始运行的，上一节我们已经看到了很多这样格式的栗子： var vm = new Vue({ /

淡淡的烟草味﹌/ 2022年06月15日 01:26/ 0 赞/ 149 阅读

相关 vuejs学习笔记

把一个对象所有元素打印出来对象： editRoomData: { id: "", roomNo:""

Bertha 。/ 2022年05月01日 12:10/ 0 赞/ 194 阅读

相关 vuejs入门实例讲解

vuejs是一个前端javascript框架，集各种操作和方法于一身的框架，可以取代jQuery在项目中使用，个人感觉，vue和angular框架很像，都有双向绑定的属性，也是

淩亂°似流年/ 2022年04月11日 13:54/ 0 赞/ 350 阅读

相关【Vue 学习】- VueJS 生命周期

一、概述 Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8

向右看齐/ 2021年09月21日 01:16/ 0 赞/ 420 阅读

相关【Vue 学习】- VueJS 常用系统指令

目录 1 v-on 指令 1.1 v-on:click 1.2 v-on:keydown 1.3 v-on:mouseover 1.4 事件修饰符 1.5 按键修饰

太过爱你忘了你带给我的痛/ 2021年09月21日 00:56/ 0 赞/ 569 阅读

相关【Vue 学习】- VueJS 简单入门

目录一、概述 1、Vue 介绍 2、MVVM 模式二、Vue 入门 1、使用 IDEA 开发 Vue 2、插值表达式 --------------------

末蓝、/ 2021年09月21日 00:52/ 0 赞/ 725 阅读