第十二节：用学过的知识做一个小demo

于 2018-03-22 09:06:51 发布
阅读量431 收藏
点赞数
文章标签： vue
本文通过Vue.js基础知识，逐步构建一个TodoList应用。涵盖数据绑定、动态样式、条件渲染等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学过了前面11个章节的知识，可以说你已经对vue2.0的基础知识有了一定程度的掌握，虽然在真正开发过程中，一些知识的使用会稍有不同，但是别慌，我们会把那部分内容在进阶系列，比如：单文件组件，过渡效果，状态管理vuex，路由vue-router，网络请求vue-resource等等。

那是不是就意味着我们现在还不能用基础知识做开发，当然不是，加强动手能力是进步的最好方式，我们今天就来用学过的基础知识，来动手做一个demo：todoList案例，以此来巩固一下学过的知识，并且练练手。

看一个todo案例的效果图，然后我们来模仿它做一个：
（gif图，加载需要一丢丢时间）
本来是打算录制成视频，但是demo相对容易，通过图文并茂的形式也能让大家很好的接收，倘若后期有需要视频的反馈，我再尝试录制成视频的形式。

如果你还没看完前面的11个章节，建议你先学习，否则欲速则不达。

磨刀不误砍柴工，在动手之前，我们理一下思绪该如何实现：

1.利用vue的mvvm的特性，绑定用户输入的内容和展示在列表的内容。

2.用户勾选表示已完成，通过动态修改样式来标识已完成。

3.用户点击按钮“delete”，通过v-show来控制任务隐藏。

通过这个思路，我们就可以把之前11个章节的部分内容串联起来，运用到这个案例中。

来吧，开始准备我们需要的工具：

chrome浏览器，或者一个支持ES5的Object.defineProperty特性的浏览器即可。
webstorm2017 ，我选用它的原因是因为webstorm2017增加对vue的完美支持，当然，如果你的电脑跑不起，或者不习惯，你也可以使用你喜欢的IDE。
安装vue.js

这里我用第二节的简易安装方式，并且是直接下载vue.js文件到本地，非cdn资源文件。

先看看目录结构，十分简单：一个todo.html，一个本地的vue2.0.js。
在head中，载入vue.2.0.js文件。
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" 
  4.           content="initial-scale=1.0,
  5.                    maximum-scale=1.0">
  6.     <title>任务列表</title>
  7.     <!--载入vue.2.0.js文件-->
  8.     <script src="js/vue2.0.js"></script>
  9. </head>
复制代码
成功载入之后，我们就可以来编写代码了。
创建vue实例

利用第三节的知识，创建一个vue实例，超简单！
  1. <div id="app"></div>
  2. <script>
  3.     const app = new Vue({
  4.         el:"#app"
  5.     });
  6. </script>
复制代码
顺利地创建了一个vue的实例app！
数据绑定

接下来，我们就实现思路的第一步：数据绑定。

在绑定之前，我们来设计关于任务的数据结构，一个任务包括：任务内容，是否完成，是否删除。

因此，我们可以得到一个完成的任务数据结构：
  1. {
  2.     content:"任务内容",
  3.     finished:false,//是否完成
  4.   deleted:false//是否删除
  5. }
复制代码
那么，我们给实例的data添加代码：

  2. const app = new Vue({
  3.     el:"#app",
  4.     data:{
  5.       //默认
  6.    task:{
  7.         content:'',//内容为空
  8.      finished:false,//未完成
  9.      deleted:false//未删除
  10.     }
  11.     }
  12. });
复制代码
默认初始化任务task的内容content为空，finished状态为false表示未完成，deleted状态为false表示未删除。

任务task的数据结构有了，我们就把它和页面的用户输入关联起来，还记得使用哪个指令吗？（花5秒钟时间回忆一下）

接着，我们就来写html代码：
  1. <div id="app">
  2.     <input 
  3.         type="text" 
  4.         v-model="task.content" 
  5.         placeholder="编写任务">
  6. </div>
