04 February, 2021

Vue.js Routing

                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.

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

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

  1. <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.

  1. npm  install vue-router  

Vue.js Routing

Install router using GitHub

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

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

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

Example

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12.          <p>  
  13. <!-- use router-link component for navigation. -->  
  14. <!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
  15.             <router-link to = "/route1">Click on Router Link 1</router-link>  
  16.             <router-link to = "/route2"> Click on Router Link 2</router-link>  
  17.          </p>  
  18.          <!-- route outlet -->  
  19.          <!-- component matched by the route will render here -->  
  20.          <router-view></router-view>  
  21.       </div>  
  22.       <script type = "text/javascript">  
  23.          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>' }  
  24.          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>' }  
  25.          const routes = [  
  26.             { path: '/route1', component: Route1 },  
  27.             { path: '/route2', component: Route2 }  
  28.          ];  
  29.          const router = new VueRouter({  
  30.             routes // short for `routes: routes`  
  31.          });  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#router_1',  
  3.             router  
  4.          })  

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

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

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

Output:

Vue.js Routing

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

Vue.js Routing

Example Explanation

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

  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  2.  <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:

  1. <router-link to = "/route1">Click on Router Link 1</router-link>  
  2.  <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:

  1. 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>' }  
  2.          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.

  1. const routes = [  
  2.    { path: '/route1', component: Route1 },  
  3.    { path: '/route2', component: Route2 }  
  4. ];  

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,

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

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

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

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.

  1. var vm = new Vue({  
  2.             el: '#router_1',  
  3.             router  
  4.          })  

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:

  1. <router-link to = "/route1">Click on Router Link 1</router-link>  
  2. <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:

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

Example 2:

  1. <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:

  1. <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:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12.          <p>  
  13. <!-- use router-link component for navigation. -->  
  14. <!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
  15.             <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
  16.             <router-link v-bind:to = "{path:'/route3', query: { name: 'Alex' }}">Click on Router Link 3</router-link>  
  17.          </p>  
  18.          <!-- route outlet -->  
  19.          <!-- component matched by the route will render here -->  
  20.          <router-view></router-view>  
  21.       </div>  
  22.       <script type = "text/javascript">  
  23.          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>' }  
  24.          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>' }  
  25.          const routes = [  
  26.             { path: '/route2', component: Route2 },  
  27.             { path: '/route3', component: Route3 }  
  28.          ];  
  29.          const router = new VueRouter({  
  30.             routes // short for `routes: routes`  
  31.          });  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#router_1',  
  3.             router  
  4.          })  

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

Output:

Vue.js Routing

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

Vue.js Routing

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:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12.          <p>  
  13. <!-- use router-link component for navigation. -->  
  14. <!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
  15.             <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
  16.             <router-link v-bind:to = "{path:'/route3', query: { name: 'Panda' }}"   replace>This link is Replaced</router-link>  
  17.          </p>  
  18.          <!-- route outlet -->  
  19.          <!-- component matched by the route will render here -->  
  20.          <router-view></router-view>  
  21.       </div>  
  22.       <script type = "text/javascript">  
  23.          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>' }  
  24.          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>' }  
  25.          const routes = [  
  26.             { path: '/route2', component: Route2 },  
  27.             { path: '/route3', component: Route3 }  
  28.          ];  
  29.          const router = new VueRouter({  
  30.             routes // short for `routes: routes`  
  31.          });  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file will be same.

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

Output:

Vue.js Routing

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:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12.          <p>  
  13. <!-- use router-link component for navigation. -->  
  14. <!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
  15.             <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
  16.             <router-link v-bind:to = "{ path: '/route3'}" append>This is an appended link</router-link>  
  17.          </p>  
  18.          <!-- route outlet -->  
  19.          <!-- component matched by the route will render here -->  
  20.          <router-view></router-view>  
  21.       </div>  
  22.       <script type = "text/javascript">  
  23.          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>' }  
  24.          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>' }  
  25.          const routes = [  
  26.             { path: '/route2', component: Route2 },  
  27.             { path: '/route3', component: Route3 }  
  28.          ];  
  29.          const router = new VueRouter({  
  30.             routes // short for `routes: routes`  
  31.          });  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#router_1',  
  3.             router  
  4.          })  

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

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

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

Output:

