本文共 4806 字，大约阅读时间需要 16 分钟。

上次复习

自定义组件——v-model——与v-bind不同

不能正常加减

换成v-bind就可以

解决：v-model里面需要添加prop属性

问题：count不是goods-count

解决：

生命周期函数

beforeCreate：只有vue或者组件实例化执行

    
       
       
               
   
        
    
{   {   username}}
    
   
    

created：

beforeMount：

mounted:

beforeUpdate:

updated:

销毁阶段：

销毁时加入v-if，点击则销毁

beforeDestroy：点击销毁则触发

destroyed：

图书管理系统 事例

在bootstrap找样式

    
       
       
               
   
       
   
        
            
    
            
                 
     
                
      
图书管理系统
                
      
                
       名称：                
                       
      
                
      
                
       作者：                
                       
      
                
      
                
       价格：                
                       
      
                
      
                
       搜索：                
                       
      
                              
      添加            
     
        
    
    
   
    

添加表格：

    
       
       
               
   
       
   
        
            
    
            
                 
     
                
      
图书管理系统
                
      
                
       名称：                
                       
      
                
      
                
       作者：                
                       
      
                
      
                
       价格：                
                       
      
                
      
                
       搜索：                
                       
      
                              
      添加            
     
            
                 
     
                      
       
                            
序号
                            
名称
                            
作者
                            
价格
                            
时间
                            
删除
                       
                       
                            
{ { index+1}}
                            
{ { book.name}}
                            
{ { book.author}}
                            
{ { book.price}}
                            
{ { book.atime}}
                            
删除
                       
                                    
     
        
    
    
   
    

增加功能的添加

    
       
       
               
   
       
   
        
            
    
            
                 
     
                
      
图书管理系统
                
      
                
       名称：                
                       
      
                
      
                
       作者：                
                       
      
                
      
                
       价格：                
                       
      
                
      
                
       搜索：                
                       
      
                       
                           
                      
      添加            
     
            
                 
     
                      
       
                            
序号
                            
名称
                            
作者
                            
价格
                            
时间
                            
删除
                       
                       
                            
{ { index+1}}
                            
{ { book.name}}
                            
{ { book.author}}
                            
{ { book.price}}
                            
{ { book.atime}}
                            
删除
                       
                                    
     
        
    
    
   
    

使用JSON.parse和JSON.straighfy()

输入完就可以情况框中内容

图书馆删除

图书馆搜索

    
       
       
               
   
       
   
        
            
    
            
                 
     
                
      
图书管理系统
                
      
                
       名称：                
                       
      
                
      
                
       作者：                
                       
      
                
      
                
       价格：                
                       
      
                
      
                
       搜索：                
                       
      
                       
                           
                      
      添加            
     
            
                 
     
                      
       
                            
序号
                            
名称
                            
作者
                            
价格
                            
时间
                            
删除
                       
                                              
                            
{ { index+1}}
                            
{ { book.name}}
                            
{ { book.author}}
                            
{ { book.price}}
                            
{ { book.atime}}
                            
删除
                       
                                    
     
        
    
    
   
    

转载地址：http://urun.baihongyu.com/