前言

通过下面的案例，简单体验一下「数据驱动」是啥效果。

第2节 创建第一个 vue 应用 - 图1

重点内容

  • 「数据驱动」

    codes

当我们将界面依赖的数据改变时，界面会重新渲染，这其实就是数据响应式。有关数据响应式的更多内容将在后续笔记中介绍。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>第一个 vue 应用</title>
  6. </head>
  7. <body>
  8.   <div id="app">
  9.     {{ message }}
  10.   </div>
  11.   <script src="./vue.js"></script>
  12.   <script>
  13.     const app = new Vue({
  14.       el: "#app", // 挂载的目标元素
  15.       data: { // 数据
  16.         message: "Hello Vue!"
  17.       }
  18.     });
  20.     // 3 秒后改变 app.message 的值，观察页面的变化
  21.     setTimeout(() => {
  22.       app.message = "2022-01-12 周三 15:05"
  23.     }, 3000);
  24.   </script>
  25. </body>
  26. </html>

image.png
image.png

数据驱动视图变化，只要页面所依赖的数据发生变化，页面就会重新渲染。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

这种「数据驱动」的效果，在后续学习 vue 的过程中，会不断地接触到，这和我们传统的操作 DOM 的开发方式完全不同，我们核心关注的对象不再是 DOM 元素，而是数据。