0-完全开源的 Vue.js 入门级教程:HelloVue,发车啦!
本教程基于 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,发车啦!的更多相关文章
- Vue.js入学教程
Vue.js是什么Vue.js 是用于构建交互式的 Web 界面的库.Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.Vue.js(类似于view)是一套构建 ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- Vue.js 系列教程 ②
这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- Vue.js 系列教程 4:Vuex
这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...
- Vue.js 系列教程 2:组件,Props,Slots
原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...
- [转]Vue.js 入门教程
本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库. Vu ...
- Vue.js 系列教程 3:Vue
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- Vue.js:教程
ylbtech-Vue.js:教程 1.返回顶部 1. Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向 ...
随机推荐
- Kubernetes-5:搭建企业级私有仓库Harbor
搭建企业级私有仓库Harbor 安装需求 python版本 >= 2.7 Docker引擎版本 >= 1.10 docker-compose版本 >= 1.6.0 安装环境 一.Py ...
- .NET Core 下使用 Apollo 配置中心
Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景.服务 ...
- 微信小程序 部署(后台是springboot项目 前后台分流)
微信小程序的部署需要https 和证书: https 需要反向代理: 这里用 nginx,无论linux,windows 系统都可以安装: 1.安装nginx ,这步自己去做: linux 安装ngi ...
- 【漫话DevOps】Agile,CI/CD,DevOps
随着DevOps理念的普及与扩散,可能会被一大堆名字概念搞的莫名其妙,理清它们之间的关系可以帮助团队知道DevOps如何落地,改善工作流程. Here's a quick and easy way t ...
- adb无线连接android手机进行调式,无需获得root权限
利用adb无线连接android手机进行调式 无需获得root权限 转载来自CSDN https://blog.csdn.net/lnking1992/article/details/5346518 ...
- 踩坑了,JDK8中HashMap依然会死循环!
是否你听说过JDK8之后HashMap已经解决的扩容死循环的问题,虽然HashMap依然说线程不安全,但是不会造成服务器load飙升的问题. 然而事实并非如此.少年可曾了解一种红黑树成环的场景,=v= ...
- 容器云平台No.4~kubernetes 服务暴露之Ingress
这是容器云平台第四篇,接上一篇继续, 首先kubernetes服务暴露有如下几种方式: NodePort Loadbalance ClusterIP Ingress 本文紧贴第一篇架构图,只介绍Ing ...
- WEB 应用缓存解析以及使用 Redis 实现分布式缓存
什么是缓存? 缓存就是数据交换的缓冲区,用于临时存储数据(使用频繁的数据).当用户请求数据时,首先在缓存中寻找,如果找到了则直接返回.如果找不到,则去数据库中查找.缓存的本质就是用空间换时间,牺牲数据 ...
- 基于NPOI的Excel导入导出类库
概述 支持多sheet导入导出.导出字段过滤.特性配置导入验证,非空验证,唯一验证,错误标注等 用于基础配置和普通报表的导入导出,对于复杂需求,比如合并列,公式,导出图片等暂不支持 GitHub地址: ...
- Maven依赖管理之BOM
目录 什么是BOM 一个BOM的格式 怎么使用BOM 通过parent引用 通过dependencyManagement引用 怎么查看依赖的某个BOM的具体清单 版本冲突时的一些规则 何为依赖调节 参 ...