码迷,mamicode.com
首页 > 其他好文 > 详细

vue 实例

时间:2019-05-14 18:54:41      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:OLE   有用   his   改变   var   htm   一个   target   pre   

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 

 

vue 实例

标签:OLE   有用   his   改变   var   htm   一个   target   pre   

原文地址:https://www.cnblogs.com/justSmile2/p/10863670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!