La base caja frontal -TodoList

Capítulo 4 Caso ToDoList

Mercado: ToDoList , maravillosa lista , la lista de garrapata

Aprender a practicar los términos usados: TodoMVC , ejemplos oficiales Vue

¿Por caso, un:

Características del producto concisa, requisitos claros, amplios puntos de conocimiento requeridas; fácil de implementar funciones básicas, que cubre los fundamentos de lo que han aprendido; y escalable, perfeccionar todas las características de más compleja, el número requerido de tecnología; en el aprendizaje, la flexibilidad de elegir;

4.1 Proyecto de inicialización

En la ejecución del directorio del proyecto de npm installfin de descargar los recursos estáticos requeridos; el código marco Vue.js, copiar en el directorio js, introducido en el vue index.html:<script src="./js/vue.js"></script>

Al mismo tiempo la parte inferior de index.html, el proyecto introdujo app.js; escribimos código vuejs se colocan en este archivo;

4.2 Los datos de recorrido

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属性简写
    }
})

<ul class="todo-list">
    <li v-for="(val,key) in list_data">
        <div class="view">
            <input class="toggle" type="checkbox" v-model="val.stat">
            <label>{{val.title}}</label>
            <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web">
    </li>
</ul>

4.3 hay datos que muestran el estado de

Las etiquetas y el contenido son dos etiquetas en la sección de pie de página, y cuando no hay datos list_data, sólo tenemos dos etiquetas para ocultar esto:

<section v-if="list_data.length" class="main">
……
</section>
<footer v-if="list_data.length" class="footer"> 
……
</footer>

Dos etiquetas tienen v-ifal juez, por lo que podemos utilizar un divpaquete de dos etiquetas, la divoculta se puede:

<div v-if="list_data.length">
    <section  class="main">
    ……
    </section>
    <footer  class="footer"> 
    ……
    </footer>
</div>

Si tiene contenido, el libro DOM será más de una etiqueta div, entonces podemos optar por utilizar template(la plantilla vue ID), cuando existe, el navegador no hacen este nodo;

<template v-if="list_data.length">
    <section  class="main">
    ……
    </section>
    <footer  class="footer"> 
    ……
    </footer>
</template>

4.3 Añadir una tarea

Bind entereventos de teclado:

<input @keyup.enter="addTodo" class="new-todo" placeholder="请输入" autofocus>

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

Modificar el código para completar la tarea se añade:

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 Seleccione la tarea con el anti-elección

Haga clic en la flecha hacia abajo para el cuadro de texto izquierdo, seleccionar todo y para lograr la operación anti-elección

Haga clic en un elemento de unión de eventos:

<input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox">

Agregar un controlador:

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

4,5 para completar la tarea

Si se completa la tarea, al estado seleccionado, liuna classpropiedad completedcuando hay texto subrayado;

<li v-for="(val,key) in list_data" v-bind:class="{completed:val.stat}">

4.6 Eliminar tarea

evento click se unen, el valor del índice actual del controlador de eventos entrantes:

<button @click="removeTodo(key)" class="destroy"></button>

Según el índice, elimine los datos correspondientes:

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

4.7 Eliminar tareas completadas

eventos de unión

<button @click="removeAllDone" class="clear-completed">Clear completed</button>

Recorrer todos los datos se ha marcado para tareas de eliminación:

removeAllDone(){
    for(let i=0;i<list_data.length;i++){
        if(list_data[i].stat == true){
            this.list_data.splice(i,1);
        }
    }
}

código de bucle se ve incómodo, Array.prototype.filter()método crea una nueva matriz, que contiene todos los elementos para lograr mediante pruebas de la función de la oferta.

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);

Modificar código del artículo:

removeAllDone(){
    // 原始循环判断用法
    // for(let i=0;i<list_data.length;i++){
    // 	if(list_data[i].stat == true){
    // 		this.list_data.splice(i,1);
    // 	}
    // }
	
    // 上面是循环删除符合条件的数据
    // 下面是保留不符合条件的数据
    
    // 原始标准库对象方法
    // this.list_data = this.list_data.filter(function(v){
    // 	if(v.stat == false){
    // 		return true;
    // 	}
    // })
	
    // 箭头函数方法
    // this.list_data = this.list_data.filter(function(v){
    // 	return !v.stat;
    // })
	
    // 精简方法
    this.list_data = this.list_data.filter((v)=>!v.stat);
},

ToDoList casos vienen temporalmente a su fin, no terminar el producto, porque tenemos que utilizar el conocimiento del otro;