Vue笔记(3)

本地应用指令

v-for

响应式生成列表结构

• v-for指令的作用是:根据数据生成列表结构
• 数组经常和v-for结合使用
• 语法是( item,index ) in数据
• item和index可以结合其他指令一起使用
• 数组长度的更新会同步到页面上,是响应式的

v-on补充

传递自定义参数，事件修饰符

• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 定义方法时需要定义形参来接收传入的实参
• 事件的后面跟上.修饰符可以对事件进行限制
• .enter可以限制触发的按键为回车
• 事件修饰符有多种

更多事件修饰符：
文档传送门：https://cn.vuejs.org/v2/api/#v-on

v-model

获取和设置表单元素的值(双向数据绑定)

• v-model指令的作用是便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据→表单元素的值

本地应用-小黑记事本

功能：

1. 新增
2. 删除
3. 统计
4. 清空
5. 隐藏（没有内容时left和clear会消失）

1. 新增
2. 生成列表结构(v-for数组)
3. 获取用户输入(v-model)
4. 回车,新增数据(v-on .enter 添加数据)
   
   

• v-for指令的作用
• v-model指令的作用
• v-on指令,事件修饰符
• 通过审查元素快速定位

2. 删除
3. 点击删除指定内容(v-on splice索引)
   
   

• 数据改变,和数据绑定的元素同步改变
• 事件的自定义参数
• splice方法的作用

3. 统计
4. 统计信息个数(v-text length)
   

• 基于数据的开发方式

4. 清空
5. 点击清除所有信息(v-on清空数组)
   
   
6. 隐藏
7. 没有数据时,隐藏元素(v-show v-if 数组非空)
   

• 列表结构可以通过v-for指令结合数据生成
• v-on结合事件修饰符可以对事件进行限制,比如.enter
• v-on在绑定事件时可以传递自定义参数
• 通过v-model可以快速的设置和获取表单元素的值
• 基于数据的开发方式