JS frameworks popularity trends

Vue.js is MVVM framework that is very easy to start and also a powerful tool for building UI

Template Syntax

• Text interpolation

• Attribute binging

• Built-in directives

<div>Message: {{ message }}</div>

<div v-html="message"></div>

<a v-bind:href="linkHref">Dynamic link</a>

<button v-bind:disabled="someDynamicCondition">Button</button>

<div v-if="isShown">This content is shown</div>

<ul>
    <li v-for="fruit of fruits" :key="item.id">{{ fruit }}</li>
<ul>

<!-- shorthand -->
<a :href="url">Some link</a>

Class and Style Bindings

<div v-bind:class="{ active: isActive }"></div>

<!-- Vue accepts array, object, expression and even function -->
<div id="app">
    <div v-bind:class="classObject"></div>
</div>

const app = new Vue({
    el: '#app',
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
});

<!-- Inline style bindings -->

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Event handling

Event modifiers

Key modifiers

Components

Component props

Vue.component('someComp', {
  props: ['text'],
  template: '<span>{{ message }}</span>'
})

<some-comp message="hello!"></some-comp>
<!-- will render -->
<span>hello!</span>

Every component instance has its own isolated scope.

Data can be passed down to child components using props.

Only one way data flow. Never mutate prop inside child component

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

Prop validation

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Component communication

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

Directives

Built-in

• v-for
• v-model
• v-show
• etc.

Custom

// Register a global custom directive
Vue.directive('focus', {
  // When the bound element
  // is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

// Register a local custom directive
const app = new Vue({
    el: '#app',
    data: {
        someData: 'hello'
    },
    directives: {
        focus: {
            // directive definition
        }
    }
});

Directive hook functions

• bind: called only once, when the directive is first bound to the element. This is where you can do one-time setup work.
• inserted: called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).
• update: called after the containing component has updated, but possibly before its children have updated.
• componentUpdated: called after the containing component and its children have updated.
• unbind: called only once, when the directive is unbound from the element.

Computed Properties

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

const app = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
});

Watchers

<div id="watch-example">
  <p>
    Ask some question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

const app = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: ''
  },
  watch: {
    // whenever question changes, this function will run
    question: function (newQuestion) {
      this.answer = `Answer to question: ${this.question}`
    }
  }
});

Vue instance lifecycle

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed