4.Vue.js計數器

執行結果如下：

由於當前計數這四個字是不變的，所以可以直接寫在div中

思路分析：

按照傳統的命令式寫法：

1.拿button元素

再來看我們要寫的宣告式寫法：

1.使用v-on來監聽事件，on表示在發生什麼事情做出什麼響應

2.還要告訴vue是監聽的什麼事件，並且執行的什麼方法，例如單擊+：v-on:click=”counter++”

執行結果如下：

這就需要在const定義的app裡面來寫，定義methods方法：

執行結果如下：

簡單小總結：

這裡，我們又要使用新的指令和屬性了

新的屬性:methods，該屬性用於在Vue物件中定義方法。

(方法通常是methods中定義的方法)

@包括v-on，這種寫法是語法糖，即簡寫

Vue物件中又是定義el/data/methods，到底都有哪些東西可以定義，以及它們的作用是什麼?

這些以後都會一一講到

5.Vue.js的MVVM

什麼是MVVM？

MVVM – Model ViewModel View，是一種軟體架構模式。

可以看一下維基百科的MVVM概念（注意：不是百度百科）

我們直接來看Vue中的MVVM：

Model就是對應的資料，View對應的DOM

如果View和Model想要通訊，就需要透過ViewModel來通訊

View Model為我們做了兩件事情：

1.Data Bindings 資料繫結，例如將data中的資料繫結在DOM上

我們還是看剛才的計數器案例，來分析一下誰是這三個：

展現給使用者看到的就是View

如果我們這樣來定義counter來試一下：

現在obj就是model，定義的app = new Vue就是ViewModel

這裡定義的obj得資料全部加到app中了