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

Vue.js can be used for websites of all sizes

<!-- 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>

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

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

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