An introduction of the elegant front-end framework Vue.js

2. VueJS

3. What is vue.js?
Is a progressive javascript framework for building user interfaces. The core
library is focused on the view layer only.
Progressive:
● Approachable: Know html, css and javascript will make you do apps.
● Versatile: It is simple, minimal core and can handle apps of any scale.
● Performant: It has a fast virtual DOM with total library file size 16 mb + gzip.

4. Declarative Rendering

5. Conditional Rendering

6. List Rendering

7. Installation
npm install vue
There are two builds available, the standalone build and the runtime-only
build:
● The standalone build includes the compiler and supports the template
option.
● The runtime-only build does not include the template compiler, roughly
30% lighter-weight than the standalone build.

8. The Vue Instance
Every vue app must have this: new Vue({ }) , that is the constructor.
Or
var MyComponent = Vue.extend({ }) if you want to create a component.
For more info check Life Cycle Diagram

9. Template Syntax
Vue.js uses an HTML-based template syntax that allows you to declaratively
bind the rendered DOM to the underlying Vue instance’s data. All Vue.js
templates are valid HTML that can be parsed by spec-compliant browsers and
HTML parsers.
Under the hood, Vue compiles the templates into Virtual DOM render
functions. Combined with the reactivity system, Vue is able to intelligently
figure out the minimal amount of components to re-render and apply the
minimal amount of DOM manipulations when the app state changes.

10. Template Syntax ( Interpolations )
● Text: <span>Message: {{ msg }}</span> “Mustache” syntax (Plain text).
● Raw HTML: <div v-html="rawHtml"></div> “directive” (HTML).
● Attributes: <div v-bind:id="dynamicId"></div> “directive”.
● Filters: {{ message | capitalize }} are functions inside filters object to
change text format.

11. Template Syntax (Directives)
Directives are special attributes with the v- prefix. Directive attribute values
are expected to be a single JavaScript expression (with the exception for
v-for, which will be discussed later). A directive’s job is to reactively apply
side effects to the DOM when the value of its expression changes.
<p v-if="seen">Now you see me</p>

12. Template Syntax (Directives - Arguments)
Some directives can take an “argument”, denoted by a colon after the
directive name. Example:
<a v-bind:href="url"></a>
v-on directive, which listens to DOM events:
<a v-on:click="doSomething">

13. Components
Components are one of the most powerful features of Vue. They help you
extend basic HTML elements to encapsulate reusable code. At a high level,
components are custom elements that Vue’s compiler attaches behavior to.
In some cases, they may also appear as a native HTML element extended with
the special is attribute.

14. State Management
Large applications can often grow in complexity, due to multiple pieces of
state scattered across many components and the interactions between them.
To help solve this problem, we can adopt a simple store pattern:

15. Demo App
Let us see how vue works in a project

16. Thank You