More than code
Welcome to the website

Vue详解2-实例(基础篇)

1.构造器

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

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

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

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

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

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

2.属性与方法

每个 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 未被定义。

3.实例生命周期

每个 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"

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mountedupdateddestroyed 。钩子的 this 指向调用它的 Vue 实例

Vue.js 没有“控制器”的概念,组件的自定义逻辑可以分布在这些钩子中。

4.生命周期图示

下图说明了实例的生命周期

 

赞(0) 打赏
未经允许不得转载:李帅帅空间 » Vue详解2-实例(基础篇)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    开发Mobile页面,搜索框在真机测试时,得到焦点会使整个搜索框变大。如何解决?2.手指在屏幕上左右滑动时,页面会跟随导航栏变。这效果如何实现?跪求。。。[/握手]

    憶昔年1年前 (2017-06-28)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