Vue2.x帮助文档读书笔记

发表于 更新于 分类于 ， ， ， 本文字数： 677 阅读时长 ≈ 1 分钟

随着工作中不断使用 vue，总感觉对 vue 的使用不够随心所欲，所以，本篇为重新学习 vue 的帮助文档，并将精华部分整理成笔记。本记录 Vue.js 2.x 的帮助文档。

基础

Vue 实例

  1. 创建实例

    当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。

    1
    2
    3
    4
    5
    6
    7
    / 我们的数据对象
    var data = { a: 1 }

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

    值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。

    使用 Object.freeze(obj)，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

  2. 访问实例的 property 和方法

    vue 本身 property 和方法，它们都有前缀 $，以便与用户定义的 property 区分开来

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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` 改变后调用
    })

模板语法