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.
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];
}
});
});
});
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: [],
}),
});
Top comments (0)