Vue | 19.本地应用 - 小黑记事本 - 新增

0.目标与实现思路

目标	实现思路
获取用户输入	v-model双向绑定
生成列表结构	v-for搭配数组
回车后新增数据	v-on指令(@Keyup.enter)触发添加数据的方法

1.获取用户输入

1. 声明Vue实例，设置el挂载点，定义属性inputValue，用以保存用户输入内容

   

2. 定义输入框，用v-model将它的值与绑定的数据关联起来

   

2.生成列表结构

1. 在Vue实例中，添加数组属性"todoArr"

   

2. 在挂载的<div>中定义<ul>，添加子元素<li>，为子元素添加v-for

3. 为todoArr添加默认数据，看看效果：

   

3.回车后新增数据

1. 在Vue实例中添加addTodo方法，需要一个参数(第一步定义的"inputValue")

   

2. 为输入框元素添加@Keyup.enter属性，用户回车后触发函数

   

4.效果演示