On this article, we’ll see the way to substitute jQuery with Vue.
jQuery: jQuery is a quick and wealthy JavaScript library. It’s an utility programming interface (API), a cross-platform JavaScript library designed to enhance net browser options. It makes issues simpler like works throughout HTML doc traversal and manipulation, occasion dealing with, and so forth.
Vue: Vue is an open-source front-end JavaScript framework for constructing person interfaces and single-page functions. it makes use of a Mannequin View View-Mannequin (MVVM) sample. It’s okay to make use of jQuery if it fits the appliance, However Vue can also be a Versatile framework for Internet functions that work as reusable elements with abstraction.
Distinction between jQuery and Vue.
The strategy of jQuery implementation:
jQuery is use prepared() perform to attach with HTML components via Doc Object Mannequin (DOM). DOM is a tree construction of HTML components. First, must provoke the DOM after which join HTML components via javascript objects for manipulating Person Interface
Syntax:
jQuery codes want to jot down and wrapped contained in the prepared perform as proven beneath. Now we have to attach HTML components inside $(doc).prepared() perform for rendering knowledge objects dynamically. $(doc).prepared() perform will provoke the DOM to a prepared state for loading the online web page.
$(doc).prepared(perform() {
// initiated the DOM utilizing prepared perform
// add Jquery codes right here
});
Create an empty HTML aspect <h1> for displaying Header Textual content for the online web page and save the filename as index.html with the beneath format.
<html>
<physique>
<h1></h1>
</physique>
<script src="https://www.geeksforgeeks.org/how-to-replace-jquery-with-vue-js/app.js"></script>
</html>
Now create an app.js file and add beneath $(doc).prepared() perform for bind the textual content contained in the jQuery block { }, use <h1> aspect by $ image. once we open the online web page jQuery will detect the prepared() perform for rendering the header textual content within the DOM. jQuery will show the header textual content on the net web page when it’s loaded.
$(doc).prepared(perform() {
$('h1').textual content('Geeks For Geeks');
});
Instance: First, embody the CDN file contained in the script tag for the jQuery library. Within the beneath instance, Now we have a button that can present an alert message when it’s clicked. a Pattern textual content will seem in <h3> aspect after the alert message. Within the javascript file create a perform for mouse occasion that helps jQuery work together with HTML components rendering dynamically.
HTML
|
|
Javascript
|
|
Output:
Now changing jQuery with Vue elements for the above instance.
The strategy of Vue implementation:
Embrace the CDN file contained in the <script> tag for the Vue.js library. Vue creates knowledge binding between properties within the DOM and in JavaScript, knowledge, and strategies are routinely synchronized with one another. Vue routinely detects JavaScript state adjustments and effectively updates the DOM when adjustments occur. Vue binds the info objects utilizing Vue() Constructor, it initiated the DOM (Doc Object Mannequin) for prepared state and retains the HTML components for dynamic manipulation. It supplies a Part primarily based knowledge mannequin that helps to work throughout HTML doc traversal and manipulation, occasion dealing with, and so forth.
Syntax:
var firstApp = new Vue({
/* provoke knowledge mannequin right here */
})
Create an HTML aspect <h1> for displaying Header Textual content for the online web page Inside <h1> aspect bind the textual content interpolation utilizing double curly braces for knowledge binding and save the filename as index.html with the beneath format.
<html>
<physique>
<h1 id='header'>{{sampleText}}</h1>
</physique>
<script src="https://www.geeksforgeeks.org/how-to-replace-jquery-with-vue-js/app.js"></script>
</html>
Now create an app.js file for Vue elements initiated by the Vue constructor. Vue creates an information mannequin to work together with the DOM construction. Every Vue situations have its personal el and knowledge particular instances.
- el: it’s used for binding HTML components.
- knowledge: it’s used for binding the javascript objects
- strategies: it’s used for javascript capabilities. (if required)
Syntax:
var firstApp = new Vue({
el:'#header',
knowledge: {
sampleText: 'Geeks For Geeks'
}
methodology: {}
});
#header is an ID selector of <div> aspect in DOM construction, it binds the HTML Factor related to the particular case (el) in Vue Part. Javascript objects related to the info mannequin(knowledge). the info mannequin will render the sampleText in DOM utilizing aspect(el) when the online web page is loaded.
Instance: Within the beneath instance, Now we have a button in html file and it’ll present an alert message when it’s clicked. then pattern textual content will seem after the alert message is proven. Create a javascript file app.js, and create a Vue element named as firstApp utilizing Vue() constructor. This element will maintain the info and strategies collectively to work together with DOM. use ID selector of <div> aspect inside el, it binds the firstApp element with HTML components below the <div> root aspect. Within the jQuery strategy once we click on the button, it makes use of a component or selector to search out and Replace the textual content within the DOM. In Vue strategy internal textual content will replace utilizing render variable {{sampleText}} contained in the <h3> aspect when the button is clicked. We are able to add Vue.js directives contained in the Doc Object Mannequin construction(DOM), which helps to work together DOM with Vue elements simply.
the next Vue.js directives assist to bind the info objects with DOM.
- v-bind: The v-bind directive is a Vuejs directive used to bind a number of attributes or a element prop to a component.
- v-on: The v-on:click on directive is a Vue.js directive used so as to add a click on occasion listener to a component.
Filename: index.html
HTML
|
|
Filename: app.js
Javascript
|
|
Output:
