“面向开发文档学习”之Vue基础（一）数据与方法

Vue基础之数据处理

接触前端开发近两个月，一直没有能够完全系统的学习vue，而是通过网上的教程以及通过练习简单的项目来进行学习。突然想到前辈所说的基础之重要，决定开始一点点捡漏，把之前vue学习遗漏的基础补上。

data

1.开发文档是如是介绍data：当一个 Vue 实例被创建时，它将 data 对象中的所有的 property（所有物） 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data  //这里要注意的是前面的data是vm对象的一个属性，而后面的data是在外面定义的一个data以对象的形式传入
})

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

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

当我们使用vm.a去找到vm中的a属性并且将其修改后a的值就发生了改变。当然用data.a进行修改也是一样的。
2.除了数据 property（所有物），Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀== $==，以便与用户定义的 property 区分开来。例如：

console.log(vm.$el);//Vue 实例使用的根 DOM 元素。
console.log(document.getElementById("app"));

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
  
})

vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },//这里作为第一个参数也就是上面的属性a的值在这变成了this.a+this.b
  function (newVal, oldVal) {
	console.log(newVal)
  }
)

（1）通过这里例子可以知道vm.$el=document.getElementById(“app”)
（2）这里使用到了watch方法，这是一个实例方法，可以判断某个属性前后新旧的值。显然在以上例子中oldVal是1，newVal是2。