发新贴  快速回复

Vue学习“心酸”历程之TODO实例一(连载第三篇)

暴龙
2017-05-31 15:11

离上次更新,已经有几天的时间啦,不知道大家有没有等着急了呢?反正我已经着急赶紧和大家见面了,哈哈!

通过前两次的分享,我的连载在有些平台的点击总量已经有好几千了,也让我遇到了很多志同道合的朋友,这给了我很大的动力,使得我可以继续坚持写下去。

另外还有很多朋友找我要了相关资历,为了让大家更方便的学习到Vue的知识,我会在文章最后,写上资料出处,供大家学习参考。

 

本次分享的内容,想想还有点小激动呢。我先剧透一下,我们要做实战小例子啦,例子里可是用到了前两次分享的知识点哦,还没有掌握之前内容的朋友们,赶紧先去好好看看前两次的内容吧,否则会跟不上哒。

 

好啦,咱们言归正传,说说我们今天的实战小例子。它是一个简单的任务计划列表,能实现增加删除修改任务,给任务设置完成和未完成状态,并且可以筛选完成状态。

大概就是长这个样子:

 

既然是分享vue的内容,那么关于布局样式什么的,这里就不说了,之后我会直接贴出代码,大家自己来看吧。

 

Vue这块儿呢,我们一步一步来:

一、第一步呢,肯定是要引入vue,哈哈,不然后面写什么都白搭了。

 

二、创建一下我们的数据结构。根据上图,我们来分析一下所需要的数据:首先这是一个有序的列表,所以最外层就是一个数组,然后数组中每一个任务,都包含了很多信息,所以就要在数组中建立一些对象,每个对象中需要有任务的名称和其他需要扩展的内容。

 

三、有数据了,就需要借助vue来将数据渲染到我们的模板中。

不知道大家还记不记得之前说的vue的使用方法,我们来稍微的回忆一下。要先new Vue来将vue实体化输出,实体化过程中,要选择vue的挂载点,这里我们就用整体内容的父级做为挂载点。之后要让vue来代理一下我们之前做创建好的数据,这个时候,vue并不会将数据渲染到模板中,我们需要通过一个for循环,来将数据循环到我们的模板中。

好啦,说到for循环,就要提到我们这次分享中的第一个知识点啦,在vue中如何循环数据。

1、v-for指令:根据一组数据的选项列表进行渲染。

语法:value,key in items和value,key of items

实例:

<ul class="todo-list">

    <li class="todo" v-for="item in list" >

        <div class="view">

            <input class="toggle" type="checkbox" />

            <label>{{ item.title }}</label>

            <button class="destroy"></button>

        </div>

        <input class="edit" type="text"/>

    </li>

</ul>

 

通过以上代码,就可以将之前我们写的数据循环到模板中了,但是这个数据是我们自己模拟写死的数据,我们是希望通过一个input动态去添加数据的,所以就要继续做下一步啦。

 

四、在input中输入内容,按回车后可以将内容保存到数据中,并且在模板中渲染出来。

既然是按回车后去做数据操作,那肯定就要涉及到键盘事件了,这里就又要提到vue中的另一个知识点

1、v-on指令:用来监听DOM事件触发代码

语法:v-on:eventName=”eventHandle”;

缩写:@:

事件处理函数:写在methods中统一管理

事件对象:在事件处理函数中获取,内联事件处理函数执行,传入事件对象。

实例:

<input

    placeholder="例如:吃饭睡觉打豆豆;    提示:+回车即可添加任务"

    class="task-input"

    type="text"

    v-on:keyup="addTodo"

/>

然后来看看这个addTodo是怎么写的:

methods:{

    addTodo(ev){  //添加任务

        if(ev.keyCode === 13){

            this.list.push({

                title:ev.target.value

            });

        }

    }

}

 

完成以上几个步骤之后呢,就已经可以正常的添加任务啦,但是,其实我们的方法是可以换一种思路的。在addTodo中,我们只关心业务逻辑该怎么写,而不用关心keyCode值到底是几。

具体该怎么做到呢?

2、事件修饰符:

事件处理函数只有单纯的逻辑判断,不处理DOM事件的细节,例如:阻止冒泡、取消默认行为、判断按键等。

位置:v-on:eventName.修饰符

修饰符:.stop(阻止冒泡)  .prevent(取消默认行为)  .once(只出发一次) 等

按键修饰符:.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .键值

实例:

<input

    placeholder="例如:吃饭睡觉打豆豆;    提示:+回车即可添加任务"

    class="task-input"

    type="text"

    v-on:keyup.enter="addTodo"

/>

methods:{

    addTodo(ev){  //添加任务

        this.list.push({

            title:ev.target.value

        });

    }

}

到了这里,你是不是认为已经ok啦?其实不然,vue有个主要功能是干嘛的?数据绑定啊!既然有数据绑定,我们为什么还要用ev.target.value来获取数据呢,对不对?

这里就要用的我们之前说的双向数据绑定v-model,具体怎么写,直接上实例:

<input

    placeholder="例如:吃饭睡觉打豆豆;    提示:+回车即可添加任务"

    class="task-input"

    type="text"

    v-on:keyup.enter="addTodo"

/>

new Vue({

    el:".main",

    data:{

        list:list,

        todo:""

    },

    methods:{

        addTodo(ev){  //添加任务

            this.list.push({

                title:this.todo

            });

            this.todo="";

        },

    }

});

 

