本教程基于 Vue.js 2.x

作者:HelloGitHub-追梦人物

欢迎来到 HelloVue-todo-tutorial,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。

这个教程可以看做是 HelloDjango 系列的番外篇,通过这个教程熟悉 Vue 的基本概念后,我们将使用前后端分离的方式,开发 Django 博客应用。

这个教程还是 HelloVue 系列教程的开篇,这个系列教程将带你循序渐进地深入 Vue,通过实战的形式学习 Vue 开发的方方面面。

同样,本教程完全免费、开源,首发于 HelloGitHub 公众号。

Vue.js 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

在 GitHub 上有 17.4 万 star 排在总榜第三名。(截止本文发布​时的统计数据)

如果没看懂上面说的,看着这句就行:Vue.js 是当前最流行的开源前端框架之一,它上手容易、是前端程序员必备技能,学它准没错。

本教程特色

这个教程是完全面向新手的,你可能只了解过一点点的 HTML 知识,花了 10 多分钟看了一点 JavaScript 的基础教程,甚至于你完全不懂什么是 CSS。都没有关系!

这篇教程也不会一上来就先教你配置复杂的前端工程化项目(我在网上搜集的很多教 Vue 开发 Todo 应用的博客都是这么做的),这很容易把一个初学者吓跑。事实上 Vue 不过是一个 JavaScript 库,我们仅仅需要准备一个可以输入代码的文本编辑器和一个现代化的浏览器就可以运行 Vue 应用。因此本教程将抛开繁琐的前端工程化配置过程,所有的代码都将在一个单一的 HTML 文件里编写,用浏览器打开即可运行查看效果,按 F12 就可以进行代码调试。

我们的项目最终完成效果就是下面这个样子:

你可以看到应用的界面处于上个世纪 80 年代的水平,因为我们使用了浏览器原生的 UI 而未加任何 CSS 样式。采用这种风格有很大的好处,这样我们可以将注意力完全集中在 Vue 的使用上,而不用关注那些多余的元素样式。毕竟连 Google、Amazon 和 Facebook 等很多知名公司的应用也采用这种极简化风格设计,而且小米创始人雷军也说过"没有设计的设计就是最好的设计",说明这种设计还是有可取之处的。

当然采用一些如 Boostrap、Materialize 等框架后很容易为我们的 Vue Todo 应用加上样式,如果你做了一个风格不一样的 Todo,欢迎提一个 pull requests 给我。

使用一个 Todo 应用来讲解 Vue 的核心特性是非常合适的,因为它麻雀虽小,但五脏俱全。一个 todo,几乎可以囊括 Vue 中计算属性、侦听器、指令、动态样式绑定、条件渲染、列表渲染、事件处理、表单绑定、组件、组件间的通信、自定义指令等核心特性。通过一个 todo 的例子来理解这些特性能帮助我们做什么事情,然后回过头去看相对枯燥的官方入门文档,一定会对 Vue 的这些特性有一个更加深刻的了解。

开源项目地址:https://github.com/HelloGitHub-Team/HelloVue-todo-tutorial

好的,让我们准备一个文本编辑器和一个浏览器,然后开始吧!

0-完全开源的 Vue.js 入门级教程:HelloVue,发车啦!的更多相关文章

  1. Vue.js入学教程

    Vue.js是什么Vue.js 是用于构建交互式的 Web 界面的库.Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.Vue.js(类似于view)是一套构建 ...

  2. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  3. Vue.js 系列教程 ②

    这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...

  4. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  5. Vue.js 系列教程 4:Vuex

    这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...

  6. Vue.js 系列教程 2:组件,Props,Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  7. [转]Vue.js 入门教程

    本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web  界面的库. Vu ...

  8. Vue.js 系列教程 3:Vue

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  9. Vue.js:教程

    ylbtech-Vue.js:教程 1.返回顶部 1. Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向 ...

随机推荐

  1. 本地模拟 gitlab ci 的 demo 项目

    构建好的镜像能跑起来, 项目地址: https://github.com/szliugx/gitlab-ci-local 为了不每次提交,本地可以做一些模拟 gitlab ci 的测试≍,主要实现方式 ...

  2. cannary

    canary是Linux为防止栈溢出的一种保护机制,接着我们分析glibc对canary的实现过程,首先给出跟canary相关的调用栈: security_init()  //在elf/rtld.c中 ...

  3. vue3剖析:响应式原理——effect

    响应式原理 源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity 模块 ref: reactive: compu ...

  4. 离线安装Superset 0.37

    上文提到了Superset 0.37的在线安装方式,只需要更新pip,然后pip install就可以了.但是在生产环境中,特别是内网环境中,很多时候是没有外网的,这时候就需要采取离线安装的方式. 本 ...

  5. 小白的springboot之路(十七)、阿里云OSS 的使用

    0-前言 项目中,文件服务必不可少,常用的有各云服务商的OSS服务(如阿里云OSS,腾讯云OSS,七牛云).自建(fastDFS.minio): 推荐:如果用云服务的话,阿里云OSS很方便,如果自建的 ...

  6. JDK的安装与环境变量的配置

    一.JDK的安装 1. JDK的下载地址     https://www.oracle.com/java/technologies/javase-downloads.html. 2.  当前最流行的是 ...

  7. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  8. DRF序列化、认证、跨域问题

    初级 #models.py from django.db import models class User(models.Model): user = models.CharField(max_len ...

  9. 群光电子-koremes3 ORA-600 [kjxmgmb_nreq:!bat]

    Bug 20250147  ORA-600 [kjxmgmb_nreq:!bat] can occur in RAC crashing the instance  This note gives a ...

  10. 栈帧的内部结构--动态返回地址(Return Address)

    每个栈帧中包含: 局部变量表(Local Variables) 操作数栈(Opreand Stack) 或表达式栈 动态链接 (Dynamic Linking) (或指向运行时常量的方法引用) 动态返 ...