1. 新建一個 .html 文件 => 引入一個在線的 vue 庫 => 寫一個帶 id 的 html 標簽 => 寫一個 script 標簽, 這里的 vApp 是 Vue() 這個構造函數的一個實例, 他通過 el 與 dom 建立的聯系, 通過 data 和 模板語法 聲明式 地將數據渲染進 dom 中.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> </head> <body> <div id="app"> <h1>{{ name }} 今年 {{ age }} 歲了!</h1> </div> <script> var vApp = new Vue({ el: "#app", data: { name: "李雷", age: "23" } }) </script> </body> </html>
2. 在瀏覽器打開后, 我們發現 name 和 age 的數據正常顯示出來了. 然后我們在控制台直接通過 vApp.name 和 vApp.age 改變他的值, 結果在頁面上立刻就顯示出來了. 這表明 vApp 這個 Vue 的 實例是一個全局的屬性, 我們可以通過他改變其內部的各種數據, 這種改變會實時地在網頁中顯示效果.
