Slide 1
Slide 1 text
An OverVue
By Andrew Willis
Slide 2
Slide 2 text
A Brief History
Vue.js was created by Evan You
Former Google and Meteor employee
Started building Vue.js while at Google
Found Angular too opinionated / unsuitable for some projects
Built Vue.js to be simpler and less opinionated than Angular
Built it to be able to grow with your project
Slide 3
Slide 3 text
What is Vue.js?
Vue.js describes itself as a
"Progressive JavaScript Framework"
So... What does that mean?
Slide 4
Slide 4 text
What is Vue.js?
Vue.js is an adaptable framework which is suited to a variety of
diļ¬erent use-cases and can grow with your project, from a small
interactive component, through a full page of nested components, all
the way up to a single-page app.
Slide 5
Slide 5 text
Why do
I use it?
Slide 6
Slide 6 text
The Vue Instance
new Vue({
el: '#app',
data: {
greeting: 'hello',
}
});
HTML JavaScript
{{ greeting }}
Slide 7
Slide 7 text
{{ greeting }}
Slide 8
Slide 8 text
// SomeComponent.vue
export default {
data() {
return {
greeting: "Hello from Some Component"
}
},
computed: {
greetingLength() {
return this.greeting.length
}
},
methods: {
update: _.debounce(function (e) {
this.greeting = e.target.value
}, 100)
}
}
{{ greeting }}
{{ greetingLength }}Slide 9
Slide 9 text
// SmallerComponent.vue
// SomeComponent.vue
import SmallerComponent from 'SmallerComponent.vue'
export default {
...
components: {
SmallerComponent
}
}
Boo
{{ greeting }}
{{ greetingLength }}Slide 10
Slide 10 text
The Vue Ecosystem
Vue.js has a whole bunch of plugins and resources:
vuex
vue-router
vue-devtools
vue-resource
vue-validator
vue-strap
github.com/vuejs/awesome-vue
Slide 11
Slide 11 text
Vuex
Manage the state of your app between components
Components should be independent
Can abstract persistence away from your components
Inspired by Flux architecture
Tailored to Vue.js
Slide 12
Slide 12 text
Vue Router
Routes each page to a component
Used to build Single Page Apps
import Vue from 'vue'
import VueRouter from 'vue-router'
import SomePage from 'SomePage.vue'
const router = new VueRouter({
routes: {
path: '/some-page',
component: SomePage
}
})
const app = new Vue({
router
}).$mount('#app')
Some Page
HTML JavaScript
Slide 13
Slide 13 text
Vue Devtools
Allows you to see and modify your active Vue components
Works with Vuex, allows you to travel back through changes
Slide 14
Slide 14 text
Putting it all together
github.com/vuejs/vue-hackernews-2.0