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>Documenttitle>
head>

<body>
  <div id="app">
    <p>{{ foo }}p>
    
    <button v-on:click="foo = 'baz'">Change itbutton>
  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 

实例 

转载于:https://www.cnblogs.com/justSmile2/p/10863670.html

你可能感兴趣的:(vue 实例)