Vue.js Routing

Programing Coderfunda February 09, 2021 Vue.js Tutorial No comments

Vue.js Routing

Vue.js does not have a built-in router feature, but you can easily create a single page application that supports routing using the recommended and officially-supported vue-router library.

There are some steps that you have to follow to install the router in Vue.js. You can use router by direct download it from CDN or using NPM or using Github.

Download from CDM directly

You can directly download the latest version of vue-router from CDN. It is available at https://unpkg.com/vue-router/dist/vue-router.js.

The unpkg.com contains the npm-based cdn links and always updated to the recent version. After downloading the unpkg.com file, host it to server, and use it with a script tag along with Vue.js as follows.

<script src = "/path/to/vue.js"></script>  
<script src = "/path/to/vue-router.js"></script>  

If you want to use it without downloading, you can use it as follows:

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  

Install router using NPM

Open the Node.js command prompt and run the following command to install the vue-router.

npm install vue-router

Install router using GitHub

Run the following commands to clone the router repository from GitHub:

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router  
cd node_modules/vue-router  
npm install  
npm run build  

Let's take a simple example to understand the concept of routing in Vue.js:

Example

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
         <p>  
<!-- use router-link component for navigation. -->  
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
            <router-link to = "/route1">Click on Router Link 1</router-link>  
            <router-link to = "/route2"> Click on Router Link 2</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route1 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 1</div>' }  
         const Route2 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 2</div>' }  
         const routes = [  
            { path: '/route1', component: Route1 },  
            { path: '/route2', component: Route2 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({  
            el: '#router_1',  
            router  
         })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

html, body {  
    margin: 5px;  
    padding: 0;  
}  

After the execution of the program, you will see the following output:

Output:

Click on the router link 2, and you will see that it is redirected to the following result.

Example Explanation

In the above example, you can see that we have added the vue-router.js file as follows:

<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>4  

In the following code, we have created two router links. We have defined these router links in the body section as follows:

<router-link to = "/route1">Click on Router Link 1</router-link>  
 <router-link to = "/route2"> Click on Router Link 2</router-link>  

Here, <router-link> is a component used to navigate to the HTML content and display it to the user. The to property specifies the destination. For example, the file where the link is displayed which you have to click.

The router is initialized in the script section where there are two constants created as follows:

const Route1 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 1</div>' }  
         const Route2 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 2</div>' }  

In the above code, we have specifies the templates that would be shown when you click on the router link.

Next is the routes const where we have defined the path which have to be displayed in the URL.

const routes = [  
   { path: '/route1', component: Route1 },  
   { path: '/route2', component: Route2 }  
];  

Routes are used to define the path and the component. The path will be displayed in the output when the user clicks on the router link.

The component takes the names of the templates to be displayed. The path from the routes needs to match with the router link to the property.

For example,

<router-link to = "name_of_-the_path"></router-link>  

Now, we have created the VueRouter instance using the following code:

const router = new VueRouter({  
   routes // short for `routes: routes`  
});  

The VueRouter constructor takes the routes as the param. We have used the following code to assign the router object to the main Vue instance.

var vm = new Vue({  
            el: '#router_1',  
            router  
         })  

After executing the above example, you will see the output in the browser. If you can inspect and check the router link, we will find that it adds class to the active element. The class added is class = "router-link-exact-active router-link-active".

Pass Props to Router Link

Let's see how to pass properties to Router Link. In the above example, we have passed a property "to" to the router link as follows:

<router-link to = "/route1">Click on Router Link 1</router-link>  
<router-link to = "/route2"> Click on Router Link 2</router-link>  

This property can be passed in many other ways to the router link.

The to prop

It is used to specify the destination path given to the <router-link>. When you click on the link, it will pass the value to router.push() internally. The value needs to be a string or a location object. There are three ways to pass the value using the "to" property.

Example 1:

<router-link to = "/route1">Click on Router Link 1</router-link>  
It is rendered as:   
<a href = "#/route">Router Link </a>  

Example 2:

<router-link v-bind:to = "{path:'/route1'}">Click on Router Link 2</router-link> // When using an object, it is recommended to bind it as shown in e.g. 2.  

Example 3:

<router-link v-bind:to = "{path:'/route1', query: { name: 'Alex' }}">Click on Router Link 3</router-link>//You can pass a query string  as shown in e.g. 3. This is an example of router link with query string.  

We have used the example 1 method in the above examples. Let's see the second and third method in the following example.

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
         <p>  
<!-- use router-link component for navigation. -->  
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
            <router-link v-bind:to = "{path:'/route3', query: { name: 'Alex' }}">Click on Router Link 3</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }  
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }  
         const routes = [  
            { path: '/route2', component: Route2 },  
            { path: '/route3', component: Route3 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({  
            el: '#router_1',  
            router  
         })  

After the execution of the program, you will see the following output:

Output:

Now, click on the router link 3, and you will see the set name as a query string in the url. See the output:

The replace prop

The replace property is used to replace the router link and call the router.replace() instead of router.push(). If yu use replace prop, the navigation history is not stored.

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
         <p>  
<!-- use router-link component for navigation. -->  
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
            <router-link v-bind:to = "{path:'/route3', query: { name: 'Panda' }}"   replace>This link is Replaced</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }  
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }  
         const routes = [  
            { path: '/route2', component: Route2 },  
            { path: '/route3', component: Route3 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file will be same.

After the execution of the program, you will see the following output:

Output:

You can see that when you click on the "This link is Replaced" link, the name is changed in the url.

The append prop

The append tag is used to add with the <router-link><router-link> link to make the path relative.

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
         <p>  
<!-- use router-link component for navigation. -->  
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
            <router-link v-bind:to = "{ path: '/route3'}" append>This is an appended link</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }  
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing the appended link router</div>' }  
         const routes = [  
            { path: '/route2', component: Route2 },  
            { path: '/route3', component: Route3 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({  
            el: '#router_1',  
            router  
         })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

html, body {  
    margin: 5px;  
    padding: 0;  
}  

After the execution of the program, you will see the following output:

Output:

The append prop

The append tag is used to add with the <router-link > to make the path relative. Let's take an example.

Example:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
         <p>  
<!-- use router-link component for navigation. -->  
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
            <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
            <router-link v-bind:to = "{ path: '/route3'}" append>This is an appended link</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }  
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing the appended link router</div>' }  
         const routes = [  
            { path: '/route2', component: Route2 },  
            { path: '/route3', component: Route3 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({  
            el: '#router_1',  
            router  
         })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

html, body {  
    margin: 5px;  
    padding: 0;  
}  

After the execution of the program, you will see the following output:

Output:

The tag prop

The <router-link> is rendered as a tag. The tag prop is used when you want to render it as some other tag. For example, if you want to render <router-link> as "span", you should specify it as tag = "span". Let's take a simple example.

Example:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
         <p>  
             <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Click on Router Link 2</router-link>   
            <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }  
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }  
         const routes = [  
            { path: '/route2', component: Route2 },  
            { path: '/route3', component: Route3 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

The index.js file would be same as we used in previous examples.

After the execution of the program, you will see the following output:

Output:

In the above example, you can see that the tag displayed now is a span tag. They are not seen as a clickable link but you can click them. Now, click on the router link 3 and see the result.

The active-class prop

The active-class property is added to <router-link> when you want to make it active. It is used to show that the router link is active. It is added as active-class = "_active".

The following code specifies how to use it in an example.

Syntax:

<style>  
   ._active{  
      background-color : red;  
   }  
</style>  
<p>  
<router-link v-bind:to = "{ path: '/route2'}" active-class = "._active">Click on Router Link 2</router-link>  
<router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
</p>  

It will make the "Click on Router Link 2" path active while "Click on Router Link 3" will be same.

The exact-active-class prop

The exact-active-class configures the active CSS class applied when the link is active with an exact match. The default exact active class is applied as router-link-exact-active.

The following code specifies how to use it in an example.

Syntax:

<style>  
   ._active{  
      background-color : red;  
   }  
</style>  
<p>  
<router-link v-bind:to = "{ path: '/route2'}" exact-active-class = "._active">Click on Router Link 2</router-link>  
<router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
</p>  

The event prop

In the previous example you have seen that the by default event for router-link is click event. When you clicked on the link, the router links were shown. You can change this by using the event property. See the following example:

Example:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Routing</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue/dist/vue.js"></script>  
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
    </head>  
    <body>  
      <div id = "router_1">  
         <h2>This is Routing Example</h2>  
<style>  
   ._active{  
      background-color : red;  
   }  
</style>  
<p>  
<router-link v-bind:to = "{ path: '/route2'}" event = "mouseover">Hover this link</router-link>  
            <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
         </p>  
         <!-- route outlet -->  
         <!-- component matched by the route will render here -->  
         <router-view></router-view>  
      </div>  
      <script type = "text/javascript">  
         const Route2 = { template: '<div style = "border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;">You are seeing router link 2</div>' }  
         const Route3 = { template: '<div style = "border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;"> You are seeing router link 3</div>' }  
         const routes = [  
            { path: '/route2', component: Route2 },  
            { path: '/route3', component: Route3 }  
         ];  
         const router = new VueRouter({  
            routes // short for `routes: routes`  
         });  
      </script>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

The Index.js file will be same as above example.

After the execution of the program, you will see the following output:

Output:

When you hover your mouse cursor on the first link, you will see the following result.

Sources by : javatpoint

Vue.js Reactivity System

Programing Coderfunda February 09, 2021 Vue.js Tutorial No comments

Vue.js Reactivity System

The reactivity system is one of the most distinctive features of Vue.js. In Vue.js, models are plain JavaScript objects. When we have to modify the models, the views are updated. This makes state management simple and intuitive, but it's also essential to understand how it works to avoid some common upcoming problems. Here, we will see how to deal with these problems by using the reactivity system.

How does it work?

If you pass a plain JavaScript object to a Vue.js instance as its data option, you will see that Vue.js makes this pass through all of its properties and convert them to getter/setters using Object.defineProperty.

This is an un-shimmable and an ES5-only feature. Because of this feature, Vue doesn't support IE8 and below versions.

The getter and setters are not visible to the user, but under the hood, they make Vue.js able to perform dependency-tracking and change-notification when you have to change or access the property. You can see the getter/setters properties changes on the browser's console. If you want to see them, you have to install vue-devtools for a more inspection-friendly interface.

Every component instance has a corresponding watcher instance. This is used to record the properties "touched" during the component's render as dependencies. After that, when a dependency's setter is triggered, it notifies the watcher, which re-render the component in turn.

Vue.js Reactive Interface

Vue.js provides us an option to add reactivity to the dynamically added properties. Suppose, we have already created Vue.js instance and we want to add the watch property. See the following example:

Example:

Index.html file:

<html>    
   <head>    
      <title>Vue.js Reactive Interface</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "reactivity_1">  
         <p style = "font-size:25px;">Counter: {{ counter }}</p>  
         <button @click = "counter++" style = "font-size:25px;">Click Here</button>  
      </div>   
      <script src="index.js"></script>    
   </body>    
</html>   

Index.js file:

var vm = new Vue({  
            el: '#reactivity_1',  
            data: {  
               counter: 1  
            }  
         });  
         vm.$watch('counter', function(nval, oval) {  
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');  
         });  
         setTimeout(  
            function(){  
               vm.counter = 10;  
            },1000  
         )  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

html, body {  
    margin: 5px;  
    padding: 0;  
}  

After the execution of the program, you will see the following output:

Output:

When you click on the "Click Here" button, the counter will be incremented. You will see a pop-up output or an alert message that shows the counter property's changed value.

See the following output after we have clicked on the "Click here" button.

Example Explanation

In the above example, we have defined a property counter that is set to 1 in the data object. When you click on the "Click Here" button, the counter will be incremented.

After creating the Vue.js instance, we have to add the watch property to it.Use the following code to add it:

vm.$watch('counter', function(nval, oval) {  
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');  
});   

We have used the $watch property to add watch outside the Vue instance. We have also added an alert used to show the value change for the counter property. A timer function is also added named setTimeout to set the counter value to 10.

setTimeout(  
   function(){  
      vm.counter = 10;  
   },1000  
);  

Whenever you click the button, the counter will be changed, and the alert from the watch method will get fired.

Add properties at Runtime.

It is the best way always to declare the properties, which need to be reactive upfront in the Vue.js instance because Vue.js cannot detect property addition and deletion.

If you want to add properties at run time, you have to make use of Vue global, Vue.set, and Vue.delete methods.

Vue.set

This is used to set a property on an object. This is used to overcome the limitation that Vue.js cannot detect property additions.

Syntax

Vue.set( target, key, value )

Here,

target: It can be an object or an array.

key: It can be a string or number.

value: It can be any type.

Let's take a simple example to understand the concept of Vue.set.

Example:

Index.html file:

<html>    
   <head>    
      <title>Vue.js Reactive Interface</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "reactivity_1">  
         <p style = "font-size:25px;">Counter value: {{ products.id }}</p>  
         <button @click = "products.id++" style = "font-size:25px;">Click Here</button>  
      </div>  
      <script src="index.js"></script>    
   </body>    
</html>    

Index.js file:

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};  
         var vm = new Vue({  
            el: '#reactivity_1',  
            data: {  
               counter: 1,  
               products: myproduct  
            }  
         });  
         vm.products.qty = "1";  
         console.log(vm);  
         vm.$watch('counter', function(nval, oval) {  
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');  
         })   

After the execution of the program, you will see the following output:

Output:

Here, you will see that the counter value will be increased every time when you click on the "Click Here" button. See the following output. Here, we have clicked button for 5 times.

Example Explanation

In the above example, we have created a variable named myproduct at the start using the following code:

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};

It is given to the data object in Vue.js instance as follows:

var vm = new Vue({  
            el: '#reactivity_1',  
            data: {  
               counter: 1,  
               products: myproduct  
            }  
         });  

Suppose, you have to add one more property to the myproduct array, after the Vue.js instance is created. You can do this by using the following code:

vm.products.qty = "1";

If you see the output on the console, you will find that in products list, the quantity will be added. The get/set methods, which basically add reactivity, are available for the id, name, and price, and not available for the qty.

So, you can see that the reactivity cannot be achieved by just adding the vue object. In Vue.js, you have to create its all properties at the start. If you want to do it later, we can use Vue.set. See an other example where all the properties are added later.

Example:

Index.html file:

<html>    
   <head>    
      <title>Vue.js Reactive Interface</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "reactivity_1">  
         <p style = "font-size:25px;">Counter value: {{ products.id }}</p>  
         <button @click = "products.id++" style = "font-size:25px;">Click Here</button>  
      </div>  
      <script src="index.js"></script>    
   </body>    
</html>   

Index.js file:

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};  
         var vm = new Vue({  
            el: '#reactivity_1',  
            data: {  
               counter: 1,  
               products: myproduct  
            }  
         });  
         Vue.set(myproduct, 'qty', 1);  
         console.log(vm);  
         vm.$watch('counter', function(nval, oval) {  
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');  
         })  

In the above example, we have used Vue.set to add the qty to the array using the following code:

Vue.set(myproduct, 'qty', 1);

If you run this example on the console, you will see that the get/set for qty is added using Vue.set method.

Vue.delete

The Vue.delete function is used to delete the property dynamically. This is also used to overcome the limitation that Vue.js cannot detect property deletion.

Syntax:

Vue.delete( target, key )

Here,

target: It is used to specify an object or an array.

key: It is used to specify a string or a number.

Let's see an example to demonstrate how to delete any property dynamically in Vue.js using Vue.delete function.

Example

Index.html file:

<html>    
   <head>    
      <title>Vue.js Reactive Interface</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "reactivity_1">  
         <p style = "font-size:25px;">Counter value: {{ products.id }}</p>  
         <button @click = "products.id++" style = "font-size:25px;">Click Here</button>  
      </div>  
      <script src="index.js"></script>    
   </body>    
</html>    

Index.js file:

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};  
         var vm = new Vue({  
            el: '#reactivity_1',  
            data: {  
               counter: 1,  
               products: myproduct  
            }  
         });  
          Vue.delete(myproduct, 'price');  
         console.log(vm);  
         vm.$watch('counter', function(nval, oval) {  
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');  
         })    

