实例

每一个vue都是通过Vue函数来创建一个vue实例

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

数据与方法

当一个Vue实例被创建时,它将data对象中所有的property加入到Vue的响应式系统中,当这些property的值发生改变时,视图将会产生响应,匹配更新为新的值

//数据对象
var data1 = { a: 1 }
//将该对象加入到一个Vue实例中
var vm = new Vue({
  data: data1
})
//获取这个实例上的property,返回源数据中对应的字段
vm.a == data.a
//同时当我们修改property中的原始数据,也会影响到实例vm中的值
vm.a = 2
data.a // => 2

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

注意:视图的重渲染,只有当实例被创建时就已经存在data中的property才是响应式的,添加一个新的property不会对原视图更新

实例生命周期钩子

每一个Vue实例被创建时都要经过一系列初始化过程,需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM,同时在这个过程中也会运行一些叫做生命周期钩子的函数,给用户不同阶段添加自己代码的机会

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

前端(十七):Vue实例_mysql
ps:vue官网真的太友好了