最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Vue实战案例:用学过的知识做一个小demo

Vuejs rockyxia 4871浏览

写在前面

学过了前面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 将用户输入的内容和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案例。你动手了吗?

本节小结

通过这个demo的制作,我们能复习很多之前讲到的基础知识,为接下来的Vue2.0进阶打下基础。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue实战案例:用学过的知识做一个小demo
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)