vue初识-基础应用

Vue应用

Vue

发布日期: 2021-03-07

更新日期: 2021-03-07

文章字数: 657

阅读时长: 3 分

阅读次数:

人生至恶是善谈人过；人生至愚恶闻己过

简单开发 todolist 待办项应用

演示-> Athink_toodlist待办项

需求

可输入待办项
记正在进行的待办项
记录完成待办项
数据保存浏览器

技术

vue直接使用

开发

引用vue和animate

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"
    type="text/css">

视图代码

    <div id="app">
        <!-- 输入框 -->
        <div class="head">
            <label for="inputInfo">todolist</label>
            <input type="text" name="inputInfo" @keydown.enter="inputInfoEven" v-model="inputInfo"
                placeholder="请输入代办项..">
        </div>

        <div class="main">
            <!-- 正在进行的待办项 -->
            <h2>正在进行<span>{{todoList.length}}</span></h2>
            <ol class="todo">
                <transition-group name="todoTransition" 
                      enter-active-class=" animate__animated animate__bounceIn"
                    leave-active-class="animate__animated animate__fadeOutRight"
                    :duration="{ enter: 500, leave: 400 }">
                    <li v-for="item,index in todoList" :key="'todo'+index">
                        <input type="radio" @click.prevent.stop="checkDone(item)" :checked="item.isDone" />
                        <span>{{item.val}}</span>
                        <a href="#1" @click="removeInfo(index.id)">-</a>
                    </li>
                </transition-group>
            </ol>

            <!-- 已完成的待办项 -->
            <h2>已经完成<span>{{doneList.length}}</span></h2>
            <ol class="done">
                <transition-group name="doneTransition" 
                      enter-active-class=" animate__animated animate__zoomIn"
                    leave-active-class="animate__animated animate__zoomOutUp"
                    :duration="{ enter: 500, leave: 400 }">
                    <li v-for="item,index in doneList" class="done" :key="'done'+index">
                        <input type="radio" @click.prevent.stop="checkDone(item)" :checked="item.isDone" />
                        <span>{{item.val}}</span>
                        <a href="#1" @click="removeInfo(index.id)">-</a>
                    </li>
                </transition-group>
            </ol>
        </div>
    </div>

js代码

var app = new Vue({
    el: "#app",
    data: {
        inputInfo: "", //输入框的值
        allList: [], //所有待办项
    },
    computed: {
        todoList: function() { //正在进行的待办项
            var arr = this.allList.filter((item, index) => {
                return !item.isDone;
            })
            return arr;
        },
        doneList: function() { //已完成的待办项
            var arr = this.allList.filter((item, index) => {
                return item.isDone;
            })
            return arr;
        }
    },
    methods: {
        checkDone: (item) => { //检查待办项是否已完成
            item.isDone = !item.isDone;
            app.saveInfo();
        },
        inputInfoEven: () => {    //输入框的输入和回车事件
            if (!app.inputInfo || app.inputInfo == "") {
                alert("请输入代办项..")
                return;
            }
            app.allList.push({
                'id': app.allList.length,
                'val': app.inputInfo.trim(),
                'isDone': false
            })
            app.inputInfo = "";
            app.saveInfo();
        },
        removeInfo: function(index) {    //删除所有里某个待办项
            app.allList.splice(index, 1);
            app.allList.forEach((item, i) => {
                item.id = i;
            });
            app.saveInfo();
        },
        saveInfo: function() {    //保存待办项到浏览器
            localStorage.setItem("allList", JSON.stringify(app.allList));
        }
    },
    mounted() {
        //挂载时把浏览器保存的待办项加载进来
        this.allList = JSON.parse(localStorage.getItem("allList"))
    }
})