vue -- 实例 - 记事本

新增

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

    

        
        

            
NOTE
            
        
        
        

            

                

                    

                        {{ index + 1 }}.
                        {{ item }}
                        
                    
                
            
        
        
        

        
     
    
    

    
    

删除

• 点击删除指定内容(v-on splice 索引)
• 数据改变,和数据绑定的元素同步改变
• 事件的自定义参数

    
    

        
        

            
NOTE
            
        
        
        

            

                

                    

                        {{ index + 1 }}.
                        {{ item }}
                        
                    
                
            
        
        
        

        
     
    
    

    
    

统计和清空

• 统计信息个数(v-text length)
• 基于数据的开发方式
• 点击清空所有信息(v-on)

    
    

        
        

            
NOTE
            
        
        
        

            

                

                    

                        {{ index + 1 }}.
                        {{ item }}
                        
                    
                
            
        
        
        

            
                {{ list.length }} items left
            
            
                clear
            
        
     
    
    

    
    

隐藏

• 没有数据时 隐藏元素(v-show v-if 数组非空)
• 列表结构可以通过v-for指令结合数据生成
• v-on结合事件修饰符可以对事件进行限制 比如.enter
• v-on在绑定事件时 可以传递自定义参数
• 通过v-model可以快速的设置和获取表单元素的值

    
    
    
    


    
    

        
        

            
NOTE
            
        
        
        

            

                

                    

                        {{ index + 1 }}.
                        {{ item }}
                        
                    
                
            
        
        
        

            
                {{ list.length }} items left
            
            
                clear