Image for post
Image for post

How to use Vue.js on static web pages instead of jQuery

Vue.js can be used for websites of all sizes

Chances are you use WordPress or another CMS for your web presence. Or maybe you even develop and host your web page yourself with HTML, CSS and JavaScript. Many web pages use jQuery, the swiss-army knife in every web developer a few years ago which is still relevant to this day as many sites still rely on it. However, jQuery is not as useful as it was back in the day where cross browser compatibility (looking at you, Internet Explorer) was pretty bad. Also, with the rise of concepts like Virtual DOM, direct DOM access is discouraged in lots of modern JavaScript frameworks (e.g. Angular, React, Vue.js).

Enter Vue.js which refers to itself as a progressive JavaScript framework that scales between a library and a full-featured framework. Compared to its main competitors Angular and React, Vue.js can be used for web projects ranging from landing pages to sophisticated single page applications.

<!-- This is the easiest way to include Vue.js on any web page -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

In this article, I will present a few use cases for Vue.js for static web pages. There will also be comparisons to jQuery. However, you will see that Vue.js can be used in various situations to do the job better than if you choose jQuery.

Clicking an element

<!-- Vue.js: increment the value of the 'counter' variable-->
<button v-on:click="counter += 1">Add 1</button>
<!-- jQuery -->
$("button").on("click", function(){
counter += 1;
});

Detecting a key press on an element

<!-- Vue.js: call submit function if specific key is pressed -->
<input v-on:keyup.enter="submit">
<!-- jQuery -->
$("input").keypress(function (e) {
if (e.which == 13) {
...
}
});

Form submission

<!-- Vue.js: call the 'handleSubmit' function when form is submitted -->
<form @submit="handleSubmit"></form>
<!-- jQuery -->
$("#my-form").on("submit", function(){
...
});

Update HTML attributes

<!-- Vue.js: set the ID to the value of the property 'dynamicId' -->
<div v-bind:id="dynamicId"></div>
<!-- jQuery -->
$("my-element").attr("id", dynamicId);

Updating values in HTML (e.g. text)

<!-- Vue.js: display 'msg' text which updates automatically if the variable changes -->
<p>Message: {{ msg }}</p>
<!-- jQuery -->
$("p").text("Message: " + msg);

Displaying lists

<!-- Vue.js: display a list of items which updates automatically if the list changes -->
<ul id="example-1">
<li v-for="item in items" :key="item.id>
{{ item.message }}
</li>
</ul>

Hide and show content

<!-- Vue.js -->
<!-- Difference between v-if and v-show: v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element -->
<h1 v-if="ok">Yes</h1>
<h1 v-show="ok">Hello!</h1>
<!-- jQuery: -->
$("#my-element").hide();
$("#my-element").show();

Update HTML classes of an element

<!-- Vue.js: add class 'active' if the expression evaluates is truthy -->
<div v-bind:class="{ active: isActive }"></div>
<!-- jQuery -->
$("#my-element").addClass("active");

Update inline styling of an element

<!-- Vue.js: update style properties dynamically. Note that style properties have to be in camelCase -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- jQuery -->
$("#my-element").css({"color": activeColor, "font-size": fontSize + "px"});

Conclusion

As you can see, Vue.js can be used on simple web pages as well as in sophisticated single page applications. Vue.js is great for building responsive and dynamic UI as it provides useful utilities and functions to so. If you are building a static web page, you should consider Vue.js. While jQuery is still a solid library for performing DOM operations with short code, you should consider Vue.js which can do many things better than jQuery. After all, you can still use Vue.js if you want to upgrade your static web page to a web application since Vue.js scales very well.

Senior Software Engineer @LeanIX. Co-founder of Sedeo. Passion for software engineering and startups. Looking forward to build great things. 有難うございます。🚀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store