作为后端攻城狮，写前端代码是一种什么体验？
相信不少人和 一样，有写过前端代码的经历。
记录一下，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大星 的文章
