Sep
19
2018

What is Vue.js?

  1. Vue is a progressive framework for building user interfaces.
  2. VueJS is an open source progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development.

Using CDN

  1. We can also start using VueJS file from the CDN library.
  2. The link https://unpkg.com/vue will give the latest version of VueJS.
  3. VueJS is also available on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js)
  4. We can host the files at our end, if required and get started with VueJS development.

Data Binding

  1. The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.

Components

  1. Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.
  2. Components in a Vue application can have their own state.
  3. Components in Vue.js out of the box can communicate using
  4.   – props to pass state down to child components from a parent,
      – events, to change the state of a parent component from a child, or using the root component as an event bus

What is Vuex?

  1. Vuex is the official state management library for Vuejs. It’s job is to share data across the components of your application.
  2. Vuex is not the only state management option you can use in Vue, but its main advantage is that it’s official, and its integration with Vue.js is what makes it shine.
  3. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

State

  1. Vuex uses a single state tree – that is, this single object contains all your application level state and serves as the single source of truth.
  2. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.
  3. The single state tree does not conflict with modularity – in later chapters we will discuss how to split your state and mutations into sub modules.