复制代码
通过v-model指令，就可以成功地绑定task的content，用户在输入的同时，实例app的data也会实时地更新自身的数据。
我们通过控制台检验一下是否成功地绑定了：
（gif效果图，加载需要一丢丢时间）
虽然成功地绑定了task的content，但是我们的input没有添加样式，缺少美感，我们来给它添加class类“edit”和相关的样式。
  1. .edit{
  2.     display:block ;
  3.     width:80%;
  4.     height: 35px;
  5.     line-height: 35px;
  6.     margin: 30px auto;
  7.     box-sizing: border-box;
  8.     padding-left: 4px;
  9.     border-radius: 4px;
  10.     border:1px solid #ccc;
  11.     outline: 0;
  12.     box-shadow: 0 0 5px #ccc;
  13. }
复制代码
给input控件添加以上的css样式，它的外观就变成我们想要的效果：
用户不停地输入多个任务，我们要用一个数组list[ ]来存储用户输入的每一个任务task。
按键修饰符

假设：用户输入任务内容后，按下enter键表示完成输入。所以，我们要实现监听键盘事件。
这里我们会用到vue提供给我们的按键修饰符：
在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符。
所以，我们给input控件添加键盘事件keydown的监听，最终代码如下：

  2. <input
  3.      @keydown.enter="addTask"
  4.      class="edit"
  5.      type="text"
  6.      v-model="task.content"
  7.      placeholder="编写任务"
  8. >
复制代码
我们增加了@keydown.enter表示监听键盘中的enter键的按下事件，而addTask则是实例app中的methods方法，所以，我们也会给实例增加methods。如下：
  1. const app = new Vue({
  2.     el:"#app",
  3.     data:{
  4.         //默认
  5.     task:{
  6.           content:'',//内容为空
  7.       finished:false,//未完成
  8.       deleted:false//未删除
  9.     }
  10.     },
  11.     methods:{
  12.         //添加任务
  13.      addTask:function(){
  14.           //.....
  15.         }
  16.     }
  17. });
复制代码
接下来，我们就来编写addTask( )方法，实现将用户输入的内容存储起来，因为我们在之前就通过 v-model l将用户输入的内容和task中的content关联起来，所以我们只需要把task.content存储起来就可以了，存在哪里呢？我们用一个数组list[ ]来存储它们。如下：
  1. const app = new Vue({
  2.     el:"#app",
  3.     data:{
  4.         //默认
  5.     task:{
  6.           content:'',//内容为空
  7.       finished:false,//未完成
  8.       deleted:false//未删除
  9.     },
  10.        //任务列表
  11.     list:[]
  12.     },
  13.     methods:{
  14.         //添加任务
  15.      addTask:function(){
  16.            //将task存入list数组
  17.       this.list.push(this.task);
  18.            //存入list[]后，重置task
  19.            this.task = {
  20.               content:'',//内容为空
  21.         finished:false,//未完成
  22.         deleted:false//未删除
  23.       }
  24.         }
  25.     }
  26. });
复制代码
上面的代码，我们给data增加了list，并且通过push方法，成功地把每个任务存放在list数组中。

任务列表list数组既然有了，我们就可以通关 v-for 循环，把它遍历并展示出来了。那我们就来编写列表的html代码，如下：
  1. <div class="list">
  2.     <div class="unit" 
  3.          v-for="(item,index) in list">
  4.         <input type="checkbox">
  5.         <span>{{item.content}}</span>
  6.     </div>
  7. </div>
复制代码
有html还不够，加上css样式：
  1. .list{
  2.     margin: 0 auto;
  3.     width:80%;
  4. }
  5. .unit{
  6.     position: relative;
  7.     padding: 10px 0;
  8.     border-bottom: 1px solid #efefef;
  9. }
  10. .unit:last-child{
  11.     border-bottom: 0;
  12. }
复制代码
样式也加上了，我们来看看通过按下键盘enter键添加的任务，能否成功地展示在任务列表上，演示一下：
(gif效果图，加载需要一丢丢时间)
我们输入任务，并按下回车键，任务内容成功地添加到了list[ ]数组，并通过 v-for 遍历到页面上，十分顺利。
动态修改样式

但我们的工作还没结束，案例中，当勾选框被选中的时候，表示任务已完成，切换相应的样式，未选中的时候，表示任务未完成，也会切换样式。

