vue学习笔记四

Vue学习笔记四

vue学习笔记一 

vue学习笔记二

vue学习笔记三

今天写个todolist， 在前几篇的基础上做的。需要的同学可以点击上面的链接；

在template文件夹下新建一个list.vue；

现在是空的，先写上一点假数据

data(){
    return{
        items:[             // 模拟一些数据
            {
                names:"Vue.js权威指南",   // 名称
                num:1,                   // 数量
                price:99                 // 单价 
            },
            {
                names:"MongoDB权威指南",
                num:1,
                price:67.2
            },
            {
                names:"图解HTTP",
                num:1,
                price:41.7
            },
            {
                names:"Node.js权威指南",
                num:1,
                price:75.7
            },
            {
                names:"Node.js项目实践",
                num:1,
                price:64.2
            }
        ],
        names:"",
        price:"",
        // showData:true,
        priceAll:0     //初始总价格为零
    }
},

在页面展示出来

我这里直接写了一个table

    

        

            
序号
            
名称
            
数量
            
单价
            
总价
            
操作
        
    
    

        

            
{{index}}
            
{{item.names}}
            

                
                    {{item.num}} 
                
            
            
{{item.price}}
            
{{item.price * 1000 * item.num / 1000}}
            
删除
        
        

            
总价
            
            
{{priceAll}}
        
    

style里写点样式

table{width:800px;border-collapse:collapse;}
th,td{border:1px solid #ccc;height:25px;line-height:25px;text-align:center}
input[type='button']{width:40px;height:20px;line-height:20px;}
span{cursor:pointer;font-size:12px}

现在我们把事件补上

methods:{

    //   增加事件
    push:function(item){
        item.num+=1;
    },

    //  减少事件
    minus:function(item){
        //  如果数量为零的话,不做操作
        if(item.num<=1) return false;
        item.num-=1;
    },

    //  删除事件
    deletes:function(index){
        this.items.splice(index,1)
    }
    
},

现在我们修改一下index.js；引入list

import list from './../../template/list.vue';

注册名字

new Vue({
  el:"#app",
  components: {"helloVue":helloVue,"list":list}
})

根目录的index.html文件加上标签

< list > list >

到这里我们基本上已经做了 一大部分的工作了。

打包测试一下

打包并刷新页面

基本功能已经实现了，数量加减的时候单总价会自动计算，删除功能也正常，但是总价并没有计算。 现在我们需要加上监听事件：

list.vue里面加上watch事件

watch:{
    // 监听items的变化
    "items":{
        deep:true,   //深度监听
        handler:function(){
            var num=0;

            //  遍历数组,
            this.items.forEach(function(v){

                //  把每个元素的数量和单价的乘积相加;  (注：这里*1000是为了处理浮点数运算的精度丢失)
                num+=v.price * 1000 * v.num;
            })

            //   如果num的计算结果为零的话,直接为 0; 否则加上符号与单位;
            num==0?
            this.priceAll=0:
            this.priceAll="$"+(num/1000).toFixed(2)+"元";    //将结束除以1000。还原数据;

            this.items.length==0?this.showData=false:this.showData=true;
        }
    }
}

再次打包并刷新:

总价已经可以自动更新了。

只有这些还不够，我们需要一个添加事件。

在table上面加上输入框。

名称:

    
单价:

methods里面加上添加事件：

// 添加事件
add:function(){
    // 判断名称是否为空
    if(this.names.replace(/\s/g,"")==""){
        alert("名称不能为空");
        return false;
    }

    // 判断单价是否为空
        if(this.price.replace(/\s/g,"")==""){
        alert("单价不能为空");
        return false;
    }

    // 添加到数组
    this.items.push({"names":this.names,"price":this.price,"num":1});

    // 清空名称与单价
    this.names="";
    this.price="";
},

打包半刷新

ok,到这里一个简单的todolist已经完成。

如果过程中有什么不对的地方，欢迎大家指出。