This tutorial is based on vue.js 2.x
Welcome to hellovue-Todo-tutorial, a step-by-step tutorial that will teach you how to build a Todo application from scratch using Vue.
This tutorial can be seen as an add-on to the HelloDjango series. After familiarizing ourselves with the basic concepts of Vue, we will develop Django blog applications using a back-end separation approach.
This tutorial is also the first in a series of HelloVue tutorials that will take you step by step into Vue, learning all aspects of Vue development in a hands-on manner.
Again, this tutorial is completely free, open source, and launched on HelloGitHub.
Vue. Js is what
Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.
174,000 stars on GitHub ranked third overall. (Statistics at the time of publication)
Vue.js is one of the most popular open source front-end frameworks. It’s easy to use and a must-have skill for front-end programmers.
Features of this tutorial
This tutorial is completely for beginners. You may have learned a little bit about HTML, spent 10 + minutes looking at the basics of JavaScript, or even have no idea what CSS is. It doesn’t matter!
This tutorial also doesn’t start out by teaching you how to configure complex front-end engineering projects (as many of the blogs I’ve collected on the web teach Vue to develop Todo applications do), which can easily scare off a beginner. In fact, Vue is nothing more than a JavaScript library. All you need is a text editor that can input code and a modern browser to run a Vue application. Therefore, this tutorial will put aside the tedious front-end engineering configuration process, all the code will be written in a single HTML file, open the browser can run to see the effect, press F12 can be code debugging.
The final result of our project looks like this:
You can see the interface of the application is 1980s level because we use the browser’s native UI without any CSS styles. Adopting this style has the great advantage of being able to focus solely on the Vue and not on the redundant element styles. After all, many well-known companies like Google, Amazon and Facebook use this minimalist style of design, and Xiaomi founder Lei Jun once said that “design without design is the best design,” indicating that there is something to be said for this kind of design.
Of course it’s easy to style our Vue Todo application with frameworks like Boostrap and Materialize. If you make a Todo with a different style, please send me pull Requests.
Using a Todo app to explain the core features of Vue is very appropriate because it is small but has all the components. A TODO can almost cover the core features of Vue, such as computed properties, listeners, directives, dynamic style binding, conditional rendering, list rendering, event handling, form binding, components, communication between components, and custom directives. To understand what these features can help us do with an example of Todo, then go back to the relatively dry official introduction documentation and get a better idea of what Vue has to offer.
Open source project address: github.com/HelloGitHub…
Ok, let’s get a text editor and a browser ready and get started!