Intro to Vue 2

Vue is a progressive framework for building user interface. The core library is focused on the view layer only, and is easy to integrate with other libraries or existing projects.

Expression {{ }}

{{ dataName }}

• produce or evaluate a value
  • combine values
  • perform conditional logic with a ternary operator
  • run methods on data

• Vue is reactive: the data is linked to every place that data is being referenced.

V-bind:

v-bind:[attr]="expression"

• create a bond between the data and the attribute
• dynamically binds an attribute to an expression
• one-way binding, from data to template

Conditional Rendering

• v-if will actually add or remove the element from the DOM

v-if="expression_1"
v-else-if="expression_2"
v-else

• v-show just toggles the visibility (display: none )off and on

List Rendering

• v-for=”item in itemCollection” / v-for=”(item, index) in itemCollection”
• :key=”index” -> to keep track of each node’s identity

Event Handling

v-on:click="function"

<button @click="" />
<div @mouseover="" />
<form @submit="" />
<input @keyup.enter="" />

• listen for an event
• shorthand: @[event]
• Modifier

Style Bindings

:style="{ color: color; }"

• Rules:
  • left value is the css property
  • right value references a data with the same name
• Because it’s an object, the variable names are using camel casing, kebab casing must be put in quotes: fontSize / ‘font-size’

Class Bindings

:class="{
    active: isActive,
    'text-danger': isError
}"

// Conditionals
:class="[isActive ? activeClass : ''/null]"

Computed Properties

• computed property runs every time it’s dependencies change
• it’s cached, more efficient than using a method to re-calcuted the value.

Components

Vue.component('compnentName', { options });

• template specifies the structure (allows only one root element )

template: `<div>...</div>`

• data is a function that return data object: each component has its own unique data
• Props
  • a custom attribute for passing data into your components (parent -> child)
  • recommend to specify requirements use build in prop validation

props: {
  message: {
    type: String,
    required: true,
    default: "Hi"
  }
}

Communication Event

parent:
<component @eventName="handler" />

Component:
this.$emit('eventName'[, parameters]);

• Changes in child element pass to parent by emitting an event

v-model

• Two-way data binding

<select id="rating" v-model.number="rating" />

eventBus

• a new vue instance and a global channel to transport data

Vuex

• state management pattern

https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance