vue.js实现todomvc---实践学vue(上)

本教程意在让每一位vue.js新手,能通过这个小demo熟悉vue.js的使用"套路"

  本教程是初级教程,尽量展示每一步操作,拟三个章节(上中下),希望能帮到大伙。大家学习vue的时候思路一定要转变,本篇尽量会展示什么叫做使用数据驱动,以便大伙能更加清晰的明白数据驱动的含义,少走我曾经走过的弯路。
  如果本教程不能满足你的口味,你可以移步关于我写的另外一篇vue案例,高仿网易云音乐app,它是一篇vue的中高级使用案例。地址:正在制作中。

• 本教程前置需求:

• 需要掌握html,css,js的基础知识

• 对vue.js已经有了一定的了解(大概就是知道路由这个概念即可,不用深入理解理解,因为教程是面向新手编程的,所以大家放心阅读,尽量每一个点我都会解释清楚的,如果有我写的不清晰的地方,非常欢迎大伙与我交流)

• 本教程是在windows的系统下进行的

  首先是安装vue
    在这里强烈推荐使用vue官方提供的脚手架进行安装,顺便给大家介绍一下我的另一边文章,介绍什么是脚手架,一篇非常接地气的解释,对于新手来说异常友好,不过其实这里你不用脚手架安装也是完全可以不受影响的阅读本文。

  这里我们跳过手写界面的过程,把重点放在vue.js代码上。todomvc的模板地址https://github.com/tastejs/todomvc-app-template
  大伙在荡下来之后记得用npm install安装依赖,否则会看不到样式。

OK准备工作差不多了,是时候表演真正的技术了(手动滑小稽)

  这里我们是使用vue单文件模式进行编写的准备工作做好后你会看到这样一个页面

首页.png

这里有一个小坑

style.png

如果将.vue文件中的style加上scope,
写成 这种形式,就会使模板的样式文件中关于body的部分失效,导致样式有一点点的诡异。
  好了,现在结构已经有了,想要完成这样一个demo我们需要一步一步来,柿子先挑软的捏,同样的,首先我们先从最容易的点开始:

目标1:在input被选中时点击键盘的`enter`健,使输入的内容加入列表

  要完成这样的效果,我们需要分析
如果是操作DOM的方式,那思路无疑很简单,就是给input表单加入onfocus事件,伪代码如下:
"那个input表单".onfocus=function(){
  "那个input表单".onkeydown=function(e){
    判断(e.keycode是不是等于13){等于十三时,获取表单的value,然后用变量保存获取的值,为了简便期间,使用jquery,克隆,整个li,

code.png

然后获取到代码中的label将保存的变量赋值给label}
               }(此处是onkeydown事件的花括弧)
            }(此处是最外层的onfocus事件的花括弧)
看着都觉得很麻烦,这时候,我们就可以使用vue给我带来的便利,如何做到数据驱动呢?我们可以将输入的数据存入一个数组中 [{key1:value1},{key2:calue2}]这样的形式再使用v-for去遍历数组,这样我们就彻底从第一种方式的操作dom中解放出来了,首先在单文件的javascript中创建一个名为list的数据,用来存放输入的数据,此时的伪代码应该是,将input输入框的value与一个变量进行双向数据绑定,然后在点击enter健的时候,将数据push进那个list数组对象中,具体的代码实现是:
js部分

Snipaste_2018-01-21_15-41-21.png

list这个数组就是用来保存将来输入的数据的
思路有了,第一步就是将输入框的输入内容与一个变量绑定起来

Snipaste_2018-01-21_15-57-47.png

Snipaste_2018-01-21_15-58-03.png

大伙都是中国人,为了便于理解变量名我就用拼音来表示"shuru"就是代表着表单的输入内容,这样写就已经代表着,将变量shuru与input表单的value双向绑定起来了,相当于我们可以时时获取表单的输入内容。

下一步就是将输入的内容在按下enter健的时候,添加来list数组中,通过v-for指令来动态生成内容。

Snipaste_2018-01-21_16-10-42.png

Snipaste_2018-01-21_16-11-08.png

以上就完成也输入内容点击enter会将输入的内容加入list中,从而渲染视图,使之呈现出新的列表。

    目标2:选中checkbox(就是那个小圆圈),会有一个删除线出现,不选中时,删除线消失

要完成这样的效果需要将css的显示与数据绑定起来,vue中提供了这样一种套路
:class="{classname:Boolean}"当Boolean为真事类名classname就会存在
(注意,这里的:class="{classname:Boolean}"与原本的class="classname"并不冲突),有了这样的"套路"我们现在要做的就是将checkbox的状态(选中or not选中)的值绑定在一个变量中,当选中时绑定的值变为真,没选中时绑定的值变为假,然后再变量的值与class绑定起来。
要完成以上的目标,我们需要进行三步操作
1.将checkbox选中与否与变量orchecked绑定起来
2.将class与orchecked绑定起来
代码如下:

Snipaste_2018-01-21_16-46-45.png

3.在js中声明变量orchecked

Snipaste_2018-01-21_16-47-07.png

以上就以实现点击选中checked时,出现删除线,代表任务完成,点击取消checked的选中时,取消下滑线,代表任务未完成。大功告成? (怎么可能!这里有一个需要关注的坑,可能会在很多地方碰到,所以这里单独拿出来说说)当我们完成以上步骤,会发现一个很尴尬的问题,无论出现多少项任务,当我们点击任意一个checkbox选项框的时候,所有的项目都会变成带有下划线的选中状态,并且所有的checkbox都会变成选中状态,相信很多比我聪明小伙伴都已经猜到问题出在哪里了,就是这一步中的

Snipaste_2018-01-21_16-46-45.png

  这一步中的orchecked相当于是整个.vue文件唯一的变量,无论orchecked在何处发生变化,都会影响到每一个使用这个变量的单位,同样的我们将orchecked与checkbox双向绑定起来,所以也会影响每一个checkbox。很好,问题解决了,能找到问题真的比没出现问题在某些方面还要爽啊。
  现在我们解决的问题是,如何将每一个orchecked私有化。说起将同一个变量名私有化,大家就很容易联想到,对象的动态属性这一个方法。这里也可以使用,在进行v-for遍历时, v-for="item in list",每一个item都是一个对象(因为list是一个其中包含变量的数组),所以在遍历的时候,每一个item都对应不同的对象,这时候我们就可以用变量的动态特性,将每一个orchecked私有化。所以我们的代码就要响应的做一些改动。最终代码:

Snipaste_2018-01-21_23-22-03.png

OK,这样就完成了,enter键添加任务,勾选checked完成文物,这两个小目标,下一期教程我们将会体会到:

• 点击x删除任务
• 双击任务对任务进行编辑
• 编辑任务后按enter键或者让输入框失去焦点时会保存编辑的任务。而按esc键时,会撤销编辑。