vue2的todolist入门小项目的详细解析
程序员文章站
2022-04-09 15:01:49
看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择。
项目用到了vue.js vue.cli webpack es6 node环...
看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择。
项目用到了vue.js
vue.cli
webpack
es6
node
环境,完成项目后会对这些技术栈有了些了解。
准备开发环境
$ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev
- 安装谷歌插件vue.js devtools
- 下载vue.js的
- 下载 (提供html和css)(也可以直接$ git clone 来下载)
- 把todomvc的index.html拖到todolist文件夹去覆盖里面的index.html
- 打开todomvc的json文件,会看到 “todomvc-app-css”: “^2.0.0”,就是要你 npm install todomvc-app-css -s 从而下载该css
- 删点todolsit index.html的默认css,js引用,src文件夹下的main.js引入模板css(import‘todomvc-app-css/index.css')
- 引入vue(import vue form ‘vue')
- 等写完代码后 $npm run build 一键打包构建,会看到dist文件夹
main.js的代码
//后面的为注释讲解, ~表示串联index.html的对应内容 import 'todomvc-app-css/index.css' import vue from 'vue' //添加localstorage var storage_key = 'todos-vuejs-2.0' var todostorage = { fetch: function () { var todos = json.parse(localstorage.getitem(storage_key) || '[]') todos.foreach(function (todo, index) { todo.id = index }) todostorage.uid = todos.length return todos }, save: function (todos) { localstorage.setitem(storage_key, json.stringify(todos)) } } //用过滤器筛选出三种状态 var filters = { all(todos) { return todos }, active(todos) { return todos.filter((todo) => { return !todo.completed }) }, completed(todos) { return todos.filter((todo) => { return todo.completed }) }, } let app = new vue({ el: '.todoapp', // ~ <section class="todoapp"> data: { msg: 'hello world', title: '待做清单', // 渲染标题 ~ {{title}} newtodo: '', todos: todostorage.fetch(), // ~ v-show="todos.length" ; ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredtodos" editedtodo: '', // 空的编辑对象 hashname: 'all' }, watch: { todos: { handler: function (todos) { todostorage.save(todos) }, deep: true } }, computed: { remain() { return filters.active(this.todos).length //未完成事项的数量 ~ {{remain}} }, isall: { // ~ v-model="isall" get() { return this.remain === 0 }, set(value) { this.todos.foreach((todo) => { todo.completed = value }) } }, filteredtodos() { //用hashname过滤出当前页面的todos ~ v-for="(todo,index) in filteredtodos" return filters[this.hashname](this.todos) } }, methods: { addtodo(e) { //输入值为空时,不添加(trim去除前后空格) ~ v-model.trim="newtodo" if (!this.newtodo) { return } this.todos.push({ id: todostorage.uid++, content: this.newtodo, completed: false //结合v-model 根据completed状态绑定样式 ~:class="{completed:todo.completed; ~ v-model="todo.completed" }) this.newtodo = '' }, removetodo(index) { //绑定x样式,点击删除该todo ~ @click="removetodo(index)" this.todos.splice(index, 1) }, edittodo(todo) { //编辑 ~ @dblclick="edittodo(todo)" this.editcache = todo.content //储存编辑前的内容 this.editedtodo = todo // 点击编辑里面的内容而不是只是空文本框~ editing:todo==editedtodo}" }, doneedit(todo, index) { //失去焦点后 ~ @blur="doneedit(todo)";@keyup.enter="doneedit(todo)" this.editedtodo = null //不存在编辑了或者说编辑已完成 if (!todo.content) { //如果编辑后没有内容了,删除该todo this.removetodo(index) } }, canceledit(todo) { //按esc键取消此次编辑操作 ~ @keyup.esc="canceledit(todo)"> this.editedtodo = null todo.content = this.editcache //当esc取消编辑时,还原编辑前的内容 }, clear() { //点击清除已完成的功能 ~ @click="clear" this.todos = filters.active(this.todos) //获取并渲染未完成的事项 ~ } }, directives: { //自定义属性 ~ v-focus="todo == editedtodo" focus(el, value) { //文本框双击获取焦点 if (value) { el.focus() } } } }) //hash(url地址中#以及之后的字符) function hashchange() { // ~ :class="{selected:hashname=='all'}";:class="{selected:hashname=='active'}";:class="{selected:hashname=='completed'}" let hashname = location.hash.replace(/#\/?/, '') //正则表达式去除#/?,获取如all,active,completed if (filters[hashname]) { //如果过滤状态的hashname存在 app.hashname = hashname //给整个app变量里的hashname赋上那个值 } else { location.hash = '' //取消 app.hashname = 'all' //否则就赋值‘all',回到全部事项的页面 } } window.addeventlistener('hashchange', hashchange) //全局监听hash
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: VUE 更好的 ajax 上传处理 axios.js实现代码
下一篇: vue-axios使用详解