技術標籤：vue 掛載在html 中

課程目標

在頁面上顯示出Hello World文字

實現步驟

1.引入vue.js檔案

2.例項化一個Vue物件

3.指定Vue物件的作用域

4.在data中顯示的初始化頁面資料

5.用{{}}展示資料

例項程式碼

    Document

{{msg}}

{{methodsMag}}

Vue例項選項詳解

1.new Vue({})

例項化一個Vue物件引數是一個物件

2.el作用：

指定vue例項的作用域，通常是id選擇器、類選擇器 如 #app 或 .app

不能指定vue例項物件的作用域到html或者body標籤，掛載到body和html，將會報如下錯誤：

一個頁面可以有多個Vue例項物件，每個物件只管理自己el所掛載的作用域；

如下所示，v1例項物件只會管理它所掛載的

    Document

{{msg}}

{{msg1}}

3.data的作用：

data相當於一個記憶體，儲存頁面需要展示的資料；

所有頁面需要展示的資料都需要顯示的初始化到data中。

data中是資料是響應式的資料，只有資料改變，對應頁面展示的資料也會相應的改變。

4.methods:

指定當前Vue例項物件的方法，其值可以是一個物件。

可以通過例項物件訪問方法，如v1.fn1();

方法中的 this 自動繫結為 Vue 例項

不應該使用箭頭函式來定義 method 函式,箭頭函式綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 例項，this. 將是 undefined

5.{{}}: 插值表示式

把繫結的資料展示到頁面上，只要data裡面的資料改變，頁面上的資料也會發生改變。

在插值表示式中不能寫js語句，如 var a = 100;