Vue.js实例

创建一个Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

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

选项：el、data、methods

el:

· 限制：只在由new创建的实例中遵守。

· 详细：提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是HTMLElement实例。在实例挂载后，元素可以用vm.$el访问。

如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用vm.$mount()手动开启编译。

data

· 类型：Object | Function

· 限制：组件的定义只接受function。

· 详细：Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够相应数据的变化。对象必须是纯粹的对象（含有零个或多个的key/value对）：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

实例创建之后，可以通过vm.$data访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问vm.a等价于访问 vm.$data.a。

以 _ 或 $ 开头的属性不会被Vue实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data.property 的方式访问这些属性。

当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。

· 注意：如果你为data属性使用了箭头函数，则this不会指向这组件的实例。

methods

· 类型：{ [ key:string ] : Function }

· 详细：methods将被混入到Vue实例中。可以直接通过Vmware实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。

· 注意：不应该使用箭头函数来定义method函数。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.a将是undefined。

数据与方法

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生变化时，视图将会产生“相应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。也就是说如果你添加一个新的属性，那么对它的改动将不会触发任何视图的更新。如果你知道你会再晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data:{
    newTodoText:'',
    visitCount:0,
    hideCopletedTodos:false,
    todos:[]
    error:null
}

除了数据属性，Vue实例中还有一些皆有前缀$的实例属性和方法。以便与用户定义的属性区分开，如：

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 (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

创建一个Vue实例

数据与方法

猜你喜欢