Vue学习“心酸”历程(连载第三篇)

原创 ansonvwang 教程 Vue连载 502阅读 2017-05-19 17:56:54 举报

离上次更新,已经有几天的时间啦,不知道大家有没有等着急了呢?反正我已经着急赶紧和大家见面了,哈哈!
通过前两次的分享,我的连载在有些平台的点击总量已经有好几千了,也让我遇到了很多志同道合的朋友,这给了我很大的动力,使得我可以继续坚持写下去。
另外还有很多朋友找我要了相关资历,为了让大家更方便的学习到Vue的知识,我会在文章最后,写上资料出处,供大家学习参考。

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

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

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
实例:
html 代码

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

四、在input中输入内容,按回车后可以将内容保存到数据中,并且在模板中渲染出来。
既然是按回车后去做数据操作,那肯定就要涉及到键盘事件了,这里就又要提到vue中的另一个知识点
1、v-on指令:用来监听DOM事件触发代码
语法:v-on:eventName=”eventHandle”;
缩写:@:
事件处理函数:写在methods中统一管理
事件对象:在事件处理函数中获取,内联事件处理函数执行,传入事件对象。
实例:
html 代码

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

完成以上几个步骤之后呢,就已经可以正常的添加任务啦,但是,其实我们的方法是可以换一种思路的。在addTodo中,我们只关心业务逻辑该怎么写,而不用关心keyCode值到底是几。
具体该怎么做到呢?
2、事件修饰符:
事件处理函数只有单纯的逻辑判断,不处理DOM事件的细节,例如:阻止冒泡、取消默认行为、判断按键等。
位置:v-on:eventName.修饰符
修饰符:.stop(阻止冒泡) .prevent(取消默认行为) .once(只出发一次) 等
按键修饰符:.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .键值
实例:
html 代码

到了这里,你是不是认为已经ok啦?其实不然,vue有个主要功能是干嘛的?数据绑定啊!既然有数据绑定,我们为什么还要用ev.target.value来获取数据呢,对不对?
这里就要用的我们之前说的双向数据绑定v-model,具体怎么写,直接上实例:
html 代码

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

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

Vue学习“心酸”历程(连载第三篇)

Vue学习“心酸”历程(连载第三篇)

截图中的两个内容是要根据我们数据的有无,来判断是否显示出来的。
新的知识点又来了。
1、v-show指令;根据表达式的值(true/false),用显示/隐藏元素。
语法:v-show=”表达式”
注:元素会被渲染在页面中,只根据表达式的值进行css切换,元素还是存在于页面中的。
实例:
html 代码

这样,还没有添加任何任务这句话,就会在list中没有数据的时候显示出来,对吧。
那么“1个任务未完成”那一块儿元素的显示隐藏,就交给大家自己去思考如何去做吧,如果发现还是不明白,请给我留言哦。

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

Vue学习“心酸”历程(连载第三篇)

其实这个就是提前写好的一个样式,我们只要判断选中后,加上这个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也传进去,我之前就忘了,试了半天不成功,莫名其妙找不到原因,哈哈。
html 代码

七、接下来,有添加了,就要有删除了。删除这块儿呢其实非常简单,基本上都是远程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中,是不会触发的,这点一定要记住。

html 代码

这里粘贴本次的所有代码。

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

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

对了,我建立了个学习群,有对 vue 感兴趣的小伙伴,不妨加进来一起讨论吧~
个人 QQ 群:274040218

资源链接:
视频地址:vue.js实战开发系列

vue资源:vue.js官网

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复