构造器

用vue必须先 通过构造函数Vue 创建一个 Vue 的根实例(喂!我要用vm啦!)

//vm是 MVVM 模式中所描述的 ViewModel 缩写
var vm = new Vue({
  // 选项(必选,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。)
})

组件构造器(所有的 Vue.js 组件其实都是被扩展的 Vue 实例)

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

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性(意思是:data内的属性就是vm的属性)

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 实例自有的实例属性与方法都有前缀 $,以便与代理的数据属性区分。

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`  改变后调用
})

实例生命周期

Vue 实例在创建后会自己执行一些程序(调用一些生命周期钩子
你可以在被这些钩子里 自定义逻辑
例如 created 钩子在实例创建后调用:

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

还有一些其它的钩子,在实例生命周期的不同阶段调用,如 compiled、 ready 、destroyed。钩子的 this 指向调用它的 Vue 实例。
因为Vue.js没有“控制器”,所以 组件的自定义逻辑可以分割在这些钩子中。

生命周期图示

clipboard.png

吐槽

$属性用的少,data都是后台传来的,除特殊的需要前端处理下,剩下都是有啥用啥~
created钩子是用来运行,不用操作,页面刷新就会同步加载的逻辑。(如刷新页面,就会获取数据)

本文固定链接: http://www.js-code.com/vue-js/vue-js_24863.html