通过记事本案例了解vue的列表循环，表单元素绑定

题目：在没有事件的时候可以增加事件，在有事件的时候可以统计当前事件总数也可以删除单个事件或同时清空所有事件。另外在没有事件时统计和清空的功能可以被隐藏。

分析:1. 新增：生成列表结构(v-for)；获取用户输入(v-model)；回车新增数据(v-on)
        2. 删除：点击删除指定内容(v-on splice 索引)
        3. 统计：统计信息个数(v-text length)
        4. 清空：点击清除所有信息(v-on 清空数组)
        5. 隐藏：没有数据时，隐藏元素(v-show 或 v-if 数组非空)

    
    
    
    



    

        

            西兰花记事本
            

            
        
        

            

                

                    

                        {{ item }}
                        x
                    
                
            
        
        

            共有{{ list.length }}条事件信息
            清空所有事件
        
    
    
    
    

原始状态：

新增、删除与统计功能： 

 

清空和隐藏功能：

本案例注意事项：
    1. 数据改变和数据绑定的元素同步改变；
    2. 页面是数据的表达方式，我们应该有基于数据的开发方式 ；
    3. 列表结构可以通过 v-for 指令结合数据生成；
    4. v-on 在绑定数据时可以传递自定义参数，v-on结合.enter事件修饰符可以对时间进行限制；
    5. 通过v-model可以快速的设置和获取表单元素的值。

以下是本案例中涉及到的vue指令：

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

    
    
    
    



    

        

            

                想去玩儿的第{{ index+1 }}个地方：{{it}}
            
        
        

        

            会做的菜：{{ item.name }}
        
        
        
    
    
    
    

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

 

 

3. v-model：
    作用是便捷的设置和获取表单元素的值；
    绑定的数据会和表单元素的值相关联；
    绑定的数据双向关联表单元素的值。

    
    
    
    



    

        
        
message:{{ message }}
        

        
    
    
    
    

修改前：

修改后：