Vue.JS

Template Syntax

Hello World

Saving time with shortlands

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

Docs

Getting Started https://vuejs.org/v2/guide/
На русском https://ru.vuejs.org/
Template Syntax https://vuejs.org/v2/guide/syntax.html
Events https://vuejs.org/v2/guide/events.html
Computed Properties & Watchers https://vuejs.org/v2/guide/computed.html
Class and Style Binding https://vuejs.org/v2/guide/class-and-style.html

Conditionals and lists

v-if; v-else; v-show

Lists v-for

Docs

Conditionals https://vuejs.org/v2/guide/conditional.html
Lists https://vuejs.org/v2/guide/list.html

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

The Vue Instance https://vuejs.org/v2/guide/instance.html
Reactivity in Depth https://vuejs.org/v2/guide/reactivity.html

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

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

Single File Components https://vuejs.org/v2/guide/single-file-components.html
Render Functions https://vuejs.org/v2/guide/render-function.html
Vue CLI https://github.com/vuejs/vue-cli
Vue template webpack https://github.com/vuejs/vue-cli

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

Dynamic Component https://vuejs.org/v2/guide/components.html#Dynamic-Components

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

Props https://vuejs.org/v2/guide/components.html#Props
Custom Events https://vuejs.org/v2/guide/components.html#Custom-Events
Non parent child communication https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Slots

Named Slots

Docs

Slots https://vuejs.org/v2/api/#slot

Forms

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

Docs

Forms https://vuejs.org/v2/guide/forms.html

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

Custom Directives https://vuejs.org/v2/guide/custom-directive.html

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

Filters https://vuejs.org/v2/api/#Vue-filter https://vuejs.org/v2/guide/mixins.html

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 resourcehttps://github.com/pagekit/vue-resource
Some code receipeshttps://github.com/pagekit/vue-resource/blob/master/docs/recipes.md
Requests and responses with different formatshttps://github.com/pagekit/vue-resource/blob/master/docs/http.md

Vue router

Simple Routing

Docs

Vue Router Github https://github.com/vuejs/vue-router
Docs https://router.vuejs.org/

Vuex

Vuex example

Docs

Vuex Source https://github.com/vuejs/vuex
Docs https://vuex.vuejs.org/en/

The End

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