todolist–初学者练习使用vuejs方法

Vuejs的前端开发的最火的三大框架之一，它极大地方便了我们的前端工作者的工作，这是笔者整理的一份用vue写的一个todolist的整个过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

1.新建一个文件夹，配置环境变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

安装的命令行有：
npm init -y
npm i -S todomvc-app-css underscore vue

2.新建一个HTML文件，复制格式化后的代码段，网址：...文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

将代码段里边的显示内容修改为中文

3.引入Vuejs css等文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<link rel="stylesheet" href="node_modules/todomvc-app-css/">
<script src="node_modules/vue/dist/"></script>
<script src="node_modules/underscore/"></script>
<script src="js/" charset="utf-8"></script>

4.新建一个vue实例(框架)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<script src="./node_modules/vue/dist/" charset="utf-8"></script>
<script>
  // 新建一个Vue的实例对象
  var todoapp = new Vue({
    // 挂载
    el: '.todoapp',
    // 数据
    data: {

    },
    
    // 计算属性
    computed: {

    }
  })
</script>

5.实现的全过程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

向data中的todoList中写入数据
data: {
  // 备忘录数组
  todoList: [
    // 一个任务就是一个对象，text表示任务的名称，checked为true表示已完成，false表示未完成
    {
      text: '学习Vue',
      checked: false
    },
    {
      text: '学习React',
      checked: false
    }
  ]
},

6.给li元素加上v-for指令，代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<li class="completed" v-for="(todo,index) in todoList" :key="'todo-'+index">

7.<label>中显示输入的任务，代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<label>{{  }}</label>

8.修改任务的checked值为true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

{
  text: '学习React',
  checked: true
},

9.给li元素动态绑定class,completed样式的值，根据, 如果为 true时则有completed样式，否则无completed的样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<li :class="{completed: }" v-for="(todo,index) in todoList" :key="'todo-'+index">

10.给checkbox加上v-model，值为, checked属性会自动和关联文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<input class="toggle" type="checkbox" v-model=""/>

11.在data中新建任务文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

data: {
  // 新的备忘录
  newTodo: '',
}

元素绑定，回车事件和自动除去前后空格的任务的添加文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<input class="new-todo" placeholder="你接下来需要完成什么?" autofocus="" v-model="newTodo" @"addTodo"/>


// 添加任务的方法,在methods中添加
addTodo() {
  // 去除前后的空格
  this.newTodo = this.newTodo.trim();
  //内容为空
  if (this.newTodo.length < 1) {
    return;
  }
  // 新建的任务添加到数组,默认状态为未完成
  ({
    text: this.newTodo,
    checked: false
  });
  // 回车后清空输入框的内容
  this.newTodo = ''
}

13.添加一个计算属性，判断是否显示任务列表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

// 显示列表，如果有任务，则任务列表大于1，显示，如果没有任务则不显示
computed: {
  showList() {
    return .length > 0;
  }
}

14.添加v-show:指令到section和footer文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<section class="main" v-show="showList">
<footer class="footer" v-show="showList">

15.绑定删除任务事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<button class="destroy" @click="deleteTodo(todo)"></button>

引入underscore
<script src="./node_modules/underscore/" charset="utf-8"></script>

16.删除任务方法写在methods中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

methods: {
  // 删除任务
  deleteTodo(todo) {
     = _.without(, todo)
  }
}

17.任务建立之后想要在任务上修改的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<input class="edit" type="text" v-model="" />
进入编辑模式
添加一个数据项：
data: {
  // 正在编辑的任务索引
  editingIndex: -1,
}
绑定双击事件：
<label @dblclick="editTodo(index)">{{  }}</label>
方法
methods: {
  // 编辑任务
  editTodo(index) {
    // 设置一下当前正在编辑的索引
    this.editingIndex = index;
  }
}

18.在li中加上class文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<li :class="{completed: , editing: index === editingIndex}" v-for="(todo,index) in todoList" :key="'todo-'+index">

自定义指令,（写在script中）：
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    ();
  },
  update(el) {
      ();
  }
})

