Learn Vue.js

Vue.js learning guide with examples.
Covers Vue.js 2.x

1 - Introduction

1.1 What is Vue.js?

A JavaScript Framework for building front-end apps/user interfaces.
The core library is focused on the "view layer" only.

Vue.js is a “Progressive Framework”. It is incrementally adoptable.

It means if you have an existing server side application, you can plug Vue.js into one part of your application and then gradually implement into other areas of your application as you go. You can start simple and then progressively add tools and features that you need to build a complex web application.

It fits nicely with other libraries and existing projects.

Yuxi (Evan) You is the creator and project lead of Vue.js.

Reference Link: Vue.js Guide

1.2 Vue.js Ecosystem

Project	Description
Devtools	Browser devtools extension for debugging Vue.js application
Vue CLI	It provides a full system for rapid Vue.js development.
Vue Loder	Loader for webpack that allows you to author Vue.js components in SFCs (Single File Components) format.
Vue Router	The official router for Vue.js.
Vuex	Vue.js’s own state management pattern + library.
Vue Server Side Renderer	It is possible to render components into HTML on server side and send them directly to the client.
Vetur	VS Code Extension
Vue VSCode Snippets	VS Code Extension

1.3 Vue.js Prerequisites

Basic knowledge of HTML, CSS & JavaScript.

---

2 - Installation

Checkout 2-installation branch:
git fetch && git checkout -b 2-installation origin/2-installation

Vue.js can be installed in the following ways:

• Using direct <script> include
  Simply download and include Vue.js with a script tag.
  For example,
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  • Development Version (with full warnings + debug mode, suitable for development)
  • Production Version (warnings stripped, optimized for production)

• Using NPM
  npm install vue

• Using Vue CLI
  vue create <project-name>

After installation Vue is available as global variable "Vue"

Reference Link: Vue.js 2.x Installation

---

3 - Vue Instance

Checkout 3-vue-instance branch:
git fetch && git checkout -b 3-vue-instance origin/3-vue-instance

• Create Vue instance
  new Vue({})

• Vue instance is the “Root” of every Vue application

• Plugging into an element in the DOM
  Set "el" in the options

• Set instance data
  Set "data" in the options

• Using “Mustache” {{ }} syntax to display data
  We can use expressions inside {{ }}

• One way data flow
  From instance data to template

• Vue is “Reactive”
  Data is linked to every place in the template where it is referenced/used.
  So whenever data changes, template is updated automatically.

---

4 - Attribute Binding

Checkout 4-attribute-binding branch:
git fetch && git checkout -b 4-attribute-binding origin/4-attribute-binding

• Data can be bound to HTML attributes
  :src
:alt
:title
:class
:href
:style
  etc.

• Syntax is v-bind: or use : shorthand

• This is "one way" data flow
  From instance data to template

---

5 - Conditional Rendering

Checkout 5-conditional-rendering branch:
git fetch && git checkout -b 5-conditional-rendering origin/5-conditional-rendering

• Vue directives to conditionally render elements.

  • v-if
  • v-else-if
  • v-else
  • v-show

• There is an expression inside directive's quote which evaluates to true/false.
  Based on this element is rendered.

• v-show only toggles visibility of an element instead of inserting/removing it from the DOM.
  With v-show the element is always rendered with visibility on or off.
  Use v-show if you need to toggle something very often.

---

6 - List Rendering

Checkout 6-list-rendering branch:
git fetch && git checkout -b 6-list-rendering origin/6-list-rendering

• v-for directive is used to iterate over an array of items. For example, v-for="item in items"

• We can iterate over an array of objects as well. Using dot . notation we can access object properties/attributes.

• It is recommended to provide a key attribute with v-for whenever possible. This gives a unique key to each rendered element.

• Use string or numeric values for v-for keys.

• Using v-if and v-for together is not recommended.

---

7 - Event Handling

Checkout 7-event-handling branch:
git fetch && git checkout -b 7-event-handling origin/7-event-handling

• v-on directive is used to listen to DOM events and run JavaScript when they are triggered.
  For example, v-on:submit, v-on:click, v-on:mouseover etc.

