待办事项网页实现-添加

学员
131 阅读4分钟

一：获取输入框输入的数据

image.png 实现上图有以下两种方法：

方法1

image.png

方法2

image.png

二：把用户的输入包装成一个todo对象

因为我们之前就做了一些数据，这些数据就是包含id,title,done的一个个对象
image.png

获得一个唯一id

可以用随机数Math.random()（但好像随机数可能会重复），时间戳Date.now()

在有服务器的情况下，我们只负责把title和done交给给服务器，由服务器往数据库写入数据，数据库自动生成id
image.png

在我们这种没有服务器情况，(我们可以通过uuid获得唯一的字符串编码，但是我们不用这个，因为这个库太大了，生成的字符串也很长)我们可以通过nanoid(nanoid是把uuid在一定程度上做了一些精简)来等到我们要的id。

先下载nannoid

image.png

不行的在vscode右键的属性兼容性勾上管理员运行，然后用管理员打开vscode就可以；

如果停滞不前请多等一会，等一下就好了

引入使用nanoid,并输出将用户的输入包装后的对象

image.png image.png

三：将用户的输入并且被包装成对象后的数据放到列表上

现在我们就要将输入的数据放到列表上，就是说我们需要将Header的数据放到List里
image.png

但是就我们现在所学到的知识，要想把组件外的数据放到组件里，要通过组件标签，比如：如果我要往UserList里传x的值，我要这样写：<UserList / x="1">,但是在UserHeader里并没有UserList标签，所以我们没法将Header的数据放到List。
image.png

一般如果一个组件含有其他的组件标签，这两个组件的关系就是“父子关系”，而app组件包含UserHeader和UserList组件标签，是它们的父组件。所以如果app这个父组件想给它们两个传数据是很容易的。
image.png

由于两个子组件UserHeader和UserList不能进行数据的传递
image.png

第一条线：我们可以把todos:[...]放到app组件上，再通过之前学到的props将todos:[...]传给UserList组件
image.png

第二条线：这样我们只要将Header的todoObj给app组件的todos就行了呀
image.png

先将原本UserList组件的todos:[...]改放到app组件上

我们先实现第一条线：
把List里的todos放到app组件，在UserList.vue中把todos数组剪切走
image.png

粘贴到app.vue中，再在UserList标签上加上:todos="todos"（不要忘了加冒号）
image.png

再在List文件中用props接收
image.png

这样在vc组件实例对象上就可以看到todos，也就是说要使用时直接用todos就可以了
image.png

然后打开页面如果todos的数据都呈现出来且没报错，说明第一条线完成了
image.png

将UserHeader的todoObj传递给app组件的todos

首先在app组件准备一个method方法
image.png

然后将这个methoed方法交给UserHeader，就是说在UserHeader标签加上这个
image.png

再在UserHeader组件上用props接收,这个receive方法也就出现在了UserHeader的实例对象vc上了
image.png

那么UserHeader组件就可以使用这个receive方法了，并且可以将todoObj通过这个方法传过去
image.png

可以看到控制台成功输出
image.png

简单的说，子组件要向父组件传递数据，需要父组件先传给子组件一个函数，然后子组件通过调用这个函数传递数据给父组件
image.png

最后只要在app组件文件中将传过来的todoObj交给todos就可以了
image.png

这样就成功了
image.png

为了让方法符合它的功能，我将上面的receive方法改为AddTodoObj，将里面的参数x改为todoObj
image.png

清除输入框

在输入框输入内容后回车输入框的内容还存在着
image.png

我们只要在UserHeader中，将e.target.value在被添加后设置为空
image.png

虽然这样可以，但是这样我们就是直接在操作了Dom，为了不偏离了初衷，我们通过v-model来实现
image.png image.png

但是现在还有一个问题，就是没有输入内容时，回车后会出现这样
image.png

我们需要加一个判断
image.png

这样如果不输入内容回车，它就会弹出提示
image.png

如果我们输入内容有空格，在列表上就会出现空格
image.png

通过trim()我们可以清除输入内容前后的空格
image.png image.png

注意

Vue中的data等东西，里面所有的数据最终都会出现在vc实例对象中，说明里面的这些数据的名字不能重名
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd748e4e8266457db13d32f343b23fcb~tplv-k3u1fbpfcp-watermark.image?)

类如如果把上面那个AddTodoObj方法名字改为add， 就会报错
image.png

这结的主要代码如下： UserList.vue 

<template>
  <ul class="todo-main">
    <UserItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" />
  </ul>
</template>

<script>
// 引入组件
import UserItem from "./UserItem.vue";

export default {
  name: "UserList",
  components: { UserItem },
  props: ["todos"],
  data() {
    return {};
  },
};
</script>

<style scoped>
/* main */
.todo-main {
  /* background-color: aqua; */
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

UserHeader.vue 

  <template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add" />
  </div>
</template>

<script>
// 引入nanoid
import { nanoid } from "nanoid";
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "UserHeader",
  props: ["AddTodoObj"],
  data() {
    return { title: "" };
  },
  methods: {
    add() {
      // 校验数据
      if (!this.title.trim()) return alert("输入不能为空");
      // 将用户的输入包装成一个todo对象
      const todoObj = { id: nanoid(), title: this.title.trim(), done: false };
      // console.log(todoObj);
      // 通知App组件去添加一个todo对象
      this.AddTodoObj(todoObj);
      // 清空输入
      this.title = "";
    },
  },
};
</script>

<style scoped>
/* header */
.todo-header input {
  width: 560px;
  height: 36px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0px 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>

App.vue 

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <UserHeader :AddTodoObj="AddTodoObj" />
        <UserList :todos="todos" />
        <UserFooter />
      </div>
    </div>
  </div>
</template>

<script>
// 引入组件
import UserHeader from "./components/UserHeader.vue";
import UserList from "./components/UserList.vue";
import UserFooter from "./components/UserFooter.vue";

export default {
  name: "App",
  components: { UserHeader, UserList, UserFooter },
  data() {
    return {
      todos: [
        { id: "001", title: "打代码", done: true },
        { id: "002", title: "看电视剧", done: true },
        { id: "003", title: "洗碗", done: false },
      ],
    };
  },
  methods: {
    AddTodoObj(todoObj) {
      this.todos.unshift(todoObj);
      
      // console.log("我是App组件，我收到了数据", x);
    },
  },
};
</script>

<style>
/* base */
body {
  background-color: #fff;
  /* margin: 0; */
}

.todo-container {
  width: 600px;
  margin: 0 auto;
  /* background-color: antiquewhite; */
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  /* margin-bottom: 0; */
  font-size: 14px;
  /* line-height: 20px; */
  /* text-align: center; */
  /* vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐      方式 */
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn:focus {
  /* outline: none; */
}

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

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}
</style>
avatar
文章
阅读
粉丝