vuejs-learning.md

Vue Learning

Directives

Special attributes provided by Vue, which applies reactive behavior to the rendered DOM.

Each directive is prefixed with a v-. Here a list of all directives:

Conditional Directives

• v-show
• v-if
• v-else-if
• v-else

Event Listeners Directives

• v-on

Data Binding Directives

• v-bind
  For properties such as disabled combined with v-bind (v-bind:disabled), the behavior changes if false, null or undefined are the values passed. In this case, disabled property won't even be rendered.
• v-model
• v-once

Cycling through Data Directives

• v-for

Lifecycle Hooks

Equivalente to React's methods componentDidMount. componentDidUpdate, etc. The Lifecyle Hooks are:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed
• errorCaptured

Interpolation

• {{}} a.k.a mustache syntax, to render plain text
• v-html: to render rawHTML

  You can't use v-html to compose template partials

Template Expressions

Limited to expressions only. The only globals allowed are: Math and Date

// Valid
{{ 1 + 1 }}

// Not valid
{{ var a = 1 }}
{{ if (a) { return 'a' } }}

Modifiers

Postfixes denoted by a dot indicating a directive should be bound in a special way.

<form v-on:submit.prevent="onSubmit">...</form>

The example above will call event.preventDefault() when the event is triggered.

Shorthands

• v-bind: <a :href="url">...</a>
• v-on: <button @click="doSomething">...</button>

Computed

Computed works exactly as a cache to your operations. Even if you have multiple calls on the same computed property, your function will be executed only once.

The thing is: The Computed Property will "create" a dependency over the data you are willing to compute.

const app = new Vue({
  data: {
    message: 'I love memes!'
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
})

In the example above, the dependency is message. Everytime message changes, it will reflect the change on reversedMessage(). Note: reversedMessage() is a getter. The example below shows it:

app.reversedMessage = 'I love orange juice'
app.reversedMessage //=> "!semem evol I"

A better explanation of this behavior is by comprehending that computed properties open up breaches to interpret it as a combination of get and set methods. The example below is valid!

const app = new Vue({
  data: {
    firstName: 'Jailson',
    lastName: 'Mendes'
  },
  computed: {
    fullName: {
      get() {
        return [this.firstName, this.lastName].join(' ')
      },
      set(newValue) {
        const [firstName, lastName] = newValue.split(' ')

        this.firstName = firstName
        this.lastName = lastName
      }
    }
  }
})

app.lastName = 'Mercury'
app.fullName //=> Jailson Mercury