vue 3.x 馬上就要問世了，顯然尤大大是不想讓我們好好活了，但是轉念一想，比你優秀的人都還在努力，那我們努力還有什么用，開個玩笑而已，本人對於 vue 的接觸時間不長，對其也沒有深入地去研究源碼，但是在 vue 3.x 出來之前，還是想再復習一下 vue2.x ，好記性不如爛筆頭，特此記錄，與君共勉！
vue 作為國人開發的框架，在很多使用習慣上使我們用起來十分順手，又有中文官網加持，使我們在學習起來幾乎沒什么門檻，那接下來我們就開始一點點學習吧。
vue 官網教程 https://cn.vuejs.org/v2/guide/
vue 官網為我們提供了一整套的教學實例，包括從起步安裝到后期維護，在這里我們就不再那么繁瑣第進行說明，我們就以最簡單的案例帶大家一點點深入了解 vue 的精髓。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 </head> 9 <body> 10 <div class="app"> 11 <p>{{ message }}</p> 12 <button v-on:click="handleClick">點我</button> 13 </div> 14 <script> 15 var app = new Vue({ 16 el: '.app', 17 data: { 18 message: 'Hello world!' 19 }, 20 methods: { 21 handleClick() { 22 console.log(this.message) 23 } 24 } 25 }) 26 </script> 27 </body> 28 </html>
在上面的代碼中我們直接在 HTML 中引入 vue.js，然后在一個 div 標簽中以 {{ }} 的方式插值，在 script 的 JavaScript 代碼中我們 var app = new Vue()；意思是我們通過 var 的形式 new 出了一個 Vue 的實例。
在 Vue 的實例中，我們通過 el 屬性來定義這個 Vue 實例要接管的 HTML 代碼的哪一部分，在上面的代碼中我們是讓 Vue 實例接管了 id="app" 的內容，當然我們也可以寫成 el：".app"，那么 HTML 代碼就需要寫成 class="app"。
在 Vue 的實例中，我們可以通過 data 屬性來定義我們的數據，在上面的代碼中我們定義了一個 message 的變量名稱並賦值 hello world! 如果我們想要讓這個數據在頁面上顯示，我們就需要在 Vue 實例接管范圍內，即 id="app" 的代碼范圍內通過插值表達式 {{ }} 將 message 綁定到我們的代碼上，就可以在頁面上顯示了。
在 Vue 的實例中，我們可以通過 methods 屬性來定義我們的方法，在上面的代碼中我們在一個 button 按鈕上通過 v-on:click 的形式綁定了一個 handleClick 點擊事件，在 Vue 的實例中我們就可以在 methods 屬性中對 handleClick 方法進行控制了，例如我們打印輸出 this.message，注意在 Vue 的實例中 this 的指向就是上下文，就 Vue 實例本身，this.message 即 hello world！同時 v-on:click 可以改寫成 @click，這是一種簡寫方式。
最終結果如下：
