Vue学习笔记(八)

最新推荐文章于 2023-06-07 14:45:01 发布

芙如东海

最新推荐文章于 2023-06-07 14:45:01 发布

阅读量223

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_52166656/article/details/126097858

版权

Vue学习笔记(八)

文章目录

Vue学习笔记(八)
1.Todo-list案例
1.组件化的编码流程

1.Todo-list案例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMXWhKyG-1659324555910)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731190020197.png)]$

1.组件化的编码流程

1.1实现静态组件：抽取组件，使用组件实现静态页面效果

分析页面:

最外面肯定需要一个App组件
输入框也为一个组件
下面每一个代办事项都是完成一个功能,也需要抽出来当作组件
放置待办事项的也应该为一个组件
已完成/全部应该为一个组件

在这里插入图片描述

注意：引入的时候，App组件包括Header，List,Footer，而List里面包括item组件，引入的时候不要搞错了
](https://img-blog.csdnimg.cn/4735cd8290bd488b83a16518a7db5083.png)

1.2将静态的CSS与html放入页面中

CSS代码：

/*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;
}

/*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);
}

/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}

HTMl结构代码:（注意拿到body内容即可，放入templete模板中）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React App</title>

  <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
      <ul class="todo-main">
        <li>
          <label>
            <input type="checkbox"/>
            <span>xxxxx</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span>yyyy</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
      </ul>
      <div class="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Dq0QtXA-1659324555914)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731193101366.png)]$

1.3拆结构和样式，放入相应的组件中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8KJQvl7-1659324555915)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731193821616.png)]$

1.3.1将相应的html结构拆分到相应组件上

例如APP组件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMNo0S1v-1659324555916)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731193946329.png)]$

得到如下结构:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2bnwS4Fu-1659324555916)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731194059472.png)]$

1.3.2将相应的样式拆分到相应的组件上

例如MyItem组件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbRC0cDy-1659324555917)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731194514932.png)]$

最终为：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HiqQhEGu-1659324555917)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731194542720.png)]$

1.4展示动态的数据

经过大致分析，MyList里面应该存放数据，应该保存为一个数组，数组里面为每一个对象。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBI7BN4T-1659324555918)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731200244259.png)]$

然后考虑每一个Item里面需要接收到数据展示，则需要靠父组件去传递数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jHSsBTID-1659324555919)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731200354863.png)]$

1.5按下回车添加一个代办事项

分析应该在MyHeader组件定义一个键盘按下事件，当用户输入内容后，需要去往MyList组件里面添加一个待办事项

用户的输入应该和data中的数据一样，都应该为一个对象的形式

考虑到id应该为随机数字，在此用一个第三方的库来实现功能

在终端输入:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vonjDOm3-1659324555919)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731201433498.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIq7MSo5-1659324555920)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731201936057.png)]$

测试功能

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1atUogol-1659324555920)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731202017928.png)]$

测试完成功能，此时应传递对象进入MyList组件里面，发现MyHeader组件与MyList组件是兄弟组件，以目前学到的知识，很不方便传递数据。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eGHkcrK8-1659324555920)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731202607898.png)]$

选择MyHeader组件向APP组件传递数据，再由APP组件向List组件传递数据

先把data数据换到App上面，在传入List,通过props接收到数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TagswQPb-1659324555921)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731204035809.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-67wO0hOt-1659324555922)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731204109009.png)]$

下面在App组件里面定义一个函数，传递函数给MyHeader组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kpEbVkby-1659324555922)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731205250837.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uicm6rwi-1659324555923)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731205300461.png)]$

在MyHeader组件中接收到App组件传来的函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHQBJxfh-1659324555923)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731205434162.png)]$

这样就完成了添加事项的操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JP8ek2Tu-1659324555923)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220731205658020.png)]$

总结：

目前如果想在子组件向父组件传递数据，需要在父组件定义一个函数

在子组件中接收到父组件传递过来的函数，在调用时传递参数过去

实际上就是调用了父组件函数

此处父组件中有数据，而子组件想要添加数据，就可以用这种方法

1.6勾选和取消勾选的功能

影响数据的变化，需要去操纵App的数据，在App中增加一个方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NmO2F7Tv-1659324555924)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801091523578.png)]$

MyList组件作为中间组件传递数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LGS0iiad-1659324555924)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801091610670.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bg2agMwy-1659324555924)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801091650506.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xMSmAj8l-1659324555924)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801091905121.png)]$

1.7删除代办事项

因为要在按钮上点击删除，则同上面一样需要在App组件定义一个函数来操作todos

App组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rt0iQJo4-1659324555924)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801095323989.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhFnPu3c-1659324555926)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801095332659.png)]$

MyList组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A57O6nei-1659324555926)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801095345331.png)]$

MyItem组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sgwFaGN4-1659324555926)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801095437866.png)]$

1.8底部统计

需要得到App组件传来的todos来获取已完成的数量，并通过计算属性的方式来展示数据

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QbGbCU6Y-1659324555927)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801110826712.png)]$

完成全选和全不选功能

App组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPV4NfV6-1659324555927)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801110903895.png)]$

MyFooter组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGeavQt2-1659324555927)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801110919473.png)]$

优化代码：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ETGwL7Q-1659324555928)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801111357914.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TM1s49R6-1659324555929)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801111414359.png)]$

清除已完成的任务

App组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZmHG8SWy-1659324555929)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801112155466.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0o2KBdjl-1659324555929)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220801112208294.png)]$

1.9Todolist总结

组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。
props适用于：

(1).父组件 ==> 子组件通信

(2).子组件 ==> 父组件通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！