Learn Vue.js in 7 Days

Journey through Vue.js

Tadit Dash

• Publisher: BPB Publications
• Year: 2019
• ISBN:
  9789388511865
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

A journey starts from zero understanding to dev ready in Vue.js Key Features
1. Learner can learn the concepts such as how Vue.js works in the real would with reusable items like components, plugins, mixins and so on
2. Efficient and different ways of writing the template codes like using HTML, using.vue files and so on
3. Along with several basics, we have emphasized the concepts which are the real implementation as per industry standard.
4. This book is a reference guide for the novice learners in Vue.js.
5. We have started with the basics of Vue.js and progressed through the basic elements. So that the reader will get a fair idea of it.
6. It will help the reader to decide between the frameworks as we have stated a framework comparison in the book Description
Vue.js is one of the quickly growing Javascript frameworks, which can be used in any scale of the project to help the stakeholders in rapid application development process. The good thing with Vue.js is that it is lightweight and can also be integrated with the existing project. It saves the development time and also enables managed HTML interface using Javascript.
We have designed the book in a way that it keeps shaping the readers understanding in Vue.js. We have started with a basic advantage of learning Vue.js. Then the topic progresses through the introduction of Vue.js, how to setup a project, how CLI in Vue.js works, basic understanding of the HTML tags used with Vue.js, watchers and it wraps around with the computed properties along with a comparison between watchers and computed property. By this time, the reader must have gained a fair knowledge on Vue.js. In this first part, we have also covered the usage of the debugging tool shared by Vue.js i.e Vue Chrome extension.
In the middle section of the book, we have mostly covered the reusable part for Vue.js by covering the component basics and advance along with plugins, mixins, slots, filters, render functions and so on.
At the end, we have added the routing, state management and building single page application concepts for the reader to make them equipped to create and work in projects.
Additionally we have added one appendix which makes a quick and basic comparison between similar JS frameworks. We have also covered few alternatives of designing components in Vue.js. What Will You Learn
This book would help the reader to acquire the knowledge on the Javascript framework like Vue.js. It would help them in understanding the two way binding, the way how states work, how the single paged application built and so on, which are the kind of much needed industry knowledge now-a-days. Who This Book Is For
The reader should have a basic understanding of HTML, CSS and Javascript which are the basic building blocks of web developement. So this book, we have skipped the basics of web development part and covered the Vue.js starting from basics to advanced. Table of Contents
1. Day 1: Introduction
a. Before I start with Vue.js
b. Let's setup Vue.js
c. Let's Put Vue in action
d. Vue Dev Tools
e. Vue CLI
f. Summary 2. Day 2: Rendering with HTML
a. Basic HTML structuring with Vue
b. Conditions and loop structures
c. Form elements and basic event handling
d. Summary 3. Day 3: Computed property
a. Greeting to the user
b. Computed properties vs methods
c. Watched property
d. Summary 4. Day 4: Components
a. What is component
b. Template string looks odd!!!
c. Passing properties to the component
d. Registering the component
e. Data passing between components
f. Summary 5. Day 5: Components in depth
a. Diving in the props
b. Slots
c. Summary 6. Day 6: Distribute reusable functionality
a. Mixins
b. Custom directives
c. Filters
d. Plugin
e. Summary 7. Day 7: Single page application
a. What is route
b. State Management
c. Summary 8. Appendix
a. Render functions
b. JSX
c. Comparing Vue
d. Summary About the Author
Nirmal Hota
Nirmal Hota is a software developer and mentor. He loves to learn and work in different technologies. He has worked in various Microsoft Technologies such as C#, VB, ASP.net, Dynamics CRM, Commerce server and so on. Also worth mentioning his expertise in open source and mobile application technologies like Ruby on Rails, Phonegap, Titanium, Xamarin and so on. He loves to explore different Javascript based platforms including Angular, React and Vue. LinkedIn Profile: https://www.linkedin.com/in/nirmalhota/ Tadit Dash
Tadit Dash is a software engineer by profession.
As a software engineer, he usually works for eight to nine hours daily. Besides his daily work, he contributes to both online and offline communities. He co-founded the first Technical Community in his state named Utkal Techies Forum Odisha, which is devoted to spreading awareness of the newest trends in technology among techies. LinkedIn - https://www.linkedin.com/in/taditdash/ Dr. Vishal Jain
Dr. Vishal Jain is currently working as Associate Professor with Bharati Vidyapeeth's Institute of Computer Applications and Management (BVICAM), New Delhi Affiliated to GGSIPU and Accredited by AICTE, since July, 2017 to till date. He has joined BVICAM, New Delhi in year 2010 and worked as Assistant Professor from August, 2010 to July, 2017. Before joined BVICAM, New Delhi, he has worked four years in Guru Presmsukh Memorial College of Engineering, Affiliated to GGSIPU and Accredited by AICTE, from July 2004 to July, 2008. Dr. Vishal Jain has completed Ph.D (Computer Science and Engineering) from Lingaya's University, Faridabad, Haryana, M.Tech (Computer Science and Engineering) from University School of Information Technology (USIT), Guru Gobind Singh Indraprastha University, MBA (HR) from Shobhit University, Meerut, MCA from Sikkim Manipal University, Sikkim. In additional qualification he has obtained DOEACC 'A' Level and DOEACC 'O' Level, Post Graduate Diploma in Computer Software Training from A.M Informatics, Advance Diploma in Computer Software Training from ET&T, Delhi, Diploma in Business Management from All India Institute of Management Studies, Chennai, Diploma in Programming from Oxford Computer Education, Delhi, Microsoft Certified Professional Cleared Two Modules 070-210, 070-215 (MCP) and Cisco Certified Network Administrator (CCNA). He has received Young Active Member award for the year 2012 – 13 from Computer Society of India. Dr. Vishal Jain has worked as a Delhi State Students' Coordinator, Delhi Chapter, Computer Society of India (2014 – 2016). His research area includes Semantic Web, Ontology Engineering, Cloud Computing, Big Data Analytics and Adhoc Networks. LinkedIn Profile: https://in.linkedin.com/in/vishaljain83

