Vue.js

Nuxt.js / VuePress

06.06.2018

Milan Šulc

github.com/f3l1x

twitter.com/xf3l1x

f3l1x.io

TOC

Vue.js

syntax

components (SFC)

vuex

vue-cli

live coding

Nuxt.js

VuePress

small

blazing fast

just javascript

easy to setup

cool errors

(~58.8K)

So simple

const app = new Vue({
  el: '#app',
  data: {
    msg: 'I am Vue'
  }
})
<div id="app">{{ msg }}</div>
https://unpkg.com/vue@2.5.16/dist/vue.js

Directives

<div>{{ msg }}</div>

<div v-text="msg"></div>

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

<div v-once>{{ msg }}</div>

Conditions

<div v-if="show">{{ msg }}</div>
<div v-else>No message</div>


<div v-show="show">must go on</div>

const app = new Vue({
  el: '#app',
  data: {
    show: true,
    msg: 'Hello'
  }
})

Loops

<div v-for="movie in movies">{{movie.title}}</div>
const app = new Vue({
  el: '#app',
  data: {
    movies: [
      { title: 'Matrix' },
      { title: 'Julie & Romeo' }
    ]
  }
})

CSS

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


<div :style="{color: activeColor}"></div>
const app = new Vue({
  el: '#app',
  data: {
    active: true,
    activeColor: 'black'
  }
})

Events

<button v-on:click="doMagic">

<button @click="doMagic">

<button @click.stop="doMagic">

<button @click.stop.prevent="doMagic">

<button @click="doMagic(movie)">

<button @click="doMagic($event, movie)">
const app = new Vue({
  el: '#app',
  methods: {
    function doMagic(e){},
    doMagic(e, movie){}
  }
})

Filters

<div>{{ rate | currency }}</div>

<div>{{ rate | currency('USD') }}</div>

<div>{{ rate | format | currency('USD') }}</div>
Vue.filter("currency", s => {
  return `${s} CZK`;
});

Components

<div id="app">
  <hello></hello>
</div>
Vue.component('hello', {
  template: '<p>Hello world</p>'
})

const app = new Vue({
  el: '#app'
})

Single File Components

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Vuex

const store = new Vuex.Store({
  state: {
    clicks: 0
  },
  mutations: {
    increaseClicks(state) {
      state.clicks++;
    }
  }
})
store.commit('increaseClicks');

store.state.clicks // -> 1

Vuex / Vue

const store = new Vuex.Store({
  state: {
    clicks: 0
  },
  mutations: {
    increaseClicks(state) {
      state.clicks++;
    }
  }
})
const app = new Vue({
  el: '#app',
  store: store,
  computed: {
    clicks() {
    	return this.$store.state.clicks;
    }
  },
  methods: {
    onBtnClick() {
        this.$store.commit('increaseClicks');
    }
  }
})
<div id="app">
  Total clicks: {{clicks}}
  <button @click="onBtnClick">CLICK ME</button>
</div>

Vue CLI

vue init webpack-simple my-project

Time to selfie 📷

Live coding

https://codesandbox.io/s/p5jl7qplvq

Nuxt.js

VuePress

Thank you

github.com/f3l1x

 

twitter.com/xf3l1x

 

f3l1x.io

https://github.com/trainit/2018-06-vue-nuxt-vuepress

2018-06-06 Vue.js / Nuxt.js / VuePress

By Milan Felix Šulc

2018-06-06 Vue.js / Nuxt.js / VuePress

  • 1,818

More from Milan Felix Šulc