初入 Vue 的世界 Say Hello

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

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

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

使用 Vue 框架，我們們可以把它分成三個步驟：

在 HTML 網頁中引入 Vue 框架的核心庫
編寫作為 View 層的 HTML 程式碼
編寫作為 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世界的生命輪迴

初入 Vue 的世界 Say Hello

宣告式渲染

相關文章