DAY 1

Introduction

In this chapter, we will go through an introduction of Vue.js. We will also go through the Vue ecosystem to setup the environment. We will also cover a brief description on the installation process, devtools and vue CLI for project scaffolding, and so on in this chapter.

As we know, JavaScript is a scripting language being interpreted by the browser, with the help of embedded JavaScript engines such as V8, Rhino, and so on. V8 is the most widely used JS engine in the modern web browsers. JavaScript plays a vital role in the world of web development by executing the user request in the client end and reducing the client-server request response roundtrip, which enhances the user experience and performance.

Vue is a UI based framework built on top of JavaScript. It works on the UI layer of the web applications.

Before I start with Vue.js

Since it is a JavaScript based framework, it mainly operates on the UI layer, it requires for the developers to know the basics of JavaScript, HTML, and CSS so that the user can implement Vue.js in the project to see it in action.

In this book, we will keep using the Vue.js along with the normal JavaScript.

Vue.js

Vue.js is an open source progressive JavaScript framework. It is originally invented by Evan You, one of the ex-Google employee. He has worked in MeteroJS project as well. Although graduated from Arts, he is in touch with development. He got a chance to work with Angular during his Google days. He then started working in his own project and the first Vue.js version was pushed to Git in February 2014, which arguably seems to as an improvement over Angular.

Vue.js has some key characteristics which make it popular and adoptable.

Light weight

It is light weight JavaScript library which comes into action, as soon as it’s added to the project. It mainly follows a ViewModel pattern to communicate with the view layer. The view layer is mainly designed with HTML and CSS.

Progressive

As mentioned earlier, it basically works on the View layer in the UI. It is implemented as an additional markup to the HTML UI by binding the template model with data model.

Virtual DOM

DOM is the abbreviation for Document Object Model. The HTML DOM in the browser we see, has a tree like structure. In order to make changes in the UI in the browser, we need to make changes to the DOM element by finding that from the DOM tree. Mostly we use document.getElementById to find the element. This is a memory expensive process which makes the page perform slower.

Virtual DOM is a technique to bind the DOM tree to the JavaScript object tree. The JavaScript object tree is not the actual DOM, it is a virtual representation of the HTML DOM on UI. So, any changes to any of the JavaScript object attribute node which binds with a DOM element will get reflected on screen UI. This would NOT be a memory expensive way. Implementation of Virtual DOM in Vue, based on snabbdom (https://github.com/snabbdom/snabbdom).

HTML based template

Template helps in creating re-usable UI components. Vue object allows defining the templates by using the HTML code within the object itself, which helps in creating the reusable components as well as it adds advancement to the existing HTML.

Reactive view components

Vue supports the two-way binding technique. The data model is bind to the template model which reflects on UI, when changes made to the data in the data model and vice versa.

Single Page Application

Single page applications (SPA) are the kind of web application which basically renders and re-renders by dynamically writing contents in the same page than loading multiple pages for the contents depending upon the user actions. Vue can be used to develop SPA. It can also be used in multi-page applications as well.

Let’s setup Vue.js

We need to setup the Vue now, in order to use it in our project. So, before we proceed and install it in the project, let’s first check the number of ways we can add Vue.js to our project.

Download and reference method

As mentioned earlier, Vue is a lightweight JS library. This library can be directly downloaded and added to the project, by using the <script/> tag. It has two versions available, for download and to be used in the page.

Development version: https://Vue.js.org/js/Vue.js

It is advisable to use this version during the development phase. This is a non-minified version with relevant debug and warning message, which helps the developer during development.

Production Version: https://Vue.js.org/js/vue.min.js

The production version is the gzipped minified version of the library with reduced size of approximately 31KB. It suppresses the debug and warning messages, which won’t be used in the production anyway.

The JS library can be downloaded/saved from the above location to be used in the project. So that it will also be available offline during development.

Although this can be referenced directly as an online link but it would be slower. If intended to refer online, it is advisable to use the CDN method, which will be explained now.

Reference from CDN

CDN reference is same as the download method. The basic difference is, in the direct download method, it is advisable to download the JS and use in the <script/> tag. But in the CDN, it will directly be referenced from the CDN in the project. It will be faster to get loaded into the page, although referenced from online.

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/Vue.js” />

It is also advisable to use the non-minified version during development, which helps in debugging. CDN reference method helps the user to reference the required version of Vue, as shown in the above code example. We have referenced the version 2.5.17 of the Vue library. The version must be manually updated to point to the correct one.

The other available Vue versions can be browsed from the NPM package, as shown in the image below. Version can be changed from the version dropdown, to view the package contents.

Figure 1.1: Vue.js CDN file structure

Other CDN services like unpkg and cdnjs can be referenced as well.

unpkg <script src=”https://unpkg.com/[email protected]/dist/Vue.js” />

cdnjs <script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/Vue.js” />

While deploying to the production, Vue.js needs to be chang...