邂逅Vue.js中要學習的內容大綱：

1.初識Vue.js

(1)為什麼學習Vue.js

(2)簡單認識一下Vue.js

2.Vuejs安裝方式

(1)CDN引入

(2)下載和引入

(3)NPM安裝管理

3.Vue.js初體驗

(1)Hello Vuejs

(2)Vue列表展示

(3)案例：計數器

4.Vuejs的MVVM

3-1.Vue.js初體驗 響應

先來體驗Vuejs的響應式：

首先來了解Es6中，let是定義變數，const是定義常量

const定義的是以後都不能修改的

新建一個HelloVuejs.html檔案：

執行結果如下：

如果用js或者jQuery的邏輯方法寫：

1.建立div元素，設定id屬性

2.定義一個變數叫message

3.將message變數放在前面的div元素中顯示

以上這種方式叫做指令式程式設計

但是我們剛才使用的兩個大括號{{}}再加Vue的程式碼方式來寫的，這就是用vue來管理div

即你只需要告訴我這裡需要寫什麼東西就可以了，比如兩個大括號{{}}

這種方式叫做宣告式程式設計

如果我們想要新增屬性，就直接新增逗號+屬性名和屬性值即可

執行結果如下：

這樣做的好處：資料和介面可以實現完全分離

再來體驗一下修改程式碼：

如果使用傳統的js或者jQuery藉著上面的3步來寫：

4.修改message的數值：今天天氣不錯！

5.將修改後的資料再次替換到div元素

我們如果使用Vue來修改文字，可以直接修Vue程式碼段中的數值，HTML標籤裡的數值就會自動改變：

比如還是上面寫的這個程式碼：

從瀏覽器中F12開啟控制檯，先拿到app.message

直接透過app.message = ‘要修改的值’ 回車後即可修改

以上就是我們對Vuejs的初體驗

響應式：當資料發生改變的時候，介面會自動發生響應

程式碼做了什麼事情?

1.我們來閱讀JavaScript程式碼，會發現建立了—個Vue物件。

2.建立Vue物件的時候，傳入了一些options:{} 引數

（1）{}中包含了el屬性:該屬性決定了這個Vue物件掛載到哪一個元素上，很明顯，我們這裡是掛載到了id為app的元素上

（2）{}中包含了data屬性︰該屬性中通常會儲存一些資料

①這些資料可以是我們直接定義出來的，比如像上面這樣。

這裡要知道，當執行到script時，頁面中解析的還是HTML標籤中的資料

當執行到Vue時，再由Vue來進行解析HTML的程式碼

3-2.Vue.js初體驗 列表

我們還是透過上面的方式新建一個列表的：

執行結果：

但是這種寫ul>li的方法太low了

我們可以使用一個指令來替代傳統寫法 v-for

這種寫法和之前學的for …in 差不多

此時這個item為定義的一個變數，也可以是其他的

執行結果如下：

這種寫法都叫做宣告式的

而且現在的資料也同樣是響應式的

直接用push來新增即可：

HTML程式碼中，使用v-for指令

該指令我們後面會詳細講解，這裡先學會使用。

是不是變得So Easy，我們再也不需要在JavaScript程式碼中完成DOM的拼接相關操作了

而且，更重要的是，它還是響應式的。

也就是說，當我們陣列中的資料發生改變時，介面會自動改變。

依然讓我們開啟開發者模式的console，就可以更改