初入 Vue 的世界 Say Hello

上一回：Vue 與 MVVM 之間那些事兒

書接上文，上一回我們說到了 Vue 框架和 MVVM 模式之間的那些事兒。知道了 Vue 實際上是經典的 MVVM 模式的框架，而且充當了 MVVM 中的 ViewModel 層，使得我們開發時只須要關注 View 層和 Model 層就能夠了。

接下來，我們就來編寫真正意義上的第一個 Vue 示例吧。

---

使用 Vue 框架，我們能夠把它分紅三個步驟：

1. 在 HTML 網頁中引入 Vue 框架的核心庫
2. 編寫做爲 View 層的 HTML 代碼
3. 編寫做爲 Model 層的 JavaScript 邏輯

下面，我們就根據這三步來編寫第一個 Vue 的示例代碼。

<!-- 1.引入Vue文件 -->
<script src="scripts/vue.js"></script>
<!-- 2.編寫View層的HTML -->
<div id="app">{{ message }}</div>
<script>
    // 3.編寫Model層的JavaScript邏輯
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
複製代碼

上面這段代碼中，我們首先須要來介紹一下核心的內容，就是下面這段代碼：

// 建立Vue的實例對象，而且傳遞必要的參數便可
let app = new Vue({
    el: '#app'// 將當前的數據關聯到HTML元素
});
複製代碼

new Vue() 建立一個 Vue 的實例對象，構造函數 Vue() 接收一個 Object 類型的參數。其中 el 選項是用來和 HTML 網頁中的元素進行關聯的，值能夠是 CSS 選擇器，也能夠是 HTMLElement 實例。

簡單吧？！是否是以爲很像 jQuery 吖？！

聲明式渲染

在這個示例代碼中，我們用了 Vue 框架比較核心的內容就是聲明式渲染。聲明式渲染就是 Vue 框架提供給我們完成 View 層的 HTML 網頁數據填充的，就是經過一個簡單的模板語法，好比 {{ message }} ，聲明式地把數據經過 DOM 結構渲染到 HTML 網頁中。

<div id="app">{{ message }}</div>
複製代碼

而後，經過 Vue() 構造函數的 data 選項設置數據內容。

let app = new Vue({
  el: '#app’, data: { message: 'Hello Vue.js!’
  }
});
複製代碼

這裏我們得說明一點，就是模板語法的 {{ message }} 中的 message 是必須和 Vue() 構造函數中 data 選項的 message 保持一致的。否則，我們是得不到正確的效果的！

作到這兒，我們就作到了把數據和 DOM 結構進行了關聯。不只如此，這些數據渲染都是響應式的。這時候你可能在想，啥是響應式的？

就是這樣的示例代碼，我們運行瀏覽器，打開開發者工具以後，在控制檯（console）修改 app.message 的值，相應 HTML 網頁的模板語法渲染的數據也會變化。

下一回：速看Vue世界的生命輪迴