In the above example, we have used the Vue.delete function to delete the price from the array by using the following code:

Vue.delete(myproduct, 'price');

When you see the output of the above example on the console, you will see that only the id and name are visible on the console as the price is deleted. We will also notice that the get/set methods are deleted.

Source by : javatpoint.com

Vue.js Render functions

Programing Coderfunda February 09, 2021 Vue.js Tutorial No comments

Vue.js Render functions

Vue.js recommends us to use templates to build HTML. Here, we can use the render function as a closer-to-the-compiler alternative to templates.

Vue.js render functions are also used along with Vue.js components. Most of the time, the render function is created by the Vue.js compiler. When you specify a template on your component, this template's content is processed by the Vue.js compiler that will return a render function. The render function essentially returns a virtual DOM node, which will be rendered by Vue.js in your browser DOM.

What is the virtual Document Object Model or "DOM"?

The virtual DOM allows Vue.js to render your component in its memory before updating your browser. This makes everything faster because it has to do only a few interactions with the browser. When Vue.js updates the browser DOM, it compares the updated virtual DOM to the previous one and updates the real DOM with the modified parts. That's how it enhances performance.

Let's take an example of a simple component and see what the render function puts the effect when we use it within the example.

Index.html file:

<html>    
   <head>    
      <title>Vue.js Component</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "component_test">    
         <testcomponent></testcomponent>    
      </div>    
      <script src="index.js"></script>    
   </body>    
