vue 实例

0. 知识点

// data 对象中的所有的属性加入到 Vue 的响应式系统中

// 只有当实例被创建时 data 中存在的属性才是响应式的

// 阻止修改现有的属性 Object.freeze()

// 暴露了一些有用的实例属性与方法。它们都有前缀 $ vm.$data vm.$el vm.$watch

// 生命周期钩子

1. 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it</button>
  </div>

  <script src="vue.js"></script>
  <script>
    var data = {
      a: 1
    }

    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      data: data
    })
    // data 对象中的所有的属性加入到 Vue 的响应式系统中
    console.log(vm.a == data.a);   // true

    // 只有当实例被创建时 data 中存在的属性才是响应式的
    data = {
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }

    // 阻止修改现有的属性    Object.freeze()
    var obj = {
      foo: 'bar'
    }

    Object.freeze(obj)   // error

    new Vue({
      el: '#app',
      data: obj
    })

    // 暴露了一些有用的实例属性与方法。它们都有前缀 $      vm.$data      vm.$el      vm.$watch
    var data = {
      a: 1
    }
    var vm = new Vue({
      el: '#app',
      data: data,
      created: function () {
        // 生命周期钩子     `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      }
    })

    console.log(vm.$data === data);   // true
    console.log(vm.$el === document.getElementById('app'))     // => true

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

  </script>
</body>

</html>

View Code

2. 相关链接

api

实例