Vue.js Routing

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:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12.          <p>  
  13. <!-- use router-link component for navigation. -->  
  14. <!-- `<router-link>` will be rendered as an `<a>` tag by default -->  
  15.             <router-link v-bind:to = "{path:'/route2'}">Click on Router Link 2</router-link>   
  16.             <router-link v-bind:to = "{ path: '/route3'}" append>This is an appended link</router-link>  
  17.          </p>  
  18.          <!-- route outlet -->  
  19.          <!-- component matched by the route will render here -->  
  20.          <router-view></router-view>  
  21.       </div>  
  22.       <script type = "text/javascript">  
  23.          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>' }  
  24.          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>' }  
  25.          const routes = [  
  26.             { path: '/route2', component: Route2 },  
  27.             { path: '/route3', component: Route3 }  
  28.          ];  
  29.          const router = new VueRouter({  
  30.             routes // short for `routes: routes`  
  31.          });  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#router_1',  
  3.             router  
  4.          })  

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

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

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

Output:

Vue.js Routing

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:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12.          <p>  
  13.              <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Click on Router Link 2</router-link>   
  14.             <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
  15.          </p>  
  16.          <!-- route outlet -->  
  17.          <!-- component matched by the route will render here -->  
  18.          <router-view></router-view>  
  19.       </div>  
  20.       <script type = "text/javascript">  
  21.          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>' }  
  22.          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>' }  
  23.          const routes = [  
  24.             { path: '/route2', component: Route2 },  
  25.             { path: '/route3', component: Route3 }  
  26.          ];  
  27.          const router = new VueRouter({  
  28.             routes // short for `routes: routes`  
  29.          });  
  30.       </script>  
  31.       <script src="index.js"></script>  
  32.    </body>  
  33. </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:

Vue.js Routing

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.

Vue.js Routing

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:

  1. <style>  
  2.    ._active{  
  3.       background-color : red;  
  4.    }  
  5. </style>  
  6. <p>  
  7. <router-link v-bind:to = "{ path: '/route2'}" active-class = "._active">Click on Router Link 2</router-link>  
  8. <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
  9. </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:

  1. <style>  
  2.    ._active{  
  3.       background-color : red;  
  4.    }  
  5. </style>  
  6. <p>  
  7. <router-link v-bind:to = "{ path: '/route2'}" exact-active-class = "._active">Click on Router Link 2</router-link>  
  8. <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
  9. </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:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Routing</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  7.  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  8.     </head>  
  9.     <body>  
  10.       <div id = "router_1">  
  11.          <h2>This is Routing Example</h2>  
  12. <style>  
  13.    ._active{  
  14.       background-color : red;  
  15.    }  
  16. </style>  
  17. <p>  
  18. <router-link v-bind:to = "{ path: '/route2'}" event = "mouseover">Hover this link</router-link>  
  19.             <router-link v-bind:to = "{ path: '/route3'}" tag = "span">Click on Router Link 3</router-link>  
  20.          </p>  
  21.          <!-- route outlet -->  
  22.          <!-- component matched by the route will render here -->  
  23.          <router-view></router-view>  
  24.       </div>  
  25.       <script type = "text/javascript">  
  26.          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>' }  
  27.          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>' }  
  28.          const routes = [  
  29.             { path: '/route2', component: Route2 },  
  30.             { path: '/route3', component: Route3 }  
  31.          ];  
  32.          const router = new VueRouter({  
  33.             routes // short for `routes: routes`  
  34.          });  
  35.       </script>  
  36.       <script src="index.js"></script>  
  37.    </body>  
  38. </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:

Vue.js Routing

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

Sources by : javatpoint

Vue.js Custom Directives

                No comments   

Vue.js Custom Directives

Vue.js directives are used in Vue.js applications to make them reusable and straightforward. Directives are just like instructions that can be used in Vue.js applications to do things in a specific way. We have already used simple conditional directives such as v-if, v-show, v-else, v-for, v-bind, v-model, v-on, etc. in our https://coderfunda.blogspot.com/ page.

Here, we will learn how to create custom and global directives and use them just like we did in Vue. js components https://coderfunda.blogspot.com/ because Vue.js allows us to create our own custom directives.

Syntax:

Example Explanation

In the above example, you can see that we have created a custom directive named "changestyle" as following:

  1. Vue.directive("changestyle",{  
  2.    bind(e1,binding, vnode) {  
  3.       console.log(e1);  
  4.       e1.style.color = "red";  
  5.       e1.style.fontSize = "20px";  
  6.    }  
  7. });  

Now, the custom directive "changestyle" is assigned to a div as follows:

  1. <div v-changestyle>Vue.js Custom Directive Example</div>  

How to pass a value to the custom directive?

We can pass values to the custom directive by binding values to them. Binding is like arguments passed to the custom directive.

Syntax:

  1. v-changestyle = "{color:'the_color_name'}".   

Let's take an example to demonstrate how to pass a value to the custom directive.

