Vuejs入门之作-todolist

cnblog好久没使用了，久到忘记用户名了（看清楚是忘记用户名不是密码！！！）

不扯闲蛋了，今天花了一个小时看了下vuejs的入门，怎么说呢，感觉比react要简单？是我的错觉么。。。

看了园里的文章：http://www.cnblogs.com/rik28/p/6024425.html，挺详细。

这里使用的vue是v2.4.2，反正是刚刚从npm上整下来的。本文，和node和npm和什么什么server，没有半毛钱关系也不作任何说明，你只需有一个vue的主js文件，就可运行本文的页面，别和我说没有或者你只有1.几，1块钱买块豆腐看能不能撞死算了。

先抄来几个属性说明：

v-if指令，当普通html属性使用，后接字符串，字符串内是一个可写在js的if后括号里条件的东西，如为true，当前html节点就会出现在最终显示的页面上，如为false，当前元素节点直接不出现在最终页面
v-show指令，当普通html属性使用，后接字符串，字符串内是一个可写在js的if后括号里条件的东西，如为true，当前html节点就会出现在最终显示的页面上，如为false，当前元素节点还是会出现在最终页面上，不过被设置了display:none，个人觉得没啥luan用，见仁见智哈
v-else指令，只能写在v-if后，不需要写值，即前面的v-if如果为false，则会显示这个元素
v-for指令，遍历集合，简单说就是数组，用法下面有，简单，可自行体会
v-bind指令，通过js条件绑定html属性，感觉主要用于html元素的class，不得不说这种给元素加class的写法一点都不优雅！本例里没有使用，因为基本没写css哈，^_^，可简写为":"
v-on指令，绑定方法用，可简写为"@"

做的todolist相当简单，但是我觉得麻小五全，不多说，上代码：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            .todolist-widget {
                max-width: 600px;
                margin: 0 auto;
            }

            .remove {
                display: inline-block;
                margin: 0 10px;
                cursor: pointer;
            }
            .edit-form {
                display: inline-block;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="todolist-widget" class="todolist-widget">
            <form @submit="add">
                <input type="text" v-model="inputValue"/>
                <input type="submit" value="添加" @click="add"/>
                <input v-if="!isSearch" type="button" value="搜索" @click="find"/>
                <input v-else type="button" value="取消搜索" @click="cancelFind"/>
            </form>
            <div>
                <div v-for="(item, index) in list">
                    <div v-if="item.show">
                        <span class="remove" @click="remove(index)">x</span>
                        <span>{{item.index}}、</span>
                        <form class="edit-form" v-if="item.edit" @submit="saveEdit(index)">
                            <input v-model="item.text"/>
                        </form>
                        <span v-else @click="edit(index)">{{item.text}}</span>
                    </div>
                </div>
            </div>
            
        </div>
    </body>
    <script>
        
        var vm = new Vue({
            el: '#todolist-widget',
            data: {
                isSearch: false,
                inputValue: null,
                list: [{
                    index: 0,
                    text: "fuck ie6",
                    edit: false,
                    show: true
                }]
            },
            methods: {
                add: (e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    const currentMaxIndex = this.vm.list[this.vm.list.length - 1].index;
                    this.vm.list.push({
                        index: currentMaxIndex + 1,
                        text:this.vm.inputValue,
                        edit: false,
                        show: true
                    });
                    this.vm.inputValue = null;
                },

                remove: (index) => {
                    const result = [];
                    this.vm.list.forEach(function(element, i) {
                        if (i !== index) {
                            result.push(element);
                        }
                    });

                    this.vm.list = result;
                },

                changeEditState: (index, isEdit) => {
                    const result = this.vm.list.map(function(element, i) {
                        if (i !== index) {
                            return element;
                        } else {
                            return {
                                index: element.index,
                                text: element.text,
                                edit: isEdit,
                                show: element.show
                            }
                        }
                    });

                    this.vm.list = result;
                },

                edit: (index) => {
                    this.vm.changeEditState(index, true);
                },

                saveEdit: (index) => {
                    this.vm.changeEditState(index, false);
                },

                changeDisplayState: (isSearch) => {
                    const result = this.vm.list.map(function(element) {
                        if (element.text.indexOf(this.vm.inputValue) >= 0) {
                            return element;
                        } else {
                            return {
                                index: element.index,
                                text: element.text,
                                edit: element.edit,
                                show: !isSearch
                            }
                        }
                    });

                    this.vm.list = result;
                    vm.isSearch = isSearch;
                },

                find: () => {
                    this.vm.changeDisplayState(true);
                },

                cancelFind: () => {
                    this.vm.changeDisplayState(false);
                }
            }
        })
    </script>
</html>

　　整个就是一个html页面而已，没来得及使用多么高大上的模块化工具，页面copy下来再引入一下vue的主js文件增删改查的功能就能完整展示了。

　　说点题后话，之前入门react做todolist的时候比这个吃力好多哦，是那个时候的水平问题还是这vue真真太容易上手？又或是学会了react的绑定思想后再来学习vue的双向绑定变得相当简单？这是个好问题。手动微笑^_^。