数据绑定使用

叫法很多，随便叫，比如数据响应式设计，双向绑定

  1. 引入官方 cdn

    1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  2. 通过构造函数 Vue 就可以创建一个 Vue 的实例，并启动 Vue 应用的入口

    1. <script>
    2.  let app = new Vue({
    3.      el: '#app',
    4.      data: {
    5.          mag: '开始 Vue 学习了',
    6.          xiaomi: '小米',
    7.      },
    8.  });
    9. </script>

    el

    el就是 element 的缩写
    el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例，可以是标签。也可以是css语法。

绑定属性呀，事件呀都要写在挂载点上，要不然不会生效的。最好是挂载点里面多写几个 div，包起来。

data

通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。
建议所有会用到的数据都预先在 data 内 声明，这样不至于将数据散落在业务逻辑中，难以维护。
也可以指向一个已经有的变量。

在组件里面必须用函数，虽然它支持对象（1 个）和函数！**

使用

挂载成功后，我们就可以访问他们了。
访问 vue 实例的属性，都是$开头
访问 data 元素的属性，Vue实例本身也代理了data对象里的所有属性，所以可以这样访问。

  1. //访问 vue 实例的属性，都是$开头    
  2.         console.log(app.$el);
  3.     console.log(app.$data);
  4. //访问 data 元素的属性
  5.     console.log(app.mag);
  6.     console.log(app.xiaomi);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  10. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  13. <script>
  14.     let app = new Vue({
  15.         el: "#app",
  16.         data: {
  19.         }
  20.     })
  21. </script>
  22. </body>
  23. </html>

image.png
image.png

原理

（下次我们用 ES6手写一下数据响应式）
Vue 对数据做了什么
内：getter 和 setter
外：Object.defineProperty(对象,属性,{value:0})