Vue+element实现todo(二)

UI界面还有很多待优化部分,,不过基本功能全部实现。


image.png

因为使用了element框架,先安装,使用命令 npm i element-ui -S 安装,
然后在src/main.js中引用,main.js是入口文件,主要作用是初始化vue实例并使用需要的插件


image.png

App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。
image.png

然后打开helloWorld.vue就可以编写了。
需要把数据写在data里,因为是个数组,所以


image.png

写好后我们写HTML结构
image.png

v-for='item in list' 这种写法,就是循环 list 列表,将列表的每一项保存到 item 变量,循环渲染 li 元素的内容
仅仅需要三行,就可以把列表显示在页面中,但是我们需要在输入框输入然后回车自动添加,醒了再写吧,感觉写博客比写代码还折磨人喔,,,早知道边写代码边写文档了,晚安~~
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、技术准备 二、开发工具 三、使用 vue-cli 快速开始模板项目 四、给项目添加组件 五、使用vue-rou...
    35eeabfa0772阅读 31,578评论 4 60
  • element-ui 文档 Vue项目接口文档地址 博客 session 和 cookie等 学什么? 1 如何使...
    cj_jax阅读 3,975评论 0 10
  • 为了事业,走地辛辛苦苦。 最好的伙伴,叛逃在十字路口。 半路的苦,最痛。 因为你不能哭。 为了养家糊口,独自走在夜...
    浅得塾心灵文画阅读 250评论 0 2
  • 【学员信息】416-海波-小作业9 【作业要求】 小作业9: 将下面这段表述改写的更能让读者觉得“这件事与我相关”...
    单姐_9175阅读 208评论 0 0