作為後端攻城獅，寫前端代碼是一種什麼體驗？
相信不少人和 一樣，有寫過前端代碼的經歷。
記錄一下，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"，在用{{}} 調用。
7、處理用戶輸入（用戶點擊事件）
用 v-on 指令添加一個事件監聽器，添加 reverseMessage 方法，更新應用狀態。
8、表單輸入和應用狀態之間的雙向綁定
當我們修改input輸入框的值時，p 元素內的值同時被修改
閱讀更多 Python大星 的文章
