Скачать или смотреть Vue.js Tutorial #3 Getting Started With Vue.js

Vue.js Tutorial
#3 Getting Started With Vue.js

Prepared By:
Renjith VK (https://github.com/renjithspace)
Rahul TP (https://github.com/rahulspace)

Support on Patreon:   / codebeans  

Before jump in to start working on Vue.js, we hope you have basic knowledge in HTML and JavaScript. If you are new to frontend development we highly recommend you to grasp the basics and come back for better understanding. Because directly start to learn a framework without has basic knowledge in regarding languages always not a good idea.

Declarative rendering:
We going to run our first 'hello world' app in Vue.js. Here we going to declaratively render a data to DOM using mustache template syntax.

This is our basic setup. We installed Vue with CDN and added the main element with the ID as 'app'. Now we are ready to create an instance. Let's do it.

Create a Vue instance. Set a data property called message. Bind it on HTML. Let's check it on the browser. Yes, the message rendered here.

We have created our first Vue app. Now the data and DOM are linked and it reactive. Let's check the reactivity via console.

Open the console. Set the message to 'Hello vue'. Yes, it's reactive. Whenever the property change, it will reflect everywhere we call it.

Now we learned the text interpolation in Vue. Let's check how we can bind attributes and make them reactive. We can use 'v-bind' directive to do that. Directives will be prefixed with 'v-', those are inbuilt attributes in Vue with special capabilities.

Set a data property called message. Create a paragraph and set the title as the message using 'v-bind'. The colon is the shorthand of 'v-bind'. So we can use that. Let's check it. Yes, it working. Now we check the reactivity. Yes, it's working.

Conditionals:
We can conditionally render elements in Vue. A bunch of directives and methods available to do that. Here we using 'v-if' directive.

We can set a data property called 'isVisible' with true as the value. Create a paragraph with 'v-if' directive value as isVisible. Let's check it on the browser. Yes, the paragraph now rendered and visible, because of 'isVisible' value is currently true. Let's update it to false and see what happens. Yes, it's working. It's hidden when we set it to false and visible when on true.

Loops:
We can use 'v-for' directive to loop through a collection and render it. Let's see how to do that.

Set a data property called colors with value as a collection of color names. Created an ordered list with a list item. We can 'v-for' colors and bind the color name using mustache syntax. Let's check it. Yes working, color names rendered in an ordered list. Let's try to push some data to the collection and remove one from the top. Yes working as we expected.

Event handling:
There is a directive called 'v-on' to handle events. Let's see how to use that and handle events.

Set a data property called likes with default value as zero. Create a paragraph and bind the likes. Create a button and listen to the click event with 'v-on' directive and increment likes. The At sign is the shorthand for 'v-on'. So we can use that. Let's check it. Yes, it's working.

Input handling:
We can use 'v-model' directive for input handling. It's super easy and top-notch directive in Vue. Let's check it out how to use it.

Set a data property called name and value as 'John'. Create a paragraph and bind the name in it. Create input and set 'v-model' directive value as the name. Let's check it. Yes, it's working fine.

Components:
Components are essential in large scale application development and maintenance. We will have to create components for duplicating elements and reuse them, cut down bigger components to multiple sub-components for better maintainability and performance. Vue components will easiness these. Let's see how to create our very first Vue component and using it.

We can create a new component with the element name as 'list-item' with a template. Please make sure to create components before creating the Vue instance. Otherwise, the components won't work. Now we can use it. Let's check it on the browser. Yes, it's working.

Let's reuse the component by duplicating it. Yes working perfectly.

Now we going to check how to dynamically pass data to components. To do that we can set a props property with the attribute name. Bind the attribute to the template. Now we can pass the data as HTML attribute value. Let's check it. Yes working fine.

Let's try to loop the components. Set a data property called colors with the color collection. Loop 'list-item' using 'v-for' directive and bind the item attribute as color using 'v-bind' shorthand. Let's check it. Yes working perfectly.