VUE 记事本笔记

列表渲染

步骤一:因为列表要显示多条，所以定义一个数组把多条数据存起来。

步骤二:然后再对着li进行v-for,根据这个数组来渲染。

步骤三:使用插值语法,更改需要渲染的标题、序号。

数据新增

步骤四:需要拿到输入框的内容,在input输入框中使用v-model双向绑定,绑定的元素需要在data中定义。

步骤五:因为按回车就添加,意为着输入框要加事件keyup,并且只能由enter键触发。
步骤六:按回车不能直接添加到数组里,因为可能没有输入内容,所以要做一个非空判断。

步骤七:不为空,则添加到数组中。
步骤八:添加到数组后,就把输入框内容清除。
(这时候可以把步骤一定义的数组死数据删掉,让列表数据展示我们输入的内容。

步骤九:完善“空空如也”显示。

数据删除

步骤十:给“删除按钮”添加点击事件。
步骤十一:给“清空按钮”添加点击事件,设置点击时将数组全部重新赋值为空数组,则数据全部清空。

数据统计

步骤十二:统计合计,就是统计数组的长度。

【事件方法】

@click: 当单击元素时,发生click事件。
@dbclick:当双击元素时,发生dbclick事件。

@focus:当元素获得焦点时,发生focus事件。

@blur:当元素失去焦点时发生blur事件。

@submit:当提交表单时,发生submit事件。
@keydown:当键盘被按下时,发生keydown事件。

@keyup:当键盘被松开,发生keyups事件。