Found 217 Articles for Javascript Library

While hovering over a div or an element sometimes we require to display some information. This information or data is displayed while hovering over it with the mouse. Therefore, to display this data, we basically use the JS function @mouseover to display data. In the above specific case, we will make the mouseover function which will return data on hover. Please look at the below example for more clarification. Syntax Following is the syntax to call a function with mouse hover in Vue.js − mouseOver: function(){ this.active = !this.active; } Here mouseOver ... Read More

The value for v-bind:style is just a plain JavaScript object that works upon some rules for binding the content. The value of the background image should be a string. So we can apply or data-bind the background image in Vue.js using the style tag and then defining the backgroundImage URL in it. It will automatically retrieve the url from the string and then display the same data content on the browser webpage. To access the background image, make a div element and define the background image in it with url. The url will be retrieved from the JS file. Example ... Read More

The v-bind directive in VueJS can be used for binding one or more attributes, or a component prop to an element. If the attribute is bonded towards our data that is defined in the Vue instance, then we can observe these data changes dynamically since the attributes are binded. To apply the v-bind directive, we will first create a div element with id ‘app’. Once the div element is created, we can apply the v-on: click.middle directive to the element. Syntax We can use the following syntax to bind attributes in Vue.js − v-bind:attribute = "expression" Here "expression" ... Read More

Vue can be defined as a progressive framework for building the user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and is also easy to pick up other libraries or integrate with them. The vue components provides the filter functionality to filter out the requests and response that lets the user to apply different formatting and transformations to the template dynamic data. Filters are used in two places : mustache interpolation and v-bind expressions. Functions are appended in the end of ... Read More

In a Vue.js application there may be data or utilities that are used in many components, but you don’t want to change its scope and keep its value same for all the components. These types of variables are called the global variables. In such cases, the user can use the following syntax for defining the prototype − Vue.prototype.$appName = 'My App' Now this $appName will be available on all the Vue instances, even before creation. The $ defined before the appName is the convention used for properties that are available to all the instances. The user can also ... Read More

The javascript attribute names are case insensitive, so browsers are made in a way to interpret any uppercase characters to lowercase. This means, while using the DOM elements, camel Cased props names need to use their kebab-based (hyphen-delimited) equivalents. So let’s say that you are not sure of the type of value you might receive from the props in Vue.js. Usually, you will want every prop to have a specific type of value. But in a case when you want a prop to have a list of value types, you can use the following syntax to apply the same. props: ... Read More

Vue can be defined as a progressive framework for building user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and is also easy to pick up other libraries or integrate with them. In the below article, we will see how to add elements to an array. An array is basically a collection of elements. This process of adding elements into an Array can be used in real life in different scenarios. For E.g.: It can be used for creating a shopping ... Read More

Let’s say you have two nested components i.e. a component inside another component. How will you be able to access the child methods from the parent? To access the child method from the parent method you could use ref. Or you can also access the descendants of a parent via the method this.$root (a parent component) which can access the child components using the this.$children array. In the same way, the child can access its parent via the this.$parent. The vue.js basically warns against these for the below two reasons − It tightly couples the parent to the ... Read More

The difference between a computed property and a method is that computed properties are cached, these properties only change when their dependency change. A method will be evaluated every time it is being called. The only useful situation is when the user wants the getter and needs to have the same parameterized. The same situation occurs in vuex also. Example Copy and paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window. FileName - app.js Directory Structure -- $project/public -- app.js ... Read More

Whenever we insert an image in the front end of any system, it is very important to show the user proper data and images to enhance the user experience. In any project, an image is basically loaded from the remote path URL or from the application. An image may not be loaded properly in the below scenarios − Configuring the wrong image URL Poor Internet/Network connection It is very important to check if an image is loaded or not, because if an image does not load due to poor network connection we can try loading the image ... Read More