Index.html:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Custom Directive</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "directive">  
  9.           <div v-changestyle = "{color:'green'}">Passing value to custom directive example</div>  
  10.       </div>  
  11.       <script type = "text/javascript">  
  12.          Vue.directive("changestyle",{  
  13.             bind(e1,binding, vnode) {  
  14.                console.log(e1);  
  15.                console.log(binding.value.color);  
  16.                console.log(vnode);  
  17.                e1.style.color=binding.value.color;  
  18.                e1.style.fontSize = "20px";  
  19.             }  
  20.          });  
  21.       </script>  
  22.       <script src="index.js"></script>  
  23.    </body>  
  24. </html>  

Index.js:

  1. var vm = new Vue({  
  2.             el: '#directive',  
  3.             data: {  
  4.             },  
  5.             methods : {  
  6.             },  
  7.          })  

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

Output:

Vue.js Custom Directives

You can see that the value is passed in the directive and the color of the text is changed to green. The value is passed by using the following code:

  1. <div v-changestyle = "{color:'green'}">Passing value to custom directive example</div>   

It is accessed by using the following code:

  1. Vue.directive("changestyle",{  
  2.    bind(e1,binding, vnode) {  
  3.       console.log(e1);  
  4.       console.log(binding.value.color);  
  5.       console.log(vnode);  
  6.       e1.style.color=binding.value.color;  
  7.       e1.style.fontSize = "20px";  
  8.    }  
  9. });  

Using Filters with Custom Directives

Vue.js supports filters that can be used in text formatting. The filters are generally used along with v-bind and interpolations ({{}}). We require using a pipe symbol at the end of JavaScript expression for filters.

Let's see an example to demonstrate the use of filters in the custom directive.

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Custom Directive</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "directive">  
  9.                   <input  v-model = "name" placeholder = "Enter Your Name" /><br/>  
  10.          <span style = "font-size:20px;"><b>Letter count is : {{name | countletters}}</b></span>  
  11.       </div>  
  12.       </script>  
  13.       <script src="index.js"></script>  
  14.    </body>  
  15. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#directive',  
  3.            data: {  
  4.                name : ""  
  5.             },  
  6.             filters : {  
  7.                countletters : function(value) {  
  8.                   return value.length;  
  9.                }  
  10.             }  
  11.          })  

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

Output:

Vue.js Custom Directives

When you type any text in the above box, you can get the letter count as follows:

Vue.js Custom Directives

Example Explanation

In the above example, you can see that we have created a simple filter named "countletters". The countletters filter counts the numbers of characters entered in the textbox. We have to use the filter property and define the used filter as follows:

  1. filters : {  
  2.    countletters : function(value) {  
  3.       return value.length;  
  4.    }  
  5. }  

Here, we have defined the method countletters and then returned the length of the entered string.

Now, we have used the pipe operator and the name of the filter "countletters" to display the filter's result in output:

  1. <span style = "font-size:20px;"><b>Letter count is : {{name | countletters}}</b></span> 

 

 
 
  1. Vue.directive('name_of_the_directive', {  
  2.    bind(e1, binding, vnode) {  
  3.    }  
  4. })   

To create a custom directive, we have to use Vue.directive and the name of the directive, as shown in the above syntax. Let us see an example to demonstrate how to create a custom directive and how to use it.

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Custom Directive</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "directive">  
  9.           <div v-changestyle>Vue.js Custom Directive Example</div>  
  10.       </div>  
  11.        <script type = "text/javascript">  
  12.          Vue.directive("changestyle",{  
  13.             bind(e1,binding, vnode) {  
  14.                console.log(e1);  
  15.                e1.style.color = "red";  
  16.                e1.style.fontSize = "20px";  
  17.             }  
  18.          });  
  19.          var vm = new Vue({  
  20.             el: '#directive',  
  21.             data: {  
  22.             },  
  23.             methods : {  
  24.             },  
  25.          });  
  26.       </script>  
  27.       <script src="index.js"></script>  
  28.    </body>  
  29. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#directive',  
  3.             data: {  
  4.             },  
  5.             methods : {  
  6.             },  
  7.          })  

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

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

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

Source : javatpoint

Meta

Popular Posts

  • Laravel - Configuration
    In the previous chapter, we have seen that the basic configuration files of Laravel are included in the  config  directory. In this chapte...
  • Laravel - Namespaces
    Namespaces are used in various programming languages to create a separate group of variable, functions and classes. A program may contain ...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...
  • HTML Introduction
    Introduction to Hypertext Markup Language (HTML) A way to present HTML information in a beautiful and attractive way in the World Wide ...
  • Tutorials of Laravel Overview
    Introduction Laravel is an open-source PHP framework, which is robust and easy to understand. It follows a model-view-controller design ...

Categories

Social Media Links

Blog Archive

Laravel News

Loading...