快速入手 · Vue速學快練立上手

### 基于HTML的示例典型的HTML頁面除了基本的HTML標簽之外，使用JS添加動態功能，　使用CSS美觀頁面的效果。最常見使用`<script>`和`<style>`標簽導入JS和CSS文件， Vue雖然是JS框架，但其最終也是遵循基本的原理。最簡單也易于理解的方式，導入Vue的JS和CSS在HTML頁面中。看下面的代碼示例： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>getting Started</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html> ``` 上面的代碼中： 1. <div id="app"> 的內容是 {{ message }} ，看起來像一個變量（不過不行Vue的JS，則頁面的顯示就是{{ message }} ）。 2. var app = new Vue() 的語法是創建一個Vue類型的對象，參數對象包含兩個屬性： * el 的值是 # + 需要渲染的div的ID * data：數據的對象，設置了div 中需要替換的數據。這種方式有一個名字是聲明式渲染，也是Vue的核心，即使用簡潔的模板語法將數據和頁面的元素進行結合。 ### 響應式渲染需要注意的是，Vue渲染后的結果不是動態的，而是響應式的，也就是說，修改js數據對象的值之后，頁面也會同步更新。以在Chrome中動態修改上面的message的值為例。在Chrome控制臺的Source標簽頁下，輸入`app.message="GoodBye Vue"` 之后，頁面的顯示的同步更新了，效果如下圖。 ![](https://img.kancloud.cn/1c/98/1c988aff6a00b36b986c7872cdb66a0f_1097x518.png)