How to replace jQuery with Vue.js ?
Last Updated :
06 Feb, 2023
In this article, we will see how to replace jQuery with Vue.
jQuery: jQuery is a fast and rich JavaScript library. It is an application programming interface (API), a cross-platform JavaScript library designed to improve web browser features. It makes things easier like works across HTML document traversal and manipulation, event handling, etc.
Vue: Vue is an open-source front-end JavaScript framework for building user interfaces and single-page applications. it uses a Model View View-Model (MVVM) pattern. It’s ok to use jQuery if it suits the application, But Vue is also a Flexible framework for Web applications that work as reusable components with abstraction.
Difference between jQuery and Vue.
The approach of jQuery implementation:
jQuery is use ready() function to connect with HTML elements through Document Object Model (DOM). DOM is a tree structure of HTML elements. First, need to initiate the DOM and then connect HTML elements through javascript objects for manipulating User Interface
Syntax:
jQuery codes need to write and wrapped inside the ready function as shown below. We have to connect HTML elements inside $(document).ready() function for rendering data objects dynamically. $(document).ready() function will initiate the DOM to a ready state for loading the web page.
$(document).ready(function() {
// initiated the DOM using ready function
// add Jquery codes here
});
Create an empty HTML element <h1> for displaying Header Text for the web page and save the filename as index.html with the below format.
<html>
<body>
<h1></h1>
</body>
<script src='app.js'></script>
</html>
Now create an app.js file and add below $(document).ready() function for bind the text inside the jQuery block { }, use <h1> element by $ symbol. when we open the web page jQuery will detect the ready() function for rendering the header text in the DOM. jQuery will display the header text on the web page when it’s loaded.
$(document).ready(function() {
$('h1').text('Geeks For Geeks');
});
Example: First, include the CDN file inside the script tag for the jQuery library. In the below example, We have a button that will show an alert message when it’s clicked. a Sample text will appear in <h3> element after the alert message. In the javascript file create a function for mouse event that helps jQuery interact with HTML elements rendering dynamically.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Jquery Example</title>
<script src=
<style>
#header {
color: green;
}
</style>
</head>
<body>
<h1 id="header">Geeks For Geeks</h1>
<button id="firstBtn">Welcome</button>
<h3></h3>
<script src='app.js'></script>
</body>
</html>
|
Javascript
$(document).ready(function () {
$('#firstBtn').click(function () {
alert('Welcome Geeks For Geeks');
$('h3').text('This code is working with jquery');
});
});
|
Output:
Now replacing jQuery with Vue components for the above example.
The approach of Vue implementation:
Include the CDN file inside the <script> tag for the Vue.js library. Vue creates data binding between properties in the DOM and in JavaScript, data, and methods are automatically synchronized with each other. Vue automatically detects JavaScript state changes and efficiently updates the DOM when changes happen. Vue binds the data objects using Vue() Constructor, it initiated the DOM (Document Object Model) for ready state and keeps the HTML elements for dynamic manipulation. It provides a Component based data model that helps to work across HTML document traversal and manipulation, event handling, etc.
Syntax:
var firstApp = new Vue({
/* initiate data model here */
})
Create an HTML element <h1> for displaying Header Text for the web page Inside <h1> element bind the text interpolation using double curly braces for data binding and save the filename as index.html with the below format.
<html>
<body>
<h1 id='header'>{{sampleText}}</h1>
</body>
<script src='app.js'></script>
</html>
Now create an app.js file for Vue components initiated by the Vue constructor. Vue creates a data model to interact with the DOM structure. Each Vue instances have its own el and data special cases.
- el: it is used for binding HTML elements.
- data: it is used for binding the javascript objects
- methods: it is used for javascript functions. (if required)
Syntax:
var firstApp = new Vue({
el:'#header',
data: {
sampleText: 'Geeks For Geeks'
}
method: {}
});
#header is an ID selector of <div> element in DOM structure, it binds the HTML Element associated with the special case (el) in Vue Component. Javascript objects associated with the data model(data). the data model will render the sampleText in DOM using element(el) when the web page is loaded.
Example: In the below example, We have a button in html file and it will show an alert message when it’s clicked. then sample text will appear after the alert message is shown. Create a javascript file app.js, and create a Vue component named as firstApp using Vue() constructor. This component will keep the data and methods together to interact with DOM. use ID selector of <div> element inside el, it binds the firstApp component with HTML elements under the <div> root element. In the jQuery approach when we click the button, it uses an element or selector to find and Update the text in the DOM. In Vue approach inner text will update using render variable {{sampleText}} inside the <h3> element when the button is clicked. We can add Vue.js directives inside the Document Object Model structure(DOM), which helps to interact DOM with Vue components easily.
the following Vue.js directives help to bind the data objects with DOM.
- v-bind: The v-bind directive is a Vuejs directive used to bind one or more attributes or a component prop to an element.
- v-on: The v-on:click directive is a Vue.js directive used to add a click event listener to an element.
Filename: index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>VueJS Example</title>
<script src=
</head>
<body>
<div id='firstApp'>
<h1 v-bind:style="geeks">Geeks For Geeks</h1>
<button v-on:click="firstBtn">Welcome</button>
<h3>{{sampleText}}</h3>
</div>
<script src='app.js'></script>
</body>
</html>
|
Filename: app.js
Javascript
const firstApp = new Vue({
el: '#firstApp',
data: {
sampleText: '',
geeks: {
color: "green"
}
},
methods: {
firstBtn: function () {
alert('Welcome Geeks For Geeks');
this.sampleText = 'This code is working with VueJs';
}
}
});
|
Output:
Share your thoughts in the comments
Please Login to comment...