vue入门demo：用户管理1

该demo纯前端实现

• 使用到vue技术点：

  • 1.在该demo中使用到的vue指令：{{}}、 v-if、 v-model、 @click v-for
  • 2.在该demo中使用到的事件修饰符： .prevent（阻止事件默认行为）
  • 3.在该demo中使用到的api:
  • arr.push(item,...)：向数组末尾添加一个或多个元素
  • arr.splice(index,num) ：删除并插入，删除指定索引和数量的元素，并添加新元素，参数1必须，参数2不给则清空数组，参数3不给则不添加新元素
  • arr.findIndex((item,index) => {})：查询符合条件的元素索引，符合条件时返回索引值，不满足条件时返回 -1
  • arr.filter((item,index) => {})：查询符合条件的元素数组，符合条件时返回元素数组，不满足条件时返回空数组
  • arr.forEach((item,index) => {})：遍历数组
  • str.includes(s)：字符串中是否包含子字符串
  • str.indexOf(s)：子字符串在字符串中首次出现的位置，区分大小写，不匹配时返回-1
  • str.padStart(length,value)：头部补全，参数1：补全后生效的长度,参数2：用来补全的字符串
  • 4.在该demo中定义了全局过滤器：Vue.filter(过滤器名称,function(){});
  • 5.在该demo中使用了键盘修饰符：@keyup.enter

• 实例

    
    

    
    

    
    



    


        
        
        

            {{ errMsg }}
            
            
                ×
            
        

      
        

            

                昵称：
                
                
            
            

                
            
            

                
                

            
        
        
        
        

            

                

                    
编号
                    
昵称
                    
日期
                    
操作
                
            
            

                
                

                    
{{ item.id }}
                    
{{ item.nickname }}
                    
                    
{{ item.date | dateFormat }}
                    

                        
                        删除
                    
                
            
        
    

    

• 效果
  

• 小结

  • 在该demo中，充分体现了mvvm的思想，即数据与html结构分离，使用vue作为调度的中间件在这两者中进行数据的存储与渲染

  • 使用vue的指令省去了dom节点的操作，由于数据的双向绑定（从m中改变到v，从v中改变到m），则直接从data中获取数据进行操作