19.使用自定义指令文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<input class="edit" type="text" v-model="" v-focus="index === editingIndex"/>

添加保存todo, 实际上就是把input框取消
<input class="edit" type="text" v-model="" v-focus="index === editingIndex" @blur="saveTodo(todo)" @"saveTodo(todo)"/>
保存的方法
methods: {
  ...
  // 保存任务，因为是动态绑定的，不需要再保存，只需要把input框隐藏即可
  saveTodo(todo) {
    this.editingIndex = -1
    if (.trim().length < 1) {
      (todo)
    }
  }
}

20.未完成的数量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

computed: {
  // 未完成的任务数量
  activeCount() {
    return .filter(item => {
      return !
    }).length;
  }
}

21.数据保存到本地localStorage，新建文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

var STORAGE_KEY = 'todoList'
window.todoStorage = {
    fetch() {
    try {
      return JSON.parse((STORAGE_KEY) || '[]');
    } catch(error) {
      return [];
    }
    },
    save(todoList) {
        (STORAGE_KEY, (todoList));
    }
}

引入
<script src="./js/" charset="utf-8"></script>
在data中修改初始化数据：
data: {
  todoList: ()
}

22.在Vue实例中添加一个属性变化观察，全局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

// 观察属性变化
watch: {
  todoList: {
    deep: true,
    handler: 
  }
},

23.全部完成功能的添加文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

添加计算属性：
computed: {
  // 是否所有任务都完成
  allDone: {
    get() {
      // 未完成的数量为0表示全部完成,全部完成返回true
      return this.activeCount === 0;
    },
    set(value) {
      (todo => {
         = value
      });
    }
  }
}
使用v-model绑定全部完成功能：
<input class="toggle-all" type="checkbox" v-model="allDone" />

24.实现过滤所有，已完成，未完成的功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

在实例化Vue对象外面放一个普通的过滤对象：
```
// 一个普通的过滤的对象, 用来过滤任务列表
var filters = {
  all: function (todos) {
    return todos;
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !;
    });
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return ;
    });
  }
};
```
添加一个属性visibility 来表示我们要显示所有，还是显示未完成，或已完成
data: {
  visibility: 'all',
  ...
}
修改一下未完成的数量这个计算属性，使用上面的filters对象去过滤
computed: {
  ...
  // 未完成的任务数量
  activeCount() {
    return filters.active().length;
  },
}

25添加任务过滤的计算属性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

computed: {
  ...
  // 过滤任务列表
  filteredTodoList: function () {
    return filters[]();
  }
}

在DOM当中添加点击事件，点击的时候修改visiblity属性即可
<li>
  <a
  :class="{selected: visibility === 'all'}"
  href="#/"
  @click="visibility='all'"
  >所有</a>
</li>
<li>
  <a
  :class="{selected: visibility === 'active'}"
  href="#/active"
  @click="visibility = 'active'"
  >未完成</a>
</li>
<li>
  <a
  :class="{selected: visibility === 'completed'}"
  href="#/completed"
  @click="visibility = 'completed'">已完成</a>
</li>

26、列表渲染的循环语句修改：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<li
  :class="{completed: , editing: index === editingIndex}"
  v-for="(todo,index) in filteredTodoList" :key="'todo-'+index"
  >
添加一个变量，得到hash值：
var visibility = (('/')+1);
visibility = visibility === '' ? 'all' : visibility
设置visibility属性的值为当前的这个变量：
data: {
  visibility: visibility,
  ...
}

27.点击清空已完成功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

添加一个已完成的任务数量计算属性：
computed: {
  ...
  // 已完成的任务数量
  completedCount() {
    return filters.completed().length;
  }
}

添加一个清空已完成的方法：
methods: {
  ...
  // 清空已完成的任务列表
  clearCompleted() {
     = filters.active()
  }
}

28、DOM元素绑定事件，以及v-show:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18775.html

<button class="clear-completed" @click="clearCompleted" v-show="completedCount > 0">清空已完成</button>