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