Vue.js
IN A NUTSHELL
Ralph Harrer
@ralphbertAbout Vue.js
(pronounced /vjuː/, like view)About Vue.js
Created by Evan You (@yyx990803)
Current version: 2.5
Size: 87K
Focused on the view layer only
Virtual DOM for rendering
About Vue.js
Reactive and composable view components
JSX, HTML or render functions
SSR support
Animation framework included
No bundler required (ES5 compatible)
JS
new Vue({
el: '#app',
data: {
visible: false,
},
methods: {
toggle() {
this.visible = !this.visible;
}
}
});
HTML
Hello world
The Vue instance
new Vue({
el: '#app', // mounting the app
data: { // contains reactive data
name: 'Jon Snow',
},
methods: { // methods
slayWhiteWalker() { ... }
},
computed: { // derived values from data
computedValue() { ... }
},
watch: { ... } // code execution on data change
template: '{{name}}',
...
});
Lifecycle hooks
new Vue({
...
beforeCreate() {},
mounted() {},
beforeDestroy() {},
destroyed() {},
// ... and a lot more
});
Template language
Expressions: {{1 + 1}}, {{myVar}}
Conditional rendering: v-if, v-else, v-show, ...
Loops: v-for
Hi, my name is {{name}}
I am the Terminator
Event handling
Binding to events with @event-name
Will execute a Vue method or inline code.
Demo time
JSFiddleLet's get awesome!
Vue.js Components
Components
They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to.https://vuejs.org/v2/guide/components.html
Example
<div>
...
<CoinList>
<CoinListItem :coin="coin" />
</CoinList>
</div>
Defining a component
... the hard way
<script>
Vue.component('my-component', {
props: ['value'],
data() { // data must be a function returning a data object
return {...};
},
// and all the other Vue instance options
template: '{{value}}',
})
</script>
<my-component value="Hello World!" />
Output
Hello World!
Single File Components
The better way
// MyComponent.vue
{{value}}
<script>
export default {
props: ['value']
};
</script>
<script scoped>
// component specific styles
</script>
Single File Components
Loading and using "SFC"
<script>
import MyComponent from './MyComponent.vue';
new Vue({
el: '#app',
components: { MyComponent },
template: '<my-component />',
});
</script>
<div id="#app"></div>
Nesting Components
// Card.vue
<template>
<div class="card">
<div class="card-body">
<slot></slot>
</div>
</div>
</template>
Usage
<div id="#app">
<card>
This content is displayed in a card
</card>
</div>
Parent-Child Communication
The parent passes data down to the child via props, and the child sends messages to the parent via events
<template>
<button :disabled="loading" @click="onClick">
<ActivitySpinner v-if="loading" /> <slot></slot>
</button>
</template>
<script>
import ActivitySpinner from './components/ActivitySpinner';
export default {
props: ['loading'],
methods: {
onClick(e) { this.$emit('click', e); }
},
components: { ActivitySpinner }
}
</script>
<ActivityButton :loading="loading" @click="dummyLoading">
Test Button
</ActivityButton>
Ecosystem
Devtools
https://github.com/vuejs/vue-devtools
vue-cli
$ npm install -g vue-cli
$ vue init <template-name> <project-name>
$ vue init webpack my-project
$ cd my-project
$ npm run dev
Vuex
Vuex is a state management pattern + library for Vue.js applications
Vuex
vue-router
import Foo from './components/Foo.vue';
import Bar from './components/Bar.vue';
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
]
});
const app = new Vue({
el: '#app',
router,
});
Nuxt
The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. A few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born.