• The shorthand for v-on is @

• We can specify any type of DOM event to listen for:

  • click
  • submit
  • mouseover
  • keyup
    etc.

---

8 - Class and Style Binding

Checkout 8-class-and-style-binding branch:
git fetch && git checkout -b 8-class-and-style-binding origin/8-class-and-style-binding

• Data can be bound to an element's style/class attribute.

• Expressions can be used to evaluate whether a class/CSS will be applied or not.

• Examples

  1. Style Binding
     :style="{ backgroundColor: variant.color } evaluates to style="{ background-color: grey }"

  2. Style Binding using an Object
     :style="someStyleObject" where someStyleObject is set in the data as follows

     data: {  
       someStyleObject: {  
         color: 'red',  
         font-size: '15px'  
       }  
     }  
     

     this evaluates to
     style="{color: red; font-size: '15px'}"

  3. Style Binding using an Array
     We can bind an array of style objects, to do this we can write :style=[styleObject1, styleObject2]

  4. Class Binding
     :class="{ disabledButton: !inStock } evaluates to class="disabledButton" when inStock is false
:class="{ active: activeClass, 'text-danger': errorClass }" with the following data

     data: {  
       activeClass: true,  
       errorClass: false  
     }  
     

     this evaluates to
     class="active"

  5. Class Binding using an Object
     :class="someClassObject" where someClassObject is set in the data as follows

     data: {  
       someClassObject: {  
         active: true,  
         'text-danger': false  
       }  
     }  
     

     this evaluates to
     class="active"

  6. Class Binding using an Array
     We can bind an array of classes, to do this we can write :class="[ activeClass, errorClass ]"
     with the following data

     data: {  
       activeClass: 'active',  
       errorClass: 'text-danger'  
     }  
     

     this evaluates to
     class="active text-danger"

---

9 - Computed Properties

Checkout 9-computed-properties branch:
git fetch && git checkout -b 9-computed-properties origin/9-computed-properties

• Computed properties calculate a value rather than store a value.

• Computed properties are derived from existing data.

• Computed properties are cached until its dependencies change.
  So for an expensive operations, use computed properties instead of methods to get caching benefits.

• Computed properties should be used for the presentation purpose only.

• Don't modify data through it.

---

10 - Components

Checkout 10-components branch:
git fetch && git checkout -b 10-components origin/10-components

• Components are reusable blocks of code that have both structure and functionality.

• They help create a more modular and maintainable codebase.

• Imagine components as "Lego" blocks that can fit together to build something wonderful.

• For Vue instance we set el property to plug it into an element in the DOM.
  Whereas component has its own HTML template.

• Component template should contain exactly one root element.

• For components data must be a function which returns a data object, that way each component instance will have its own copy of data.

• Props are used to pass data from parent to child.

• Props are passed into child components through custom attributes.

• Props can be bound to the parent component's data.

• We can specify requirements for the props a component is receiving.

• Props are meant to be "read-only". Just consume as they are received from parent. Don't modify them.
  Why? Because when the data changes in parent it is passed to child, this will update props in place resulting in loss of modifications.

---

11 - Communicating Events

Checkout 11-communicating-events branch:
git fetch && git checkout -b 11-communicating-events origin/11-communicating-events

• Child component can emit an event by using $emit. We can also pass data along with an event.

• Parent component can listen to emitted events by using v-on directive (shorthand @).

• Parent component can use data emitted along with event.

• Using Props data flows from Parent to Child and using event-listeners data flows from Child to Parent.

• This is very simple to use as far as the use case is simple enough.

---

12 - Forms and v-model

Checkout 12-forms-and-v-model branch:
git fetch && git checkout -b 12-forms-and-v-model origin/12-forms-and-v-model

• Use v-model directive to create two-way data binding on form elements.
  From template to data and data to template.

• Use .prevent event modifier to stop reloading the page when form is submitted.

• Find more about modifiers

  • Event Modifiers
  • Key Modifiers
  • Form Input Modifiers

---

License

MIT