使用VueCli制作TodoList案例

目录

案例展示

准备工作

VueCli HTML部分

MyHeader.vue

MyList.vue

MyItem.vue

MyFooter.vue

APP.vue

CSS部分

MyHeader.vue

MyItem.vue

MyList.vue

MyFooter.vue

 实现交互性板块

初始化数据

props：

如何添加代办项

删除待办项

实现底部计数功能

---

案例展示

准备工作

利用Vue框架搭配Html+Css做出简易版的TodoList案例，在没有引用Vuex的相关知识下，实现原生版的框架结构搭建，首先搭配好整体的网页布局

如上图我们可以将整体布局分为四大部分

MyHeader.vue

MyList.vue

MyItem.vue

MyFooter.vue

首先，为了读者能更好的划清组件结构，我在下面对组件结构进行了标识

MyHeader.vue 组件部分

 MyItem.vue 和 MyList.vue 部分 

大盒子为MyItem，红框为MyList 拆分开来是因为，每个组件都需要独立的完成一些特殊功能，为了避免冲突，所以采用了组件嵌套方案，将MyList嵌套在MyItem之下

 MyFooter.vue 部分

 划分完成，有过基础的小伙伴都能很快发现这都是写很基础的布局模式，知识利用了Vue框架进行了便捷式开发，会使用HTML+CSS都能够快速的开发出来，但是，在Vue的脚手架中，这些布局方式在代码方面会有哪些不同呢？

现在就由我来带你们进入到VsCode一探究竟

VueCli HTML部分

MyHeader.vue

 没有学过vue的小伙伴对template块都会有点陌生，但这其实只是vue中进行编写html部分的容器，需要注意的是每个template中都需要一个根节点，也就是上图的div，从上述的代码可以看出，和基本的html标签代码基本一致，许多小伙伴也许看到@keyup.enter="addTodos" 迷茫了 这是啥？？ 不懂的小伙伴可以先把这个当成js中的let sb  =  document.querySelector(xx)  sb. keydown中的键盘事件，只是绑定在了enter身上 深入了解可以在一定的es6基础（js的进阶版）下学习尚硅谷的vue课程。好了，闲话不多说，现在再观察其他三个组件的HTML部分

MyList.vue

MyItem.vue

MyFooter.vue

 因为在Vue中，创建好后的组件，在建立好对应关系后，都需要被包裹在一个app.vue 组件下，方便后续的一系列维护。

APP.vue

 组件创建好后，由APP组件将子组件导入进来

放入到components:的配置项下面