Tải bản đầy đủ - 0 (trang)
Chapter 1: Going Shopping with Vue.js

Chapter 1: Going Shopping with Vue.js

Tải bản đầy đủ - 0trang

Going Shopping with Vue.js

Now it states that Vue.js is a progressive JavaScript framework:

So what is Vue.js after all? Framework? Tool? Library? Should it be used for building fullstack web applications or just for adding some special functionality? Should I switch from

my favorite framework to it? If yes, why? Can I use it alongside other tools in my project?

What advantages it might bring?

In this chapter, we will try to find the answers to all these questions. We will slightly touch

Vue.js and use it within some small and simple examples.

More specifically, we will do the following:

Learn what Vue.js is, its important parts, and its history

Learn what projects use Vue.js

Build a simple shopping list using Vue.js and compare the implementation to the

jQuery implementation of the same application

Build a simple Pomodoro timer using Vue.js

Enjoy a small and simple exercise


There will be lots of buzzwords, abbreviations, and other hipster combinations of letters in

this book. Please do not be afraid of them. I can tell you more but, for the most part of

things you need to do using Vue.js or any other framework, you do not need to know them

all by heart! But, in any case, let us leave the thesaurus here so that you become confused

with terminology at any point of the book, you can come back here and have a look:

Application state: This is a global centralized state of the application. The data in

this state is initialized when the application is started. This data can be accessed

by any application's component; however, it cannot be changed easily by them.

Each item of the state has an attached mutation that can be dispatched on special

events occurring inside the application's components.


Going Shopping with Vue.js

Bootstrap: This is a project that provides a set of styles and JavaScript tools for

developing a responsive and nice application without having to think a lot about


Content Distribution Network (CDN): This is a special server whose aim is to

deliver data to the users with high availability and high performance. People and

companies who develop frameworks like to distribute them via CDNs because

they allow them just to point out the CDN's URL in the installation instructions.

