Getting started
with Vue.js
Github repository
Pre-requisites
Node.js & NPM
Windows
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
Ubuntu & Mac
sudo apt-get install git
Pre-requisites
Visual Studio Code
Mac, Linux & Windows
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
Vue Workshop
By surajkc
Vue Workshop
- 807