使用 vue.js 构建一个简单的 todoList 应用

最新推荐文章于 2020-09-23 22:01:56 发布

淘淘是只狗

最新推荐文章于 2020-09-23 22:01:56 发布

阅读量295

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43477721/article/details/105160575

版权

vue 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

1.安装 Vue-cli

npm install -g vue-cli

2. 使用脚手架初识化项目

vue init webpack my-project

在这里插入图片描述

3.运行项目

cd my-project
npm run dev

4.正式编写

由于是简单应用，所以直接改造 main.js 和 index.htnl

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-notes</title>
  </head>
  <body>
    <div id="app">
      <p>{{title}}</p>
      <p v-if="showSub">{{subTitle}}</p>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// import App from './App'
// import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

new Vue({
	// 将 inndex.html 文件里面的 id="app",这个 div 作为整个应用的容器
  el: '#app',
  // data 存放的是变量
  data () {
    return {
      title: 'hello Vue.js',
      subTitle: 'Vue is good',
      showSub: true
    }
  }
})

以上是变量的渲染，既然是 todoList ,就是一个列表，接下来进行列表的渲染

main.js

new Vue({
  el: '#app',
  data () {
    return {
      title: 'hello Vue.js',
      subTitle: 'Vue is good',
      showSub: true,
      todos: [
        '吃饭',
        '睡觉',
        '写代码'
      ]
    }
  }
})

index.html

<body>
    <div id="app">
      <p>{{title}}</p>
      <p v-if="showSub">{{subTitle}}</p>
      <ul>
        <li v-for="todo in todos">{{todo}}</li>
      </ul>
    </div>
    <!-- built files will be auto injected -->
  </body>

列表渲染出来了，但是数据是固定的，接下来要把用户输入的值，渲染到界面上

index.html

<body>
    <div id="app">
      <p>{{title}}</p>
      <p v-if="showSub">{{subTitle}}</p>
      // input 输入框，绑定 mytodo 变量
      <div class="">
        <input type="text" v-model="mytodo">
        // button 绑定点击事件 handleClick
        <button @click="handleClick">添加</button>
      </div>
      <ul>
        <li v-for="todo in todos">{{todo}}</li>
      </ul>
    </div>
    <!-- built files will be auto injected -->
  </body>

main.js

new Vue({
  el: '#app',
  data () {
    return {
      title: 'hello Vue.js',
      subTitle: 'Vue is good',
      showSub: true,
      mytodo: '',
      todos: [
        '吃饭',
        '睡觉',
        '写代码'
      ]
    }
  },
  methods: {
    handleClick () {
    // 将用户输入的值， push 到 todo 这个列表里面
      this.todos.push(this.mytodo)
      // 输入框内容置空
      this.mytodo = ''
    }
  }
})

接下来要实现，点击 todo 变成灰色，告诉用户这件事已经做完了,并且在页面中添加用户 todo 的数据

index.html

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-notes</title>
    <style>
      li.done {
        text-decoration: line-through;
        color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>{{title}}</p>
      <p v-if="showSub">{{subTitle}}</p>
      <div class="">
        <input type="text" v-model="mytodo">
        <button @click="handleClick">添加</button>
      </div>
      <ul>
      // 给 todo 添加一个 toggle 函数 同时将 todo 的 Index 传入
        <li :class="{'done': todo.done}" @click="toggle(index)" v-for="(todo, index) in todos">{{index}}-----{{todo.text}}</li>
      </ul>
      // todo 的数量 remain 是未完成的数量
      <p>{{remain}}/{{todos.length}}</p>
    </div>
    <!-- built files will be auto injected -->
  </body>

main.js

new Vue({
  el: '#app',
  data () {
    return {
      title: 'hello Vue.js',
      subTitle: 'Vue is good',
      showSub: true,
      mytodo: '',
      // 改变数据的结构
      todos: [
        {
          text: '吃饭',
          done: false
        },
        {
          text: '睡觉',
          done: false
        },
        {
          text: '写代码',
          done: false
        }
      ]
    }
  },
  // 利用 computed 实时计算 todo 未完成的数量
  computed: {
    remain () {
    // filter 过滤掉已完成的数量，求取未完成的数量
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    handleClick () {
      this.todos.push({
        text: this.mytodo,
        done: false
      })
      this.mytodo = ''
    },
    // 点击 todo 调用 toggle 函数，将 todo 的状态 进行取反
    toggle (i) {
      this.todos[i].done = !this.todos[i].done
    }
  }
})

接下来要把完成的 todo 进行清空

index.html

<body>
    <div id="app">
      <p>{{title}}</p>
      <p v-if="showSub">{{subTitle}}</p>
      <div class="">
        <input @keyup.enter="handleClick" type="text" v-model="mytodo">
        <button @click="handleClick">添加</button>
        // 清空已完成的 todo
        <button @click="clean">清空</button>
      </div>
      <ul>
        <li :class="{'done': todo.done}" @click="toggle(index)" v-for="(todo, index) in todos">{{index}}-----{{todo.text}}</li>
      </ul>
      <p>{{remain}}/{{todos.length}}</p>
    </div>
    <!-- built files will be auto injected -->
  </body>

main.js

methods: {
    handleClick () {
      this.todos.push({
        text: this.mytodo,
        done: false
      })
      this.mytodo = ''
    },
    toggle (i) {
      this.todos[i].done = !this.todos[i].done
    },
    // 清空已完成的 todo
    clean () {
      this.todos = this.todos.filter(v => !v.done)
    }
  }

最后我们把这个改造成单组件

在 components 里面创建一个 todoList.vue

todoList.vue

<template>
    <div>
    <p>{{title}}</p>
      <p v-if="showSub">{{subTitle}}</p>
      <div class="">
        <input @keyup.enter="handleClick" type="text" v-model="mytodo">
        <button @click="handleClick">添加</button>
        <button @click="clean">清空</button>
      </div>
      <ul>
        <li
          :class="{'done': todo.done}"
          @click="toggle(index)"
          v-for="(todo, index) in todos"
          :key="index"
        >{{index}}-----{{todo.text}}</li>
      </ul>
      <p>{{remain}}/{{todos.length}}</p>
    </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'hello Vue.js',
      subTitle: 'Vue is good',
      showSub: true,
      mytodo: '',
      todos: [
        {
          text: '吃饭',
          done: false
        },
        {
          text: '睡觉',
          done: false
        },
        {
          text: '写代码',
          done: false
        }
      ]
    }
  },
  computed: {
    remain () {
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    handleClick () {
      this.todos.push({
        text: this.mytodo,
        done: false
      })
      this.mytodo = ''
    },
    toggle (i) {
      this.todos[i].done = !this.todos[i].done
    },
    clean () {
      this.todos = this.todos.filter(v => !v.done)
    }
  }
}
</script>

<style lang="css" scoped>
li.done {
        text-decoration: line-through;
        color: #ccc;
    }
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-notes</title>
    <style>
    </style>
  </head>
  <body>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    <todoList></todoList>
  </div>
</template>

<script>
import todoList from './components/todoList'
export default {
  name: 'App',
  components: {
    todoList
  }
}
</script>

<style>
</style>

gitee地址

淘淘是只狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 vue.js 构建一个简单的 todoList 应用

1.安装 Vue-clinpm install -g vue-cli2. 使用脚手架初识化项目vue init webpack my-project3.运行项目cd my-projectnpm run dev4.正式编写由于是简单应用，所以直接改造 main.js 和 index.htnlindex.html<!DOCTYPE html><html&...
复制链接

扫一扫