接下来，我们就来实现这一步，我们用到了第十一节的动态class绑定的知识。

首先，我们先为每个checkbox绑定点击事件，并且动态渲染是否选中，稍微修改上面的代码：
  1. <input
  2.    @click="changeState(index)"
  3.    :checked="item.finished"
  4.    type="checkbox"
  5. >
复制代码
点击checkbox，我们通过编写一个changeState( )方法来实现切换该任务的状态，所以我们来编写一下changeState( )方法：
  1. //点击修改任务状态
  2. changeState:function(index){
  3.   let curState =  this.list[index].finished;
  4.   this.list[index].finished = !curState;
  5. }
复制代码
就这样，我们就顺利地实现了点击checkbox来修改每个任务task对应的状态finished（切换true或者false）。

既然修改了状态，我们就要在页面上看到相应的效果，我们通过动态的修改class来实现。

我们把这行代码：
  1. <span>{{item.content}}</span>
复制代码
修改成：
  1. <span :class="{'finish':item.finished}">
  2.     {{item.content}}
  3. </span>
复制代码
学习过第十一节我们知道，当改任务的finished为true的时候，就会添加样式 class='finish' ；否则则不会。

所以，少不了finish的样式类代码：
  1. .finish{
  2.     text-decoration: line-through;
  3.     color: #ccc;
  4. }
复制代码
好了，所有代码都准备好了，演示一下效果：
（gif效果图，加载需要一丢丢时间）
切换是否成功状态也成功了实现了。
删除任务

还差最后一步，我们来实现删除任务，当我们编写错误的任务的时候，就可以点击删除按钮来删掉它。
我们先为每个任务添加删除按钮，并添加点击事件：
  1. <div class="unit" 
  2.      v-for="(item,index) in list">
  3.     <!--
  4.         自行省略
  5.     -->
  6.     <button @click="removeTask(index)" 
  7.             class="del">
  8.         删除
  9.     </button>
  10. </div>
复制代码
同样，少不了.del类的样式：
  1. .del{
  2.     background: red;
  3.     text-decoration: none;
  4.     position: absolute;
  5.     right:0;
  6.     font-size: 12px;
  7.     border: 0;
  8.     outline: 0;
  9.     padding: 2px 5px;
  10.     border-radius: 5px;
  11.     color: #fff;
  12. }
复制代码
点击事件我们绑定的是removeTask方法名，那么我们就来编写一个removeTask( )方法：
  1. removeTask:function(index){
  2.     //使用splice操作删除数组指定项
  3.     this.list.splice(index,1);
  4. }
复制代码
每个任务都添加了删除按钮，并绑定了相应的处理程序，那么我们就来看看效果，是否可以删除指定的任务：
(gif效果图，加载需要一丢丢时间)
删除任务的功能也顺利实现了。

为了稍做完善，当我们没有任何任务展示的时候，我们会在页面上显示“暂无任务”的文字提示。这样的提示对用户体验来说会比较友好一点。

我们增加html代码，如下：
  1. <p class="empty">暂无任务</p>
复制代码
css样式，如下：
  1. .empty{
  2.     font-size: 13px;
  3.     color: #ccc;
  4.     text-align: center;
  5.     padding: 10px 0;
  6. }
复制代码
那么，我们如何控制这个提示是否渲染呢？这里就用到了我们学过的 v-if  条件渲染指令，当我们的list[ ]数组的长度为0的时候，表示无任务，可展示“暂无任务”，反之则不渲染。
那好，我们就用v-if指令来稍做修改html代码：
  1. <p v-if="list.length === 0" class="empty">
  2.     暂无任务
  3. </p>
复制代码
我们在之前的章节说过，绑定数据的时候，可以使用简单的javascript表达式，上面的案例，我们就使用了简单的全等判断，你也可以使用计算属性computed来实现，留给大家自己动手去实现。
好了，我们继续来看效果：

0 (5).gif (609.53 KB, 下载次数: 0)

下载附件

2017-5-19 10:32 上传

(gif效果图，加载需要一丢丢时间)
写到这里，我们就完成了整个demo案例。你动手了吗？
elroy
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值