十分钟用Vue.js手写一个任务清单

vue官方文档

一、安装node

选择自己对应的系统下载链接

在git里面查看,或者cmd查看
由于npm在国内较慢,建议使用cnpm($ npm install-g cnpm--registry=https://registry.npm.taobao.org)

二、安装脚手架工具vue-cli

install -g 是全局安装

三、初始化

$ vue init  打包工具(webpack)  项目名称(vue-base)

初始化成功,会在当前E盘的vue文件夹下生成一个项目文件夹(名字就是你init时候的名字)

进入项目文件夹,install所依赖的插件(项目文件下package.json里面的依赖)

$ npm run dev  本地8080端口监听

四、开始工作

把hello.vue内容替换我们想要的内容

一个input输入框+一个按钮
下面展示的li

五、思路整理

1>input里面输入内容,点击添加的时候,下方列表显示内容

2>下方列表点击背景置灰加删除线代表已完成,可以来回切换

items数组有2个对象,每个对象里面有两个属性,一个是显示的内容title,一个是控制是不是完成,完成及时true,未完成就是false

然后遍历数组,得到每一个item,就是每个对象,给给个li绑定一个class,初始都是false没有完成,效果如下:

我们想点击的时候变成这个样子

那么我们就需要一个点击事件控制

每次点击的时候取反,最开始是没有完成,点击就会完成,再点击又变未完成

效果基本完成,这些假的,我们想实现的是,在input框中输入什么内容点击添加下方显示什么内容

那么我们第一清空刚刚数组里面的内容,items是空数组,第二数据绑定,在input里面绑定数据

最好,在添加按钮添加一个方法

用户在input框中输入内容并且点击添加按钮的时候,我们向items数组添加内容,this.content就是用户输入的内容。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,092评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,474评论 0 29
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,344评论 8 124
  • 天黑下来的时刻 我在这里偷偷地爱你 你替我做完了今生的梦 就像我用失眠抓住你 我是个简单的傻子 在天黑的时刻 爱上...
    林鸿是我阅读 1,418评论 0 0
  • 宝贝算是一个“吃货”吧,从小就对吃的特别感兴趣,每当在电视或者街道的店面中看到一款新的美食,都会对爸爸说:“我想...
    潮尚宝贝儿阅读 4,808评论 0 2

友情链接更多精彩内容