作為後端攻城獅，寫前端程式碼是一種什麼體驗？

記錄一下，Vue 框架開發中“啼笑皆非”的故事，非專業前端人員，如有不當之處，請指出，不甚感激！

1、如何理解 Vue 是漸進式 JavaScript 框架？

首先必須得吹一波，Vue 的作者是我兄弟，我們都是黃種人。打擾了，Python 大星喝醉啦，作者是江蘇無錫的尤雨溪。如何理解 “漸進式”，我們聽下作者本人是怎麼說的。

“我認為在所有的框架中，Vue 可能與 React 最像，但從更廣泛的意義上說，在所有框架中，我自己創造了一個概念叫漸進的框架。因為 Vue 的核心組成只是資料繫結和元件，和 React 差不多。它只是解決了一小部分很重要的痛點。與 React 相比，Vue 可能更簡單易用，只知道一些 HTML，JavaScript 和 CSS 知識的人都可以很快入門 Vue。”

由淺入深，由簡單到複雜

2、Vue 的優點

3、第一個 Vue

圖1

呼叫data中的資料，必須使用{{}} 將屬性名稱包起來。

瀏覽器的 JavaScript 控制檯 (就在這個頁面開啟)，並修改 app.message 的值，響應式更新。

4、繫結元素 attribute

圖2

v-bind 指令的意思：

“將這個元素節點的 title attribute 和 Vue 例項的 message 屬性保持一致”。

從 圖1 和 圖2 中，我們可以看到 message 屬性在元素外是要加 {{}}，而在元素內是用雙引號。

5、控制切換一個元素是否顯示

圖3

在控制檯輸入 app.seen = false，你會發現之前顯示的訊息消失了。

seen 屬性可以控制元素是否顯示，我們從 圖2 和 圖3 中 可以看出，v-if 和 v-bind 使用 = 和 ： 的區別。

可以簡單理解為：指令裡面加屬性用冒號。

6、列表渲染

在 v-for 指令裡面"todo in todos"，在用{{}} 呼叫。

用 v-on 指令新增一個事件監聽器，新增 reverseMessage 方法，更新應用狀態。

8、表單輸入和應用狀態之間的雙向繫結

當我們修改input輸入框的值時，p 元素內的值同時被修改