[IMWeb训练营作业]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中统一管理

 事件对象：在事件处理函数中获取；内联事件处理函数执行，传入事件对象。$event

 

事件修饰符：

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

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

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

按键修饰符：

.enter  .tab   .delete  .esc  .space  .up   .down .left   .right   .ctrl  .alt  .shift   .meta   .键值

 

执行事件处理函数时可以进行传参

<input placeholder="勇敢自信youcan；   提示：+回车即可添加任务"
        class="task-input"
        type="text"
        v-model="todo"
        v-on:keyup.enter="addTodo(123,$event)"
/>

 

new Vue({
    el:".main",
    data:{
        list:list,
        todo:""
    },
    methods:{ //统一管理事件处理函数
        addTodo:function(data,ev){              /*//添加任务
//向list中添加一项任务//事件处理函数中的this指向的是当前这个根实例*/

                       this.list.push({
                /*title:ev.target.value*/
                title:this.todo     //替换上面的语句，减少dom操作
            });
            this.todo=" ";  //数据更新视图
        }
    }
});

 

条件渲染：

 v-show指令：根据表达式的值，用来显示或隐藏元素。

 语法：v-show=”表达式”

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

 

动态绑定class：

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

 语法：

:class=”{className:表达式}”

     表达式值为true，添加className，否则不添加

:class=”[className,className]” 

自定义指令：

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

  选项对象的directives属性{

    directives:{}

}

钩子函数：

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

  钩子函数中参数：

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

binding：一个对象

value：指定的绑定值

实验结果图：

核心代码：

var list = [
   {
      title:"勇敢勇敢再勇敢",
      isChecked:false //false，不选中  任务未完成
   },
   {
      title:"坚强坚强再坚强",
      isChecked:true   //true，选中    任务完成
   }
];

new Vue({
   el:".main",
   data:{
      list:list,
      todo:"",
      edtorTodos:'',  //记录正在编辑的数据
      beforeTitle:'' //记录正在编辑的数据的title
   },
   computed:{
      noCheckeLength:function(){
         return this.list.filter(function(item){
                return !item.isChecked
            }).length
      }
   },
   methods:{
      addTodo(){  //添加任务
         this.list.push({
            title:this.todo,
            isChecked:false
         });
         this.todo = '';
      },
      deleteTodo(todo){ //删除任务
         var index = this.list.indexOf(todo);
         this.list.splice(index,1);
      },
      edtorTodo(todo){  //编辑任务
         console.log(todo);
         //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
         this.beforeTitle = todo.title;

         this.edtorTodos = todo;


      },
      edtorTodoed(todo){ //编辑任务成功
         this.edtorTodos = '';
      },
      cancelTodo(todo){  //取消编辑任务

         todo.title = this.beforeTitle;

         this.beforeTitle = '';

         //让div显示出来，input隐藏
         this.edtorTodos = '';
      }
   },
   directives:{
      "foucs":{
         update(el,binding){
            if(binding.value){
               el.focus();
            }
         }
      }
   }
});

<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
    <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in list" >
        <div class="view">
            <input class="toggle" type="checkbox" v-model="item.isChecked" />
            <label @dblclick="edtorTodo(item)">{{ item.title }}</label>
            <button class="destroy" @click="deleteTodo(item)"></button>
        </div>
        <input 
            v-foucs="edtorTodos === item" 
            class="edit" 
            type="text" 
            v-model = "item.title"
            @blur="edtorTodoed(item)"
            @keyup.up="edtorTodoed(item)"
            @keyup.esc="cancelTodo(item)"
        />
    </li>
</ul>

继续努力。。。。。。