Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了，总想把学到的东西柔和在一起，做点东西出来，于是有了这个Todolist小应用。

主要功能就是把一天要做的事情记录下来，还实现了：

  1. 标记完成事件
  2. 删除已完成事件
  3. 各种排序
  4. 仅显示未完成的项目
  5. 本地保存

截图看这里

用时一周，14次commits,把心中的构想基本实现了。详情请看：这里

整个过程下来，收获还是很多的，

1.对mvvm有了进一步的理解，

2.对css布局有了更多的了解。

3.更进一步理解了Vue的事件和组件机制。这些机制将应用解耦，每一部分都隔离出来。

4.在一步步优化代码的过程中，对模型这里是todos的优化，对模板的优化积累了经验。

5.学会使用git;

一旦你开始一个小项目，你的学习方式就变成了问题驱动的学习，之前感觉自己OK的或者忽略了的，会在这个过程中一点一点暴露出来。解决了一个问题或者优化了一个结构会收获一种满足，同时也巩固了自己的知识。

这里主要用到Vue指南里的基础篇的知识，涉及进阶篇中的过渡效果，适合初学者巩固基础知识，欢迎fork和拍砖；

时间： 2024-08-09 02:17:43

Vue.js基础篇实战--一个ToDoList小应用的相关文章

vue.js基础知识篇(6):组件详解

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

vue.js基础（继）

今日,将简单地Vue.js指令形成了一个串联使用.Vue.js就是这样,是渐进式的,何为渐进式?简单的指令看起来分厂简单,浅显易懂,但是将指令进行综合,自定义事件,原生事件,子父通信,父子通信,创建实例,创建组件,注册组件,数据定义等等进行融合使用时候缺愈发的复杂.进行项目的书写.模拟.测试.以及UI库的综合使用,布局 UI库使用,通过数据控制功能,看似简单的步骤,实现起来对于初学者来讲,仍难侍候很大难度的.一定要多学多练,多练,在多练.形成自己的编程思想,编程思想非常重要. 新知识补充了VDO

Vue.js 基础部分

### Vue.js 基础部分 ## 一. Vue.js 简介 ### 1. Vue.js 是什么 **Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e 版本: v2.6 - 是一个构建用户界面的框架 - 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular.react 类似,其实就是所谓的数据双向绑定 - 数据驱动+组件化的前端开发(核心思想) - 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件*

JS基础篇--HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla

ngnix 部署 vue项目-基础篇

ngnix 部署 vue项目-基础篇 标签(空格分隔): docker ngnix vue Dockerfile 目录 基础知识 主要知识点 ###1.基础知识 image container docker 命令 build run rm rmi exec Dockerfile npm 打包vue项目 ###2.主要知识点 Dockerfile image container 简单来讲,Dockerfile构建出Docker镜像,通过Docker镜像运行Docker容器. Dockerfile

Vue.js基础2

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作.现在数据和 DOM 已经被绑定在一起,所有的元素

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自