Recently, I decided to delve into the world of VueJS starting from square one. Following their official guide has been a helpful resource, but I've hit a roadblock at this section.
One particular example in the guide caught my attention...
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
...I found myself puzzled by how the message property is being accessed directly without referencing the data object. Isn't it supposed to be accessed as this.data.message if this pertains to the current Vue instance?
To illustrate my confusion further, consider this scenario:
({
name: "John Doe",
data: {
message: "Hello World"
},
greet: function(){
console.log("I am " + this.name);
console.log("I have a message for you: " + this.data.message); //observe here
}
}).greet();
In regular vanilla JavaScript, I'd follow a different approach to access properties. Could someone shed some light on what's happening under the hood?