Vue.js is hosted in npmcdn (https://npmcdn.com/), which is a reliable and

global network for the things that are published to the npm.

Components: These are the pieces of the application with their own data and

View that can be reused through the application, acting as a brick from which the

house is being built.

Cascading Style Sheets (CSS): This is a set of styles to apply to the HTML

document to make it nice and beautiful.

Declarative Views: These are the Views that provide a way of direct data binding

between plain JavaScript data models and the representation.

Directives: These are special HTML elements attributes in Vue.js that allow data

binding in different ways.

Document Object Model (DOM): This is a convention for representing nodes in

markup languages such as HTML, XML, and XHTML. The nodes of the

documents are organized into a DOM tree. When someone says interacting with

DOM, it is just their fancy way of saying interacting with HTML elements.

npm: This is a package manager for JavaScript and allows searching, installing,

and managing JavaScript packages.

Markdown: This is a human-friendly syntax that allows web writers to write

their text without worrying about styles and HTML tags. Markdown files have

a .md extension.

Model View ViewModel (MVVM): This is an architectural pattern whose

central point is a ViewModel that acts as a bridge between the View and the data

model, allowing the data flow between them.

Model View Controller (MVC): This is an architectural pattern. It allows

separating Views from Models and from the way that information flows from

Views to Models, and vice versa.

One-way data binding: This is the type of data binding where the changes in the

data model are automatically propagated to the View layer, but not vice versa.

Rapid prototyping: In the Web, this is a technique of easily and rapidly building

the mockups of the user interface, including some basic user interaction.


Going Shopping with Vue.js

Reactivity: In the Web, this is actually the immediate propagation of any changes

of data to the View layer.

Two-way data binding: This is the type of data binding where the changes in the

data model are automatically propagated to the View layer, and the changes that

happen in the View layer are immediately reflected in the data model.

User interface (UI): This is a set of visual components that allow the user to

communicate with the application.

Vuex: This is an architecture for Vue applications and allows simple management

of the application state.

Vue.js history

When, Evan You, Vue.js creator (http://evanyou.me/), was working at Google Creative

Labs on one of the projects, they needed to fast prototype a rather big UI interface. Writing

a lot of repeated HTML was clearly time- and resource-consuming, and that's why Evan

started looking for some already existing tool for this purpose. To his surprise, he

discovered that there was no tool, library, or framework that could fit exactly into the

purpose of rapid prototyping! At that time, Angular was widely used, React.js was just

starting, and frameworks such as Backbone.js were used for large-scale applications with

MVC architecture. For the kind of project that needed something really flexible and

lightweight just for quick UI prototyping, neither of these complex frameworks were


When you realize that something cool does not exist and you are able to create it—just do it!

Vue.js was born as a tool for rapid prototyping. Now it can be used to

build complex scalable reactive web applications.

That was what Evan did. That is how he came to the idea of creating a library that would

help in rapid prototyping by offering an easy and flexible way of reactive data binding and

reusable components.

Like every good library, Vue.js has been growing and evolving, thus providing more

features than it was promising from the beginning. Currently, it provides an easy way of

attaching and creating plugins, writing and using mixins, and overall adding custom

behavior. Vue can be used in such a flexible way and is so nonopinionated of the

application structuring that it definitely can be considered as a framework capable of

supporting the end-to-end building of complex web applications.

[ 10 ]

Going Shopping with Vue.js

The most important thing about Vue.js

Vue.js allows you to simply bind your data models to the representation layer. It also allows

you to easily reuse components throughout the application.

You don't need to create special models or collections and to register events object in there.

You don't need to follow some special syntax. You don't need to install any of never-ending


Your models are plain JavaScript objects. They are being bound to whatever you want in

your Views (text, input text, classes, attributes, and so on), and it just works.

You can simply add the vue.js file into your project and use it. Alternatively, you can use

vue-cli with Webpack and Browserify family, which not only bootstraps the whole

project but also supports hot reloading and provides developer tools.

You can separate the View layer from styles and JavaScript logic or you can put it

alltogether into the same Vue file and build your components' structure and logic in the

same place. There is plugin support for all modern and commonly used IDEs.

You can use whatever preprocessors you want, and you can use ES2015. You can use it

alongside your favorite framework you have been developing in, or you can use it itself.

You can use it just to add a small functionality, or you can use the whole Vue ecosystem to

build complex applications.

If you want to check how it compares to other frameworks, such as Angular or React, then

please visit http://vuejs.org/guide/comparison.html.

If you want to check out all the amazing things about Vue.js, then you are more than

welcome to visit https://github.com/vuejs/awesome-vue.

Let's go shopping!

I don't know how but I can feel that your weekend is close and that you are starting to think

about going shopping to buy the needed groceries for the next week. Unless you are a

genius who is able to maintain the whole list in your head or you are a modest person who

does not need so much, you probably make a shopping list before going shopping. Maybe

you even use some app for that. Now, I ask you: why not use your own app? How do you

feel about creating and designing it? Let's do that! Let's create our own shopping list

application. Let's start by creating a rapid prototype for it. It's a really easy task—build an

interactive prototype for the shopping list.

[ 11 ]

Going Shopping with Vue.js

It should show the list and allow us to add and remove the items. Actually, it's very similar

to a ToDo list. Let's start doing it using classic HTML + CSS + JS + jQuery approach. We will

also use the Bootstrap framework (http://getbootstrap.com/) to make things a little bit

more beautiful without having to write extensive CSS code. (Yes, because our book is not

about CSS and because making things with Bootstrap is so crazily easy!)

Implementing a shopping list using jQuery

Probably, your code will end up looking as something like the following:

Here is the HTML code:

My Shopping List

type="text" class="js-new-item form-control">

  • [ 12 ]

    Going Shopping with Vue.js

Here is the CSS code:

.container {

width: 40%;

margin: 20px auto 0px auto;


.removed {

color: gray;


.removed label {

text-decoration: line-through;


ul li {

list-style-type: none;


Here is the JavaScript/jQuery code:

$(document).ready(function () {


* Add button click handler


function onAdd() {

var $ul, li, $li, $label, $div, value;

value = $('.js-new-item').val();

//validate against empty values

if (value === '') {



$ul = $('ul');

$li = $('
  • ').appendTo($ul);

    $div = $('



    $label = $('
  • Tài liệu bạn tìm kiếm đã sẵn sàng tải về

    Chapter 1: Going Shopping with Vue.js

    Tải bản đầy đủ ngay(0 tr)