There are differing opinions on whether it is better to first understand what vue.js or any other library is doing behind the scenes in order to become a better web programmer in the long run. These libraries are essentially written in vanilla JavaScript, which means they are translating your actions into vanilla JavaScript code.
For beginners who are required to use vue.js in their classes, starting with vue.js might be a more practical approach. The methods used in vanilla JavaScript and vue.js are distinct enough that learning vanilla JavaScript first may not necessarily facilitate a better understanding of vue.js initially.
Eventually, having knowledge of vanilla JavaScript will undoubtedly enhance your overall comprehension and make you a more proficient web developer than if you were without this foundational knowledge. However, in the short term, it may not provide immediate benefits and could potentially lead to information overload.
To demonstrate the difference between handling form submission in vanilla JS versus vue.js, I have provided a simple example below:
Vanilla JS:
<form id='login-form'>
<input id="uname" />
<input type="password" id="pwd" />
<input type="submit" value="Login" id="login" />
</form>
<script>
var form = document.getElementById('login-form');
form.addEventListener('submit', function (e) {
var uname = document.getElementById('uname').value;
var pwd = document.getElementById('pwd').value;
console.log("submit form", { uname, pwd });
e.preventDefault();
});
</script>
Vue.js:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<form id='login-vue' @submit.prevent='submit'>
<input v-model='uname' />
<input type="password" v-model='pwd' />
<input type="submit" value="Login" />
</form>
<script>
var app = new Vue({
el: '#login-vue',
data: { uname: '', pwd: '' },
methods: {
submit: function (e) {
console.log("submit form", { uname: this.uname, pwd: this.pwd });
}
}
})
</script>
If analyzing these examples leads you to believe that understanding vanilla JavaScript aids in grasping vue.js concepts, then starting with vanilla JavaScript may be the way to go. If not, beginning directly with vue.js could be more beneficial for your learning process.