06nodejs 第8天 VUE 第2天 总结+案列

在线地址：https://shimo.im/docs/811f224c55af4910

在线地址：https://docs.qq.com/doc/DQXRxTElzWlFmUlpW

TodoList 案例

上市产品： ToDoList 、奇妙清单 、滴答清单

学习练手项目 ： TodoMVC 、 Vue官方示例

为什么选择这样的案例：

产品功能简洁，需求明确，所需知识点丰富；实现基本功能容易，涵盖所学基础知识；而可扩展性强，完善所有功能比较复杂，所需技术众多；在学习中，可以灵活取舍；

 

4.1 项目初始化

在项目目录中执行 npm install 命令，下载所需静态资源 ; 将Vue.js框架代码，复制到 js 目录，在index.html中引入 vue :

同时 在 index.html 最下方，项目引入了app.js ; 而我们要写的 vuejs 代码，都放在这个文件中；

4.2 数据遍历

const list_data = [
    {id:1,title:'吃饭',stat:true},
    {id:2,title:'睡觉',stat:false},
    {id:3,title:'打豆豆',stat:true},
]

new Vue({
    el:'#todoapp',
    data:{
        // list_data:list_data,
        list_data,// es6属性简写
    }
})

    

        

            
            {{val.title}}
            
        
        
    

4.3 展示无数据状态

标签及内容都是在 section footer 两个标签中的，当 list_data 中没有数据时，我们只需要隐藏这个两个标签即可：

……

 
……

两个标签都有 v-if 判断 ，因此我们可以使用一个 div 包裹两个标签，使 div 隐藏即可：

    

    ……
    
    
 
    ……
    

如果有内容，那么 DOM 书中就会多出一个 div 标签，那么我们可以选择使用 template (vue中的模板标识)，有内容时，浏览器渲染不会有此节点；

4.3 添加任务

绑定 enter 键盘事件:

new Vue({
    el:'#todoapp',
    data:{
        // list_data:list_data,
        list_data,// es6属性简写
    },
	//添加事件处理器    
    methods:{
        // addTodo:function(){}
        // 简写形式
        addTodo(){
            console.log(123);
        }
    }
})

修改代码完成任务添加：

methods: {
    // 添加任务
    // addTodo:function(){}
    // 简写形式 
    addTodo(ev) {
        // 获取当前触发事件的元素
        var inputs = ev.target;
        // 获取value值，去除空白后判断，如果为空，则不添加任务
        if (inputs.value.trim() == '') {
            return;
        }
        // 组装任务数据
        var todo_data = {
            id: this.list_data.length + 1 + 1,
            title: inputs.value,
            stat: false
        };
        // 将数据添加进数组
        this.list_data.push(todo_data);
        // 清空文本框内容
        inputs.value = '';
    }
}

4.4 任务的全选与反选

点击文本框左边的下箭头，实现全选和反选操作

为元素绑定点击事件：

添加处理程序：

toggleAll(ev){
   // 获取点击的元素 
    var inputs = ev.target;
    // console.log(inputs.checked);
    // 循环所有数据为状态重新赋值
    // 因为每个元素的选中状态都是使用 v-model 的双向数据绑定，
    // 因此 数据发生改变，状态即改变，状态改变，数据也会改变
    for(let i=0;i

4.5 完成任务

如果任务完成，状态改为选中， li 的 class 属性为 completed 时文字有中划线；

4.6 删除任务

绑定点击事件，将当前索引值传入事件处理程序：

按照索引，删除相应的数据：

removeTodo(key){
    this.list_data.splice(key,1);
},

4.7 删除已完成的任务

绑定事件

Clear completed

循环遍历所有数据，删除已被标记为完成的任务：

removeAllDone(){
    for(let i=0;i

循环的代码看起来很不舒服, Array.prototype.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

var arr = [1,4,6,2,78,23,7,3,8];
// 原始写法
// var new_arr = arr.filter(function(v){
//     // if(v>8){
//     //     return true;
//     // }
//     return v>8;
// })

// 箭头函数写法
// var new_arr = arr.filter((v)=>{
//     return v>8;
// })

// 精简写法
var new_arr = arr.filter((v)=> v>8);

console.log(new_arr);

修改项目代码：

removeAllDone(){
    // 原始循环判断用法
    // for(let i=0;i!v.stat);
},

TodoList案例暂时告一段落，我们并没有将产品做完，因为我们需要用到其他知识了；

 

Vue Devtools 调试工具

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。