当前位置: 首页 > news >正文

Vue.js 2.0 实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:

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

虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档 中查看。

可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器

var MyComponent = Vue.extend({// 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

尽管可以命令式地创建扩展实例,不过在多数情况下建议将组件构造器注册为一个自定义元素,然后声明式地用在模板中。我们将在后面的“组件系统”中详细说明。现在你只需知道所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性:

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

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。我们将在后面详细讨论响应系统。

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

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`  改变后调用
})

注意,不要在实例属性或者回调函数中(如 vm.$watch('a', newVal => this.myMethod()))使用箭头函数。因为箭头函数绑定父上下文,所以 this 不会像预想的一样是 Vue 实例,而是 this.myMethod 未被定义。

实例属性和方法的完整列表中查阅 API 参考。

实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

var vm = new Vue({data: {a: 1},created: function () {// `this` 指向 vm 实例console.log('a is: ' + this.a)}
})
// -> "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、 updated、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。

 

http://www.lryc.cn/news/56116.html

相关文章:

  • 安全技术和iptables防火墙
  • StringBuilder和StringBuffer的区别
  • 美团大数据开发转正实习面经(已OC)
  • leedcode刷题(2)
  • 0119 磁盘分区、挂载
  • 【独家】华为OD机试 - 打折买水果(C 语言解题)
  • python使用args,kwargs
  • 20230408英语学习
  • ReplacingMergeTree
  • Java核心技术知识点笔记—集合(二)
  • Sharepoint Online手工迁移方案 | 分享二
  • MVC获取当前区域、控制器、Action
  • 第十六章 脚手架文件介绍
  • 基于Clion开发(stm32移植FreeRTOS+LVGL)
  • Python | 蓝桥杯进阶第三卷——动态规划
  • 蓝桥杯31天真题冲刺|题解报告|第二十九天
  • [Rust GUI]fltk-rs的helloworld
  • 蓝桥杯真题05
  • PMP那些事儿,备考小白看过来
  • 【数据分析实战】基于python对酒店预订需求进行分析
  • 【新2023Q2模拟题JAVA】华为OD机试 - 数组的中心位置
  • Vue的props组件详解
  • 抽烟行为识别预警系统 yolov5
  • 【0基础学爬虫】爬虫基础之文件存储
  • airflow源码分析-任务调度器实现分析
  • 一文学会数组的reduce()和reduceRight()
  • 登录校验-Filter
  • C C++ Java python 分别写出不同表白girlfriend的爱心动态代码实现
  • ThreeJS-投影、投影模糊(十七)
  • 蓝桥杯赛前冲刺-枚举暴力和排序专题1(包含历年蓝桥杯真题和AC代码)