GettingStarted with Vue

一、前端页面中(a.html):

引入vue.js库
准备data;
将data绑定到页面元素中

二、Crud 操作(没有与后端数据交互)

1.查询

• 效果
  查询效果.PNG

• 代码(a.html)

    
    


    

            

                

                    

                        
英雄名称
                        
血量
                    
                
                

                    

                        
{{hero.name}}
                        
{{hero.hp}}
                    
                
            
    

2.添加

• 利用双向绑定

• 效果
  添加.PNG
• 代码

    
    


    

            

                

                    

                        
英雄名称
                        
血量
                    
                
                

                    

                        
{{hero.name}}
                    
{{hero.hp}}
                    
 
                    
                
            

            

            英雄名字:

            血量:

            添加

            
            
    

3.删除

• 效果
  删除.PNG
• 代码
  1）增加删除的链接

    删除

2）

deleteHero: function (id) {
    for (var i=0;i

4.更新

• 效果

  
  
  更新.PNG
• 代码
  1)增加链接

编辑

2)增加用于编辑的 div

    英雄名称:
    
    

    血量：
                            
                            
    

    修改                 
    取消                 

3)增加相关函数
一加载script先将$("#div4Update").hide();

edit: function (hero) {
    $("#heroListTable").hide();
    $("#div4Update").show();
    this.hero4Update = hero;
},
update:function(){
    //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
    $("#heroListTable").show();
    $("#div4Update").hide();           
},
cancel:function(){
    //其实就是恢复显示
    $("#heroListTable").show();
    $("#div4Update").hide();
}