HTML & Vue.js, a secrete you may not know about Vue

Reference

http://blog.kueiapp.com/ja/vue-component-communication2/

Vue.js and Native HTML5 – what is the difference
Nowadays, there are many ways and frameworks to building up a web frontend system, such as React, AngularJS, Vue.js and so on. It is definitely able to build up a system using native HTML5 with JavaScript, but usually using a good framework can implement the system with a beautiful design pattern for structure and security.

Image description

A tool or frameworks be created is usually because of the difficulties developers have at that moment. For example, jQuery was created for using JavaScript on different browsers that supported different standards, and it was the first one library to be able to use CSS selectors to control DOM (Document Object Modal) . The HTML5 querySelector now copied this cool functionality.

Why VueJS

Access DOM

when using Pure HTML5 JavaScript to access DOM in order to grab data from HTML tree. There are a lot of works needed to be done, such as targeting an element, add a new listener to detect interaction from users on UI, or return data when target action is caught.

<html> <body> <h1>Checkbox with pure HTML5 syntax</h1> <label> <input type="checkbox" name="group1" value="check1" /> checkbox 1 </label> <label> <input type="checkbox" name="group1" value="check2" /> checkbox 2 </label> </body>
</html>
<script>
window.onload = ()=>{ const group1: NodeListOf<HTMLInputElement> | undefined = document.querySelectorAll("input[name=group1]"); if (!group1) return; group1.forEach((checkbox) => { checkbox.addEventListener("change", (e: Event) => { if (!e.target) return; const targetValue = (e.target as HTMLInputElement).value.toString(); const checked = (e.target as HTMLInputElement).checked; if (!checked) { this.selected = this.selected.filter( (select) => select !== targetValue ); } else { this.selected = [...this.selected, targetValue]; } }); });
});
Enter fullscreen mode
Exit fullscreen mode

Compare to native HTML5 JavaScript (or jQuery) which operate DOM directly, Vue.js has its own View Model to modify DOM when getting new data model. In other words, we can focus on data and structure rather then design our own modal and operating DOM directly. Both ways are good for different scenarios but Vue.js actually provides a easier route to build up a web frontend.

Using Vue.js

<div> <label> check 1 <input type="checkbox" v-model="checkboxList" value="1" /> </label> <label> check 2 <input type="checkbox" v-model="checkboxList" value="2" /> </label>
</div>
export default Vue.extend({ data: () => ({ checkboxList: [], }),
});
Enter fullscreen mode
Exit fullscreen mode

Reference

http://blog.kueiapp.com/ja/vue-component-communication2/


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top