Vue.JS

Template Syntax

Hello World

Saving time with shortlands

  • v-on:click = @click
  • v-bind:style = :style

Docs

Conditionals and lists

v-if; v-else; v-show

Lists v-for

Docs

VueJS Instance

computed, watch, $refs, $data

computed properties does not calculate each render, it calculates only if it has to

computed getters and setters

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

Reactivity

Lifecycle

Lifecycle hooks

Make an ajax in created()

Docs

Vue CLI and Webpack

vue-cli

$ npm install -g vue-cli
$ vue init [template-name] [project-name]

simple

index.html + Vue CDN import

webpack-simple

Basic webpack workflow

webpack

Complex webpack workflow (incl. Testing)

browserify / browserify-simple

Browserify Workflows

vue-cli

| $ vue init webpack-simple testapp
| $ cd testapp
| $ npm install
| $ npm run dev

created project

created project

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue (Single File Components)

<template>
  <div id="app">
    <h1>Hello World</h1>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>

</style>

Out

module.exports = {
  render: function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _vm._m(0)
  },
  staticRenderFns: [function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
      return _c('div', {
        attrs: {
          "id": "app"
        }
      }, [_c('h1', [_vm._v("Hello World")])])
    }]
  }
});

Build

$ npm run build
build.js 90kb - 33kb gzipped
$ create-react-app
$ ...
$ yarn run build
build.js 166kb - 48kb gzipped
https://github.com/vuejs/vue-devtools

Docs

Components Overview

Hello From Component

Registering components

Dynamic components

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue (Root component)

<template>
  <div id="app">
    <h1>Hello World</h1>
  </div>
</template>

<script>

export default {
  import Header from './components/Header.vue';

  name: 'app',
  components: {
    appHeader: Header
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>

</style>

pug and node-sass

<template lang='pug'>
div
  button.btn.btn-success Click me
</template>
<script>
  ...
</script>

<style lang='scss'>
$text-color: black;

div {
  color: black;
}
</style>

scoped styles

<template>
 ...
</template>
<script>
  ...
</script>

<style scoped>
$text-color: black;

div {
  color: black;
}
</style>

scoped styles

Folder stricture

src/
-- components/
---- shared/
------ Header.vue
---- Dropdown.vue
---- auth/
------ SignIn.vue
------ SignUn.vue
main.js
App.vue

Alternative folder stricture

src/
-- auth/
------ SignIn.vue
------ SignUn.vue
-- user/
------ Profile.vue
------ EditProfile.vue
-- shared/
------ Dropdown.vue
main.js
App.vue

Docs

Communicate beetween components

Props

Validating props

Advansed props

Data flow (from parent to child)

Data from child to parent with callback function

Passing data between sibling components

EventBus

EventBus in signle file template

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

export const eventBus = new Vue();

<template>
  ...
</template>
<script>
  import { eventBus } from '../main';

  export default {

  };
</script>

Docs

Slots

Slots

Named Slots

Docs

Forms

Forms

v-model.lazy --- set all properties initially!!!

Docs

Directives

Directives

  • v-on
  • v-for
  • v-model
  • v-if
  • v-show
  • ...
v-[name of directive]:[argument].[modifier][modifier]
e.g. v-on:submit.prevent='customSubmit'

Hooks functions (like lifecycle hooks)

Vue.directive('highlight', {
  bind (el, binding, vnode) {
    // Once directive is attached
  },
  inserted (el, binding, vnode) {
    // Inseted in a parent node
  },
  updated (el, binding, vnode, oldVnode) {
    // Once component is updated (without children)
  },
  componentUpdated (el, binding, vnode, oldVnode) {
    // Once component is updated (with children)
  },
  unbind (el, binding, node) {
    // Once directive is removed
  }
});

v-hightlight custom directive

Docs

Filters and mixins

Filter

Vue doesn't have default filters. Use computed properties or write your own!

Mixins

Vue carefully merges mixins and components

Docs

Animation

Animation with css classes

Vue analyzes transition or animation and use time of it

Also possible

  • Use custom class names (if you use anination.css)
  • Animate with javascript (there is an animation lifecycle hook)

Vue Resource

import Vue from 'vue'
import App from './App.vue'
import VueResouce from 'vue-reource';

Vue.use(VueResource); // it's how to use plugins

new Vue({
  el: '#app',
  render: h => h(App)
})

this.$http

Docs

Vue router

Simple Routing

Docs

Vuex

Vuex example

Docs

The End

https://babakhanov.github.io/just-vue-it