Vue学习笔记——制作一个todoList

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习笔记——制作一个todoList相关的知识，希望对你有一定的参考价值。

列表渲染

v-for指令

根据一组数组的选项列表进行渲染

语法：value,key in items  |  value,key of items

变异方法

vue提供一组方法，对数组进行操作的时候，会触发视图更新。

push()　　pop()　　shift()　　unshift()　　splice()　　sort()　　reverse() 

事件处理器

v-on指令

用来监听DOM事件触发代码

语法：v-on:eventName="eventHandle"

指令简写：@

事件处理函数：写在methods中统一管理

事件对象：在事件处理函数中获取

事件修饰符

事件处理函数只有纯粹的逻辑判断，不处理DOM事件的细节。例如阻止冒泡，取消默认行为，判断按键。

修饰符的位置：v-on:eventName.修饰符

修饰符：.stop　　.prevent　　.capture　　.self　　.once

按键修饰符：.enter　　.tab　　.delete　　.esc　　.space　　.up　　.down　　.left　　.right

.ctrl　　.alt　　.shift　　.meta　　.键值

条件渲染

根据表达式的值，用来显示或隐藏元素

语法：v-show="表达式"（表达式值为true显示）

元素会被渲染在页面中，只根据表达式的值进行css切换

动态绑定class

class也为元素的属性，可以使用v-bind:class

语法：v-bind:class="{className:表达式}"（表达式值为true添加className）

v-bind指令简写为：

自定义指令

除了vue内置的指令，可以自己设置指令

选项对象的directives属性

{

　　directives:{}

}

钩子函数

update被绑定元素所在的模板更新时调用

钩子函数中的参数：

　　el:指令所绑定的元素，可以用来直接操作DOM

　　binding:一个对象

　　　　value:指令的绑定值

计算数据

模板是为了描述视图的结构，模板中放入太多逻辑会导致模板过重难以维护。

例如下面在模板中筛选未完成任务个数，这样的写法是不够好的：

          <li>
            {{
                list.filter(function(item){
                    return !item.isChecked;
                }).length
            }}
           个任务未完成</li>

在计算一个属性时，vue.js更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。

语法：在选项对象中

　　{

　　...

　　computed:{}

　　}

对上面的例子的改进：

    computed:{
        nocheckLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked;
            }).length
        }
    },

附上已具备增删改的todoList代码

todoList.html

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
    <script src="./vue.js"></script>
</head>
<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input type="text" placeholder="例如：买大房子；  提示：回车即可添加任务" class="task-input" v-on:keyup.enter="addTodo"
        v-model="todo"
        />
        <ul class="task-count" v-show="list.length">
            <li>
            {{
                nocheckLength
            }}
            个任务未完成</li>
            <li class="active">
                <a href="#" class="active">所有任务</a>
                <a href="#">未完成的任务</a>
                <a href="#">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <li class="todo" :class="{completed:item.isChecked,editing:item === editorTodos}" v-for="item in list">
                    <div class="view">
                        <input type="checkbox" class="toggle" v-model="item.isChecked">
                        <label @dblclick="editorTodo(item)">{{item.title}}</label>
                        <button class="destroy" @click="deleteTodo(item)"></button>
                    </div>
                    <input type="text" class="edit" v-model="item.title" 
                    v-focus="editorTodos === item"
                    @blur="editorTodoed(item)"
                    @keyup.13="editorTodoed(item)"
                    @keyup.esc="cancelTodo(item)"
                    />
                </li>
            </ul>
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>
View Code

index.css

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
    <script src="./vue.js"></script>
</head>
<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input type="text" placeholder="例如：买大房子；  提示：回车即可添加任务" class="task-input" v-on:keyup.enter="addTodo"
        v-model="todo"
        />
        <ul class="task-count" v-show="list.length">
            <li>
            {{
                nocheckLength
            }}
            个任务未完成</li>
            <li class="active">
                <a href="#" class="active">所有任务</a>
                <a href="#">未完成的任务</a>
                <a href="#">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <li class="todo" :class="{completed:item.isChecked,editing:item === editorTodos}" v-for="item in list">
                    <div class="view">
                        <input type="checkbox" class="toggle" v-model="item.isChecked">
                        <label @dblclick="editorTodo(item)">{{item.title}}</label>
                        <button class="destroy" @click="deleteTodo(item)"></button>
                    </div>
                    <input type="text" class="edit" v-model="item.title" 
                    v-focus="editorTodos === item"
                    @blur="editorTodoed(item)"
                    @keyup.13="editorTodoed(item)"
                    @keyup.esc="cancelTodo(item)"
                    />
                </li>
            </ul>
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>
View Code

app.js

技术分享图片 
var list=[
    {
        title:"学习vue",
        isChecked:false //状态为true，选中
    },
    {
        title:"走向人生巅峰",
        isChecked:true
    }

];
new Vue({
    el:".main",
    data:{
        list:list,
        todo:‘‘,
        editorTodos:‘‘ ,//记录正在编辑的数据
        beforeTitle:‘‘ //记录正在编辑的数据的title
    },
    computed:{
        nocheckLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked;
            }).length
        }
    },
    methods:{
        //添加任务
        addTodo(ev){ //函数简写的方式，es6
            this.list.push({
                title:this.todo,
                isChecked:false
            });   //事件处理函数中的this指向的是当前这个根实例

            this.todo = ‘‘;
        },
        //删除任务
        deleteTodo(todo){
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        //编辑任务
        editorTodo(todo){ 
            console.log(todo);
            //编辑任务的时候记录一下这条任务的title,方便在取消编辑的时候重新复制回来
            this.beforeTitle = todo.title;
            this.editorTodos = todo;
        },
        //编辑完成
        editorTodoed(todo){
            this.editorTodos = "";
        },
        //取消编辑
        cancelTodo(todo){
            todo.title = this.beforeTitle;
            this.beforeTitle = ‘‘;
            //让div显示，input隐藏
            this.editorTodos = ‘‘;
        }
    },
    directives:{
        "focus":{
            update(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
});
View Code

 

以上是关于Vue学习笔记——制作一个todoList的主要内容，如果未能解决你的问题，请参考以下文章

vue学习笔记—— 组件化实现todoList

vue框架制作TodoList

[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)

[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)

Vue2.0学习—Todolist案例（五十九）

基于vue的todolist案例