</html>    

Index.js file:

Vue.component('testcomponent',{    
   template : '<h1>Hello Students!</h1>'    
});    
var vm = new Vue({    
   el: '#component_test'    
})  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

html, body {  
    margin: 5px;  
    padding: 0;  
}  

After the execution of the program, you will see the following output:

Output:

Here, you can see that the component shows the above result as Hello Students. Now, if you reuse the component repeatedly, you will see that the result would be printed again and again. For example,

<div id = "component_test">  
   <testcomponent></testcomponent>  
   <testcomponent></testcomponent>  
   <testcomponent></testcomponent>  
   <testcomponent></testcomponent>  
   <testcomponent></testcomponent>  
</div>   

Output:

Suppose, you don't want the same text to be printed again and again so, what will you do? Let's make some changes and type something inside the component as follows:

Index.html file:

<html>    
   <head>    
      <title>Vue.js Component</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "component_test">    
   <testcomponent>Hello Rahul!</testcomponent>  
   <testcomponent>Hello James!</testcomponent>  
   <testcomponent>Hello Alex!</testcomponent>  
   <testcomponent>Hello Priti!</testcomponent>  
   <testcomponent>Hello Mohan!</testcomponent>  
      </div>    
      <script src="index.js"></script>    
   </body>    
</html>    