好啦,添加任务的细节处理完成了,这里我们再稍微提一嘴,在v-on的函数中是可以直接执行引入参数的,比如v-on:keyup.enter="addTodo(123)",但是这么做,我们函数中的ev就不再是事件对象了,它变成了我们的传参了,那么这个时候,如果你想拿到我们的事件对象怎么办,这里vue也为我们提供了一个解决方法,叫做$event,这么去写:v-on:keyup.enter="addTodo(123,$event)",之后再函数中对应接收一下就可以了。

 

五、根据数据来判断,是否显示提示。

 

 

截图中的两个内容是要根据我们数据的有无,来判断是否显示出来的。

新的知识点又来了。

1、v-show指令;根据表达式的值(true/false),用显示/隐藏元素。

语法:v-show=”表达式”

注:元素会被渲染在页面中,只根据表达式的值进行css切换,元素还是存在于页面中的。

实例:

<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>

这样,还没有添加任何任务这句话,就会在list中没有数据的时候显示出来,对吧。

那么“1个任务未完成”那一块儿元素的显示隐藏,就交给大家自己去思考如何去做吧,如果发现还是不明白,请给我留言哦。

 

六、任务完成后的选中样式,这个样子

 

 

其实这个就是提前写好的一个样式,我们只要判断选中后,加上这个class就好了,但是我们怎么判断,当前任务是否被选中了呢?

之前我们已经在数据list中保存里任务名称(title)了,现在我们要在数据中多增加一个选中状态(isChecked),根据这个选中状态来判断是否输出class。

1、动态绑定class:可以使用v-bind:class去写,简写:“:bind:class”

语法:“:class=’{className:表达式}’”

表达式值为true,添加className,反之不添加。

实例:<li class="todo" :class="{completed: item.isChecked}" v-for="item in list" >

这样写,就可以根据isChecked的值来判断是否输出completed了。

现在我们只要再做一件事情,这一小块就完成了,那就是要把isChecked的数据和真实数据绑定到一起就好了,之前已经涉及过这块儿内容之,直接上代码,不明白的,还是我们留言区讨论哈。

<input class="toggle" type="checkbox" v-model="item.isChecked"/>

对了,还有,别忘了在生成数据的时候把isChecked也传进去,我之前就忘了,试了半天不成功,莫名其妙找不到原因,哈哈。

addTodo(ev){  //添加任务

    this.list.push({

        title:this.todo,

        isChecked:false

    });

    this.todo="";

}

七、接下来,有添加了,就要有删除了。删除这块儿呢其实非常简单,基本上都是远程js的知识,我们快速带过一下。

删除按钮绑定方法:

<button class="destroy" @click="deleteTodo(item)"></button>

在methods中添加deleteTodo方法:

deleteTodo(todo){

    var index = this.list.indexOf(todo);

    this.list.splice(index,1);

}

 

是不是很简单,如果这里没有看明白的话,那建议你,先看看js中的数组方法吧,嘿嘿。

哦,对了,再说一下,像push,splice,pop这类方法,要写在vue中,虽然用法和原生js一模一样,但其实,它是vue提供的变异方法,利用这些变异方法对数组进行操作的时候,会触发视图更新,但是如果你写在js中,是不会触发的,这点一定要记住。

 

以上内容的源码我会放到附件中上传。

 

说句题外话,有时候感觉自己看视频学习还是挺累,有许多细节处不太明白。要是周末能有个地方可以聚拢一些专门讨论技术话题的人群、并且还有技术达人帮我解决这些边边角角的问题就好了,哪怕交些费用我也是乐意的,毕竟自己摸索还是太费时间,许多时候遇到的问题还是小问题,在小问题上困扰太久真心不划算。而辞职去报班学习成本又太高了。不知道有没有和我感受一样的小伙伴呢?

 

好啦,今天的分享,就先到这儿了,这次的实例分享还有一部分,没有说完,一次说的太多了,怕大家消化不了,顺便再调调你们胃口,我们下次的时候,会把这个小功能全部分享完成,有没有很期待呢,那就赶快关注我吧,更多精彩内容,以后慢慢分享。比如你们有没有发现,我所有的方法都没有写function呢?这里卖个关子,分享完vue之后,我就准备分享那一块儿啦。

 

本篇分先参考视频:vue.js实战开发系列第三课增删便签任务

早先分享:Vue学习“心酸”历程(连载第一篇)

      Vue2.0学习“心酸”历程之指令和模板(连载第二篇)

附件下载:
 
妙味用户892732

你用的是什么编辑器? 你在编辑 .html 文件时有 vue 的语法提示吗? 我用的是vs code 编辑器,安装了 vetur 插件(vue 提示插件)之后, 只有编辑 .vue 文件时才会有vue语法提示,编辑 .html 文件时没有 vue 的语法提示. 你知道怎么才能实现编辑 .html 文件时也有 vue 的语法提示吗?

2017-06-09 17:37  回复本帖
妙味用户802754

妙味用户892732 2017-06-09 17:37发表的内容:

你用的是什么编辑器? 你在编辑 .html 文件时有 vue 的语法提示吗? 我用的是vs code 编辑器,安装了 vetur 插件(vue 提示插件)之后, 只有编辑 .vue 文件时才会有vue语法提示,编辑 .html 文件时没有 vue 的语法提示. 你知道怎么才能实现编辑 .html 文件时也有 vue 的语法提示吗?

文档就那点东西,还需要什么语法提示

2017-06-16 15:56  回复本帖
 
潇湘雨

暑假即将学习vue的来冒泡

2017-06-26 21:22  回复本帖
妙味用户383925

为什么视频几乎都是收费的~

2017-06-29 18:16  回复本帖
peiliboy

Dcloud有人用吗?

2017-07-08 11:05  回复本帖
登录 后才可以发表回复