I love Vue.js and enjoy using it for all my current projects. And I’ll give you an overview of almost all basic Vue.js concepts. All this information is based on the official documentation, and I extend it with some more detailed knowledge.
Furthermore, I update this article in the future if new things come out or change. So it’s worth to check this article from time to time.
Vue.js is a system that enables us to render data to the DOM using straightforward template syntax declaratively, which is possible by using Vue’s double-mustache syntax.
The data and the DOM are linked, and everything is reactive. Open your browser’s JavaScript console and set app.name
to a different value. You should see the rendered example update immediately.
<div id="app">
My name is: {{ name }}
</div>
var app = new Vue({
el: '#app',
data: {
name: 'Mario'
}
})
Note that you no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element, #app
in this case, then fully controls it. The HTML is the entry point, but everything else happens within the created Vue instance.
Interpolations can contain simple expressions in Vue, like this:
<div>{{ bugs + 99 }} little bugs in the code</div>
Manipulate your local data with methods, where you can change an array to a comma-separated string for example.
<div>On my shopping list is: {{ list.join(", ") }}</div>
You can also use a ternary operator to have a conditional rendering.
<div>You {{ score > 50 ? 'passed' : 'failed' }} the test</div>
#vue #javascript #developer