Index.js file will be same as above.

After the execution of the program, you will see the following output:

Output:

You can see that the output remains the same as earlier. It does not change the text as we want.

Use of Slot

Now, we will use slots that are provided by components to get the desired result.

Syntax:

template : '<h1><slot></slot></h1>',  

See the following example:

Index.html file:

<html>    
   <head>    
      <title>Vue.js Component</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "component_test">    
   <testcomponent>Hello Rahul!</testcomponent>  
   <testcomponent>Hello James!</testcomponent>  
   <testcomponent>Hello Alex!</testcomponent>  
   <testcomponent>Hello Priti!</testcomponent>  
   <testcomponent>Hello Mohan!</testcomponent>  
      </div>    
      <script src="index.js"></script>    
   </body>    
</html>    

Index.js file:

Vue.component('testcomponent',{    
    template : '<h1><slot></slot></h1>',    
});    
var vm = new Vue({    
   el: '#component_test'    
})  

After the execution of the program, you will see the following output:

Output:

How to use render Function?

Suppose, you have to change the color and size of the results in output for example, we were using h1 tag in our previous examples and we want to change the HTML tag to p tag or div tag or any other tag for the same component. We have all the flexibility to do the changes by using the render function. Render function helps make the component dynamic and use the way it is required by keeping it common and helping pass arguments using the same component.

Let's see an example to demonstrate the use of render function:

Index.html file:

<html>    
   <head>    
      <title>Vue.js Component</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id = "component_test">    
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>  
   <testcomponent :elementtype = "'h2,brown,25,div1'">Hello James!</testcomponent>  
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Alex!</testcomponent>  
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Priti!</testcomponent>  
   <testcomponent :elementtype = "'h4,blue,25,ptag'">Hello Mohan!</testcomponent>  
      </div>    
      <script src="index.js"></script>    
   </body>    
</html>    

Index.js file:

Vue.component('testcomponent',{    
    render :function(createElement){  
               var a = this.elementtype.split(",");  
               return createElement(a[0],{  
                  attrs:{  
                     id:a[3],  
                     style:"color:"+a[1]+";font-size:"+a[2]+";"  
                  }  
               },  
               this.$slots.default  
               )  
            },  
            props:{  
               elementtype:{  
                  attributes:String,  
                  required:true  
               }  
            }  
         });  
         var vm = new Vue({  
            el: '#component_test'  
         })  

After the execution of the program, you will see the following output:

Output:

Example Explanation

In the above example, you can see that we have changed the component and added the render function with props property using the following code in the Index.js file:

Vue.component('testcomponent',{    
    render :function(createElement){  
               var a = this.elementtype.split(",");  
               return createElement(a[0],{  
                  attrs:{  
                     id:a[3],  
                     style:"color:"+a[1]+";font-size:"+a[2]+";"  
                  }  
               },  
               this.$slots.default  
               )  
            },  
            props:{  
               elementtype:{  
                  attributes:String,  
                  required:true  
               }  
            }  
         });  

