学习感悟:与原生JS不同,Vue完全是数据驱动的一个JS框架,即所有页面的改动,都要考虑如何与数据绑定并且如何去操作数据,从而改变页面的视图。而且Vue是一个MVVM框架。

todolisit实现功能

完成任务的添加 删除 编辑等功能,以及已完成 未完成任务的分开,利用Vue里面的component函数,注册todolist组件,然后在html中引用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="file:///D|/前端/vue.js"></script>
<link rel="stylesheet" type="text/css" href="todo.css">
</head>

<body>
<div id ="root">
<to-do></to-do>
</div>
<script src="to-do list zujian.js"></script>
<script >
    new Vue ({
    el:"#root"
})
</script>
</body>
</html>

思路:如果页面有动态变化,就要考虑如何去绑定数据。用v-model来进行数据的双向绑定, 列表的数据可以将其存在一个数组中,然后用v-for指令来渲染到<ul><li></li></ul>中;此外还用了localStorage来存储输入数据,使得页面刷新时数据依旧存在。

代码如下:

Vue.component("to-do",{
	template:`
        <div class="box">
        <div class="input">
            <input type="text" placeholder="请输入事项" v-model="text" @keyup.13="add">
        </div>
        <div class="btns">
             <input type="button" value="全部" @click="changeStatus('all')" :class="{check:status=='all'}">
             <input type="button" value="未完成" @click="changeStatus('0')" :class="{check:status=='0'}">
             <input type="button" value="已完成" @click="changeStatus('1')" :class="{check:status=='1'}">
        </div>
        <ul class="lists">
            <li v-for="item in datas">
                <div v-if="item.edit==true">
                <span class="opt" @click="changeState(item)" :class="{red:item.state==1}"></span>
                <p @dblclick="edit(item)">
                   {{item.text}}
                </p>
                <span class="del" @click="del(item.id)">删除</span>
            </div>
            <div v-else> 
                <input type="text" v-model="item.text" @blur="edit(item)"><!--失去焦点   -->
            </div>
            </li>
        </ul>
        <div v-show="all.length==0">没有数据</div>  
    </div>
	`,
	   data:function(){   //在组件中数据必须是函数
	   	return {
        all:localStorage.todo?JSON.parse(localStorage.todo):[],
        text:"",
        status:"all"
    }
},
    methods:{
        add(){           //输入的文本生成一个对象,方便识别各个文本以及完成状态
            var obj={};
            obj.text=this.text;
            if(!obj.text){
                alert("请输入内容");
                return;
            }
            obj.id=Math.random()+new Date().getTime();//生成随机ID
            obj.state=0;//0表示未完成 1表示已完成
            obj.edit=true;
            this.all.push(obj);
            this.text="";
            localStorage.todo=JSON.stringify(this.all);//将数据变为字符串存储在localstorage中
        },
       changeStatus(val){           //改变全局信息状态
        this.status=val;
       } ,
       changeState(obj){        //改变当前信息状态 
           if(obj.state==0){
            obj.state=1;
           }
           else{
            obj.state=0;
           }
           localStorage.todo=JSON.stringify(this.all);
       },
       del(id){         //删除
                this.all= this.all.filter(function(obj){
                    if(obj.id!=id){
                        return obj;
                    }
                 })
                localStorage.todo=JSON.stringify(this.all);
       },
       edit(item){           //编辑
            item.edit=!item.edit;
            localStorage.todo=JSON.stringify(this.all);
       },
     
    },
    computed:{                                  //此语句尚未完全理解。。。
        datas:function(){              
          return   this.all.filter((obj)=>{     //在all中筛选出obj
               if(this.status=="all")
                {return obj;}
                else{
                    if(this.status==obj.state){
                        return obj;
                    }
                }
            })
        }
    }                                
    
})

Logo

前往低代码交流专区

更多推荐