【Vue】高级系列（五）Vue模块化实战-demo2-任务清单todoList

最新推荐文章于 2024-04-29 18:09:02 发布

YK菌

最新推荐文章于 2024-04-29 18:09:02 发布

阅读量2.9k

点赞数 10

分类专栏：前端框架Vue 文章标签： vue html javascript

本文链接：https://blog.csdn.net/weixin_44972008/article/details/113916670

版权

项目代码 https://github.com/yk2012/vue_demo/tree/main/demo3_TodoList

1. 目标功能界面

在这里插入图片描述

2. 界面模块拆分

在这里插入图片描述

3. 主页 index.html

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

4. 静态页面搭建

4.1 main.js

引入基础css样式

import Vue from 'vue';
import App from './App.vue';
import './base.css';

new Vue({
   
    el: '#app',
    components: {
    App },
    template: '<App/>'
})

4.2 App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">

      <TodoHeader />
      <TodoList />
      <TodoFooter />

    </div>
  </div>
</template>

<script>
  import TodoHeader from './components/TodoHeader';
  import TodoList from './components/TodoList';
  import TodoFooter from './components/TodoFooter';

  export default {
     
    components:{
     
      TodoHeader,
      TodoList,
      TodoFooter
    }
  }
</script>

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

4.3 TodoHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
  </div>
</template>

<script>
export default {
     

}
</script>

<style>
/*header*/
.todo-header input {
     
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
     
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

</style>

4.4 TodoList.vue

<template>
  <ul class="todo-main">
    <li>
      <label>
        <input type="checkbox"/>
        <span>xxxxx</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>