Here, the props property looks like the following code:

props:{  
               elementtype:{  
                  attributes:String,  
                  required:true  
               }  
            }  
         });  

When we use components with render functions, they do not have a template tag or property. Instead of them, they define a function called render that receives a createElement in the following structure:

Syntax:

(renderElement: String | Component, definition: Object, children: String | Array) argument   

You can see it in the example as follows:

render :function(createElement){  
               var a = this.elementtype.split(",");  
               return createElement(a[0],{  
                  attrs:{  
                     id:a[3],  
                     style:"color:"+a[1]+";font-size:"+a[2]+";"  
                  }  

We have also defined a property named elementtype, which takes attributes field of type string. In another required field, we have mentioned that the field is mandatory.

See the render function code where we have used the elementtype property as follows:

render :function(createElement){  
               var a = this.elementtype.split(",");  
               return createElement(a[0],{  
                  attrs:{  
                     id:a[3],  
                     style:"color:"+a[1]+";font-size:"+a[2]+";"  
                  }  
               },  
               this.$slots.default  
               )  
            },  

The render function gets createElement as the argument and returns the same. The CreateElement creates the DOM element in the same way as it does in JavaScript. We have also split the elementtype on comma, using the values in the attrs field.

CreateElement takes the first param as the elementtag to be created. It is passed to the component as follows:

<testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>   

The component accepts the props field as the above code. It starts with the symbol : and after that the name of the props is specified. After specifying the prop's name, we have to pass the element tag, color, fontsize, and the id of the element.

In the render function, you can see that the first element is the elementtag in createElement field which is given to the createElemet as follows:

return createElement(a[0],{  
                  attrs:{  
                     id:a[3],  
                     style:"color:"+a[1]+";font-size:"+a[2]+";"  
                  }  
               },  
               this.$slots.default  
               )  
            },  

In the above code, the a[0] is the html element tag. The next parameters are the attributes for the element tag. They are defined in the attr field as follows:

attrs:{  
                     id:a[3],  
                     style:"color:"+a[1]+";font-size:"+a[2]+";"  
                  }  
               },  

Here, we have defined two attributes for the element tag: id tag and style tag.

In the id tag, we have passed a[3], which is the value we have after splitting on comma.
In the style tag, we have passed a[1] and a[2] respectively to define color and fontsize.

The message we have given in component is specified as follows:

<testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>  

The slots field is used to define the text that we want to print in the createElement using the following code:

this.$slots.default

After the execution of the program when you see the output, you will see that all the output entries are displayed in a specific way. This is because of the elements f the component structure we have defined in a specific way.

<div id = "component_test">    
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>  
   <testcomponent :elementtype = "'h2,brown,25,div1'">Hello James!</testcomponent>  
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Alex!</testcomponent>  
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Priti!</testcomponent>  
   <testcomponent :elementtype = "'h4,blue,25,ptag'">Hello Mohan!</testcomponent>  
      </div>  

Event binding in Vue.js render functions

Let's see an example to demonstrate event binding in Vue.js render function. See the following example:

Example

Index.html file:

<html>    
   <head>    
      <title>Vue.js Event binding in render function</title>    
      <link rel="stylesheet" href="index.css">    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    </head>    
    <body>    
      <div id="render_1"></div>  
      <script src="index.js"></script>    
   </body>    
</html>  

Index.js file:

new Vue({  
  el: '#render_1',  
  data() {  
    return {  
      clickCount: 0,  
    }  
  },  
  methods: {  
    onClick() {  
      this.clickCount += 1;  
    }  
  },  
  render(createElement) {  
    const button = createElement('button', {  
      on: {  
        click: this.onClick  
      }  
    }, 'Click me');  
    const counter = createElement('span', [  
      'Number of clicks:',  
      this.clickCount  
    ]);  
    return createElement('div', [  
      button, counter  
    ])  
  }  
});  

After the execution of the program, you will see the following output:

Output:

When you click on the "Click me" button, you will see that the number of clicks has been displayed as how many times you have clicked on the button. See the output:

In the above example, the button is clicked four times.

Source by : javatpoint.com

Vue.js Tutorial

Programing Coderfunda February 09, 2021 Vue.js Tutorial No comments

Vue.js Tutorial

Vue.js Tutorial
Vue.js Tutorial open link
Vue.js Installation
Vue.js Getting started
Declarative Rendering
Conditions & Loops
Vue.js Instances
Vue.js Template
Vue.js Components
Computed Properties
Vue.js Watch Property
Vue.js Event Handling
Data Binding
Vue.js Data Binding
Form Input Bindings
Transition & Animation
Transition & Animation

Vue.js Animation
Explicit Transition
Vue.js Custom Directives
Vue.js Routing
Vue.js Mixins
Vue.js Render functions
Vue.js Reactivity System

09 February, 2021

Vue.js Routing

Download from CDM directly

Install router using NPM

Install router using GitHub

Example

Example Explanation

Pass Props to Router Link

The to prop

The replace prop

The append prop

The append prop

The tag prop

The active-class prop

The exact-active-class prop

The event prop

Vue.js Reactivity System

How does it work?

Vue.js Reactive Interface

Example Explanation

Add properties at Runtime.

Vue.set

Example Explanation

Vue.delete

Vue.js Render functions

What is the virtual Document Object Model or "DOM"?

Use of Slot

How to use render Function?

Example Explanation

Event binding in Vue.js render functions

Vue.js Tutorial

Transition & Animation

Meta

Popular Posts

Categories

Social Media Links

Pages

Blog Archive

Data Publish News

Al Jazeera – Breaking News, World News and Video from Al Jazeera

Laravel News