Intro to Vue.js
Two weeks ago I covered the topic of how to get started with your first Vue.js App. This week I decided to write about the core concepts in Vue while building a mini-app.
Interpolations and data-binding:
One way of data binding is text interpolation where you can use the double curly braces aka “Mustache” syntax such as:
<p>Name: {{ name }}</p>Once you run your Vue app the namewill be replaced with the value of what name is. You can also run a one-time interpolation that does not update on data change by using v-once directive but it's important to keep in mind that this will affect any other bindings on the same node.
<p v-once>This name will never change: {{ name }}</p>Attributes
Mustaches are not to be used inside HTML attributes. Instead, use a v-bind directive
<div v-bind:id="theDynamicId"></div>Arguments
Some directives take arguments which follow by a colon after the directive name. We can use the v-bind directive to reactively update the HTML attribute
<a v-bind:href="url"> ... </a>In the above example:
→ The href is the argument that tells v-bind to bind the elements href attribute to the value of url
Another example we can look at is v-on which listen to the DOM events
<p v-on:click="doSomething"> ... </p>Modifiers
Modifiers are used to indicate that the directive should be run in a special way. Given the example below:
<form v-on:submit.prevent="handleSubmit"> ... </form>The .prevent is basically calling event.preventDefault() on the event.
