2vue对象

Posted 2020-10-14 克维拉

 

Vue对象属性1data

 

var data = { a: 1 }

 

// 该对象被加入到一个 Vue 实例中

var vm = new Vue({

  data: data

})

 

他们引用相同的对象

当这些数据改变时，视图会进行重渲染，值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。

也就是说如果你添加一个新的属性，像：

vm.b = ‘hi‘

 

但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {

  newTodoText: ‘‘,

  visitCount: 0,

  hideCompletedTodos: false,

  todos: [],

  error: null

}

 

 

2vue别的属性和方法

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

// $watch 是一个实例方法

vm.$watch(‘a‘, function (newValue, oldValue) {

  // 这个回调将在 `vm.a` 改变后调用

})

 

3vue生命周期的钩子

 

new Vue({

  data: {

    a: 1

  },

  created: function () {比如 created 钩子可以用来在一个实例被创建之后执行代码：

    // `this` 指向 vm 实例

    console.log(‘a is: ‘ + this.a)钩子的 this 指向调用它的 Vue 实例。

 

 

  }

})

也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。