作為後端攻城獅，寫前端代碼是一種什麼體驗？
相信不少人和 一樣，有寫過前端代碼的經歷。
記錄一下，Vue 框架開發中“啼笑皆非”的故事，非專業前端人員，該案例無 css 美化，引起不適，請見諒，如有不當之處，請指出，不甚感激！
一、記事本基本功能展示
1、Python大星的記事本靜態展示
2、Python大星的記事本動態展示
二、功能分步實現
1、 新增
需求：在輸入框輸入文字，按回車鍵，列表增加一列
① 使用 v-for 指令
這和 Python 中 for 循環一樣。在元素內使用 v-for 標籤，會循環複製，常見在列表上。
② 用戶交互，輸入文字，按回車鍵，使用 v-on 指令或簡寫方式
那 v-on 和 v-bind 有什麼區別？
v-bind指令用於設置HTML屬性：v-bind:href 縮寫為 :href
v-on 指令用於綁定HTML事件 ：v-on:click 縮寫為 @click
③ 如何增加輸入框的值呢？
I、使用 v-mode 雙向綁定 inputValue
II、添加數據到列表使用
this.list.push(this.inputValue)
2、 刪除
刪除列表中的一項
① 給按鈕綁定一個事件，使用 v-on 或者簡寫方式，index是列表的序號
② this.list.splice(index,1) 指的是刪除一個列表元素
3、 統計
列表個數統計使用的是{{list.length}}，這個和 java 的語法如初一直
4、清空
① 給清除按鈕增加一個 clear 方法
② 清空直接使用 this.list = []
5、 隱藏
使用 v-if 或者 v-show 判斷 list.length!=0
這兩者有什麼區別呢？
v-if 它是惰性的，只有值為真的時候才會被選渲染。 如果從值 從 true 改變 為 false 則元素就會被銷燬。 如果又從 false 改變 true 則元素會被重建。
v-show 它不管初始條件是什麼，元素總是會被渲染。 它的值的變化，只是對 css display 屬性的切換。
如果你 Vue 的基礎語法還不熟悉，強烈建議你先看 另一篇文章 >>>
如果你需要源碼，請私信回覆 獲取。回覆：vue01
閱讀更多 Python大星 的文章
