vue2 todolist案例

 

1，首先利用vue脚手架@vue/cli@4.5.13，创建vue2 项目 （安装过程有发布，可去查看）

2，配置ESLint:

解决ESLint和pretties之间冲突：关于方法后面是否需要空格问题（避免麻烦）

    'space-before-function-paren':'off'

3，下载dayjs库

npm i dayjs -S

4，在src目录下创建自定义插件（plugins.js）:

（1）实现全局过滤器：用于时间格式化

（2）实现自定义指令：输入框自动获取焦点

import dayjs from 'dayjs'
export default{
  install(Vue){
        Vue.filter('format',function(val,time){
          return dayjs(val).format(time)
        })
        Vue.directive('fbind',{
          bind(ele,binding){
            ele.value=binding.value
          },
          inserted(ele,binding){
            ele.focus()
          },
          update(ele,binding){
            ele.value=binding.value
          }
        })
  }
}

如图

5，在main.js文件中引入这个文件(plugins.js)

import plugins from '@/plugins.js'
Vue.use(plugins)

 6，利用element-UI库实现静态页面，拆分成四个组件：

（1）实现列表数据渲染 （实现时间格式化）效果图如下：

src文件夹的App.vue文件

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader />
        <MyList :todos="todos" />
        <MyFooter />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyList from '@/components/MyList.vue'
import MyFooter from '@/components/MyFooter.vue'
export default {
  name: 'App',
  data() {
    return {
      todos: [
        { id: '001', title: '抽烟', time: Date.now(), done: false },
        { id: '002', title: '喝酒', time: Date.now(), done: true },
        { id: '003', title: '烫头', time: Date.now(), done: false },
        { id: '004', title: '学习', time: Date.now(), done: true }
      ]
    }
  },
  components: { MyHeader, MyList, MyFooter },
  methods: {}
}
</script>

<style lang="less">
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

 在src文件夹的components文件夹的Myheader.vue文件

<template>
  <div class="todo-header">
    <el-input placeholder="请输入你的任务名称，按回车键确认"></el-input>
  </div>
</template>
<script>
export default {
  name: 'MyHeader',
  components: {},
  mixins: [],
  props: {},