作为后端攻城狮，写前端代码是一种什么体验？

相信不少人和 @Python大星 一样，有写过前端代码的经历。

记录一下，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

<a :href="{{url}}">aa</a>

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 的基础语法还不熟悉，强烈建议你先看 @Python大星 另一篇文章 >>>

Vue 00 —— 初识 Vue，从放弃到入门

如果你需要源码，请私信回复 @Python大星 获取。回复：vue01