Getting started

with Vue.js

@suraj.kc

Github repository

https://github.com/kcsuraj/vue-workshop

Pre-requisites

Node.js & NPM

Windows

https://nodejs.org/en/download/

Ubuntu & Mac

sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install nodejs

Pre-requisites

Git & Github

Windows

https://git-scm.com/downloads

Ubuntu & Mac

sudo apt-get install git

Pre-requisites

Visual Studio Code

Mac, Linux & Windows

https://code.visualstudio.com/download

Extension (Vetur)

Ctrl+P
https://marketplace.visualstudio.com/items?itemName=octref.vetur

Pre-requisites

Vue CLI

npm install -g @vue/cli
yarn global add @vue/cli

OR

Introduction

  • Legible
  • Easy to maintain
  • Understand where things are
  • Powerful
  • A collection of best of the best features
  • Elegant
  • A way to be really to be productive
  • Really really fun

Comparision

  • A virtual DOM
  • Reactive components that offer the view layer only
  • Props and VueX store similar to redux
  • Conditional rendering & services similar to angular
  • Inspired by Polymer for simplicity & performance

Directives

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

Display Hello World

hello-world

https://github.com/kcsuraj/vue-workshop.git

Challenge

hello-world-solution

Solution

Display sum of two numbers

Show your favorite upcoming movie

calculator-favorite-movie

https://github.com/kcsuraj/vue-workshop.git

Challenge

calculator-favorite-movie-solution

Solution

Methods, Computed & Watchers

Methods

Are bound to the Vue instance, they are incredibly useful for functions you would like to access in directives

Increment & decrement a digit using button

counter

https://github.com/kcsuraj/vue-workshop.git

Challenge

counter-solution

Solution

Add comments in a photo

add-comment-in-photo

https://github.com/kcsuraj/vue-workshop.git

Challenge

add-comment-in-photo-solution

Solution

Create a registration form

vue-registration-form

https://github.com/kcsuraj/vue-workshop.git

Challenge

vue-registration-form-solution

Solution

Computed

Computed properties are calculations that will be cached and will only update when needed.

Highly performant but use with understanding.

Sort netflix ratings 

netflix-ratings

https://github.com/kcsuraj/vue-workshop.git

Challenge

netflix-ratings-solution

Solution

Watchers

Good for asynchronous updates,

and updates/transitions with data changes

Implement Hacker News API 

hacker-news

https://github.com/kcsuraj/vue-workshop.git

Challenge

hacker-news-solution

Solution

Components & Slots

Templates

Vue.js uses HTML-based template syntax to bind the Vue instance to the DOM, very useful for components.

 

Templates are optional, you can also write render functions with optional JSX support.

Components

A collection of elements that are encapsulated into a group that can be accessed through one single element.

<nav>
	<a href="">
    	<img src=""></img>
    </a>
    
    <ul>
    	<li></li>
        <li></li>
    </ul>    
</nav>
<navbar></navbar>

Refactor Hacker News into components

hacker-news-components

https://github.com/kcsuraj/vue-workshop.git

Challenge

hacker-news-components-solution

Solution

Slots

a parent component to pass DOM elements into a child component

Implement modal component

modal

https://github.com/kcsuraj/vue-workshop.git

Challenge

 modal-solution

Solution

Implement form component

form-component

https://github.com/kcsuraj/vue-workshop.git

Challenge

form-component-solution

Solution

Vue Router

integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze

npm install --save vue-router
//Router.vue

import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "../components/HelloWorld";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    }
  ]
});

//App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <router-view />
  </div>
</template>
//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
  components: { App }
}).$mount("#app");

Hack Fest Kathmandu

https://hackfestktm.github.io

https://www.facebook.com/groups/hackfestktm

Vue Workshop

By surajkc

Made with Slides.com

Vue Workshop

  • 789

More from surajkc