Vue实现便签添加功能

赵锐庆

永恒观者，用空状态管理有状态。

这个小例子呢，是我使用“奇妙便签”，闲来对该功能实现做一个分析，附上查看地址： Sign In: Wunderlist ，下面有效果图，接下来会对该功能做一个详细的讲解；

功能点分析：

1.回车事件获取input中的值

2.将获取的值转成我们要数据个数，数组或是对象格式，最终存入位置

3.去拿我们存储的数据对页面效果展示

①循环展示在input标签下面

②点击按钮添加删除线表示该词条以完成

③点击叉号删除当条信息

④点击删除按钮，删除所有的已完成信息

⑤将数组词条数展示出来

一、基本事件绑定（如图）

二、如何获取零碎的数据并转存

拿到值之后，创建对象、将值点给对象，从而将将获取的数据转存一个临时的对象，最后我们需要将对象在追加到我们的存储数据的地方

①使用this.value获取值

②使用字面量方式创建对象，并通过外点的方式将值添加到对象中去，完成拿到数据转化为我们需要的数据存储格式

③数据是属于临时的，必须及时push追加到数组中去

④转存地方只能使用数组和对象，因为字符串只能存一个值，数组有push方法

⑤数据完成转存

三、补充：关于选择什么语法存储数据更为合适分析

我们存储数据呢，仍然是要采用数组或者对象方式，或者两者结合的方式进行存储的；

相关空字符串、数组和对象的存储优劣分析：

字符串存储数据

空字符串存储数据一般都是单个的，如果存储多个数据，只能是把数据拼接起来存储，但是具备较大的弊端，如果用空字符串存储不仅仅是在存储的时候需要进行数据拼接成一个整体的字符串，在提取数据的时候也是需要做大量的遍历和判断才能拿到我们的数据，数据类型越是不同，判断越是繁杂，并且在将数据载入的时候也是非常棘手的事情：

数组或对象存储数据

根据数组的特性，一个数组中可以存储多个，不用管数据实例化到底是什么，反正放到里面就可以了，而且有专门的机制遍历数组对象内容，这个是很方便的；那么在什么时候选择使用数组或对象单一使用存储数据呢，相对于整体单位一来看，写入的数据只是单一的，不会向下分层级，数据中不分数据，那么采用单一的数组或者对象方式进行存储；如果说相对于整体单位一来看，写入的数据结构中包含了数据，那么就需要数组和对象相互嵌套使用；（如图：锐庆画）

四、将拿到的数据通过vue载入到页面中

通过vue从数组里面拿对象里面的某个值得方式：

如果采取插值表达式的方式，那么客户输入内容数据数量是随机的，难道你，还要手动一条条更新进去吗？当时我们在研究js的时候，他里面的数据方式都是更新到数组里面的，数组长度就会有变化，然后遍历循环的时候就会输出对象的，所以我们这里对于动态更新处理的方式只能是使用对数据进行遍历循环的方式

vue中的v-for循环释意（补充）

v-for="(val,key) in toDos"

①val代表的是存储数组作为父级的儿子级元素整体，如果儿子元素是个对象，那么还有通过点的方法去获取；

②key代表室存储数组作为辅机的儿子级元素整体所在数组中的下标

③in是在的意思后面是数组，意思是循环todos的数组

③写在标签上表示，将该标签和标签内部所有的标签循环并且创建，创建的次数和数组长度是一致的

⑤我们通过拿到val和key的值使用插值表达式相互配合就可以创建和我们之间使用for循环加入字符串一样的效果

五、点击按钮添加删除样式

如果是操作dom的时候是这个样子的，你绕那么一大圈就是要改变里面的数据

但是vue数据是可以双向绑定的可以直接改变的呀

在做这一块不用想的太多，vue是具备双向绑定的（下图为错误思考）

六、点击按钮删除数组对象

1.一直想着怎么回去这个id，但是这个v-for循环出来，里面就有这个数的下边呀

2.v-for正常可以调用函数，如果需要传入参数就需要加（）传入

3.传入之后到数组里面使用splice（key，1），就可以删除了

七、点击删除的按钮，删除所有的完成的

1.循环数组中的值是否为true，为true就是完成的就是要删除的

2.循环不能使用splice或者原生的循环方式，因为splice改变的是原数组，splice只能用于删除第一个或者就只有一个需要删除的元素

3.其实这等同于就是要删除元素中的这些元素，除了这个方法，我们还有筛选拿到一边的，然后等同于赋值的方法，也是可以完成的

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        ul,li,body{
            margin:0px;
            padding:0px;
            list-style:none;
    .bigbox{
        width:404px;
        margin:0 auto;
    #ser{
        outline:none;
        width:400px;
        height:38px;
        display:block;
    /*样式部分 */
    .solids{
        text-decoration:line-through;
        color:#999;
    </style>
</head>
    <div class="bigbox">
    <!--搜索框-->
    <input type="text" value="" placeholder="请输入你的任务" id="ser" v-model="val" v-on:keydown.enter="ff">
        <li v-bind:class="{solids:val.stat}" v-for="(val,key) in arr">
            <!--创建的行-->
            <div class="view">
                    <input type="checkbox" v-model="val.stat">
                    <span>{{val.title}}</span>
                    <input type="button" value="×" v-on:click="del(key)">
            </div>
    <input type="button" value="清空完成" v-on:click="qk">
<span>还有&nbsp;{{ssh()}}&nbsp;条待完成！</span>
</div>
<script>
var app = new Vue({
    el:".bigbox",
    data:{
        val:"",
        arr:[],
    methods:{
        ff:function(){
            if(!(this.val=="")){
                            //console.log(this.val)
                //拿到数据，创建对象，将数据融合到数组中
                var newarr ={}
                newarr.title=this.val
                newarr.stat=false
                            //console.log(newarr)
                this.arr.push(newarr)  //将整合好的数据对象放到数组中去
                this.val="" //清空文本框
        del:function(key){
            this.arr.splice(key,1)
        qk:function(){
            var gaga = this.arr
            // console.log(gaga)
            var rongarr = []
            for(var i=0;i<gaga.length;i++){
                if(gaga[i].stat==!true){
                    // gaga.splice(i,1) 
                    rongarr.push(gaga[i])
            console.log(rongarr)
            this.arr = rongarr
        ssh:function(){
            return numb = this.arr.length