vue实战案例：用学过的知识做一个小demo

学过了前面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文件。

 <head>    <meta charset="UTF-8">    <meta name="viewport"           content="initial-scale=1.0,                   maximum-scale=1.0">    <title>任务列表</title>    <!--载入vue.2.0.js文件-->    <script src="js/vue2.0.js"></script> </head>

成功载入之后，我们就可以来编写代码了。

创建vue实例

利用第三节的知识，创建一个vue实例，超简单！

 <div id="app"></div> <script>    const app = new Vue({        el:"#app"    }); </script>

顺利地创建了一个vue的实例app！

数据绑定

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

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

因此，我们可以得到一个完成的任务数据结构：

 {    content:"任务内容",    finished:false,//是否完成  deleted:false//是否删除 }

那么，我们给实例的data添加代码：

 const app = new Vue({    el:"#app",    data:{      //默认   task:{        content:'',//内容为空     finished:false,//未完成     deleted:false//未删除    }    } });

默认初始化任务task的内容content为空，finished状态为false表示未完成，deleted状态为false表示未删除。

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

接着，我们就来写html代码：

 <div id="app">    <input         type="text"         v-model="task.content"         placeholder="编写任务"> </div>

通过v-model指令，就可以成功地绑定task的content，用户在输入的同时，实例app的data也会实时地更新自身的数据。

我们通过控制台检验一下是否成功地绑定了：

（gif效果图，加载需要一丢丢时间）

虽然成功地绑定了task的content，但是我们的input没有添加样式，缺少美感，我们来给它添加class类“edit”和相关的样式。

 .edit{    display:block ;    width:80%;    height: 35px;    line-height: 35px;    margin: 30px auto;    box-sizing: border-box;    padding-left: 4px;    border-radius: 4px;    border:1px solid #ccc;    outline: 0;    box-shadow: 0 0 5px #ccc; }

给input控件添加以上的css样式，它的外观就变成我们想要的效果：

用户不停地输入多个任务，我们要用一个数组list[ ]来存储用户输入的每一个任务task。

按键修饰符

假设：用户输入任务内容后，按下enter键表示完成输入。所以，我们要实现监听键盘事件。

这里我们会用到vue提供给我们的按键修饰符：

在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符。

所以，我们给input控件添加键盘事件keydown的监听，最终代码如下：

 <input     @keydown.enter="addTask"     class="edit"     type="text"     v-model="task.content"     placeholder="编写任务" >

我们增加了@keydown.enter表示监听键盘中的enter键的按下事件，而addTask则是实例app中的methods方法，所以，我们也会给实例增加methods。如下：

 const app = new Vue({    el:"#app",    data:{        //默认    task:{          content:'',//内容为空      finished:false,//未完成      deleted:false//未删除    }    },    methods:{        //添加任务     addTask:function(){          //.....        }    } });

接下来，我们就来编写addTask( )方法，实现将用户输入的内容存储起来，因为我们在之前就通过 v-model l将用户输入的内容和task中的content关联起来，所以我们只需要把task.content存储起来就可以了，存在哪里呢？我们用一个数组list[ ]来存储它们。如下：

 const app = new Vue({    el:"#app",    data:{        //默认    task:{          content:'',//内容为空      finished:false,//未完成      deleted:false//未删除    },       //任务列表    list:[]    },    methods:{        //添加任务     addTask:function(){           //将task存入list数组      this.list.push(this.task);           //存入list[]后，重置task           this.task = {              content:'',//内容为空        finished:false,//未完成        deleted:false//未删除      }        }    }});

上面的代码，我们给data增加了list，并且通过push方法，成功地把每个任务存放在list数组中。

任务列表list数组既然有了，我们就可以通关 v-for 循环，把它遍历并展示出来了。那我们就来编写列表的html代码，如下：

 <div class="list">    <div class="unit"          v-for="(item,index) in list">        <input type="checkbox">        <span>{{item.content}}</span>    </div> </div>

有html还不够，加上css样式：

 .list{    margin: 0 auto;    width:80%; } .unit{    position: relative;    padding: 10px 0;    border-bottom: 1px solid #efefef; } .unit:last-child{    border-bottom: 0; }

样式也加上了，我们来看看通过按下键盘enter键添加的任务，能否成功地展示在任务列表上，演示一下：

(gif效果图，加载需要一丢丢时间)

我们输入任务，并按下回车键，任务内容成功地添加到了list[ ]数组，并通过 v-for 遍历到页面上，十分顺利。

动态修改样式

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

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

首先，我们先为每个checkbox绑定点击事件，并且动态渲染是否选中，稍微修改上面的代码：

 <input   @click="changeState(index)"   :checked="item.finished"   type="checkbox" >

点击checkbox，我们通过编写一个changeState( )方法来实现切换该任务的状态，所以我们来编写一下changeState( )方法：

 //点击修改任务状态 changeState:function(index){  let curState =  this.list[index].finished;  this.list[index].finished = !curState; }

就这样，我们就顺利地实现了点击checkbox来修改每个任务task对应的状态finished（切换true或者false）。

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

我们把这行代码：

 <span>{{item.content}}</span>

修改成：

  <span :class="{'finish':item.finished}">    {{item.content}} </span>

学习过第十一节我们知道，当改任务的finished为true的时候，就会添加样式 class='finish' ；否则则不会。

所以，少不了finish的样式类代码：

 .finish{    text-decoration: line-through;    color: #ccc; }

好了，所有代码都准备好了，演示一下效果：

（gif效果图，加载需要一丢丢时间）

切换是否成功状态也成功了实现了。

删除任务

还差最后一步，我们来实现删除任务，当我们编写错误的任务的时候，就可以点击删除按钮来删掉它。

我们先为每个任务添加删除按钮，并添加点击事件：

<div class="unit"      v-for="(item,index) in list">    <!--        自行省略    -->    <button @click="removeTask(index)"             class="del">        删除    </button></div>

同样，少不了.del类的样式：

 .del{    background: red;    text-decoration: none;    position: absolute;    right:0;    font-size: 12px;    border: 0;    outline: 0;    padding: 2px 5px;    border-radius: 5px;    color: #fff; }

点击事件我们绑定的是removeTask方法名，那么我们就来编写一个removeTask( )方法：

removeTask:function(index){    //使用splice操作删除数组指定项    this.list.splice(index,1);}

每个任务都添加了删除按钮，并绑定了相应的处理程序，那么我们就来看看效果，是否可以删除指定的任务：

(gif效果图，加载需要一丢丢时间)

删除任务的功能也顺利实现了。

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

我们增加html代码，如下：

  <p class="empty">暂无任务</p>

css样式，如下：

 .empty{    font-size: 13px;    color: #ccc;    text-align: center;    padding: 10px 0; }

那么，我们如何控制这个提示是否渲染呢？这里就用到了我们学过的 v-if 条件渲染指令，当我们的list[ ]数组的长度为0的时候，表示无任务，可展示“暂无任务”，反之则不渲染。

那好，我们就用v-if指令来稍做修改html代码：

 <p v-if="list.length === 0" class="empty">    暂无任务 </p>

我们在之前的章节说过，绑定数据的时候，可以使用简单的javascript表达式，上面的案例，我们就使用了简单的全等判断，你也可以使用计算属性computed来实现，留给大家自己动手去实现。

好了，我们继续来看效果：

(gif效果图，加载需要一丢丢时间)

写到这里，我们就完成了整个demo案例。你动手了吗？

扩展阅读

1.《ECMAScript 6 系列》原创教程

vue实战案例：用学过的知识做一个小demo相关推荐

用所学JS的知识做一个简单的坦克小游戏
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
android小闹钟课程设计,教学案例与反思：WINDOWS画图“设计一个小闹钟”
教学案例与反思:WINDOWS画图"设计一个小闹钟" 并不是很难,今天我们就是要解决使用哪些绘图工具来进行创作的问题? 1.布置任务我给5分钟让同学们自己尝试一下,为小蜗牛设计一 ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
python精彩编程200例-200G的Python初高级教程+项目实战案例源码，让你做有钱途的人才...
2018年1月16日上午,教育部正式将人工智能.物联网.大数据处理正式划入高中新课标,这就意味着现在的学生16岁就要开始学习编程了! 据统计,在所有专业级别的 39000 名开发人员中,有超过四分之一 ...
计算机专业勤学善思感悟,做一个勤学善思的人演讲稿
做一个勤学善思的人演讲稿李时珍一心为民,他为了改进<本草经>的不足,走遍了出产药材的名山,学到了许多书本上并没有记载的知识,增添了许多药理学问.他花了整整27年的时间,终于编写成了一部 ...
利用java知识做一个模拟qq登入模拟界面
qq模拟登入界面一.设计概述 1.使用java所学知识,做一个qq登入模拟界面,如图所示. QQ登录界面整体可以看做一个容器窗口,使用JFrame容器来实现,从登录界面的布局效果和显示内容可以看出, ...
python做小程序-【实战案例】利用Python做出趣味版防沉迷小程序
今天带领大家利用Python做出趣味版防沉迷小程序查询电脑的所有进程用Python循环检测电脑软件的运行情况,当发现游戏软件时弹出警告窗口,并截图保存.学会这项技能,就再也不怕孩子偷偷打游戏了.下 ...
简单的python有趣小程序-【实战案例】利用Python做出趣味版防沉迷小程序
今天带领大家利用Python做出趣味版防沉迷小程序查询电脑的所有进程用Python循环检测电脑软件的运行情况,当发现游戏软件时弹出警告窗口,并截图保存.学会这项技能,就再也不怕孩子偷偷打游戏了.下 ...
Python实战案例：航班票价预测这样做，效果真好啊
在本文中,我将和大家一起学习将使用机器学习数据集使用基本的探索性数据分析技术分析航班票价预测,然后根据某些特征(例如航空公司的类型.到达时间)得出一些关于航班价格的预测时间,出发时间,飞行时间,来源, ...

vue实战案例：用学过的知识做一个小demo

vue实战案例：用学过的知识做一个小demo相关推荐

最新文章

热门文章