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的双向绑定变得相当简单？这是个好问题。手动微笑^_^。