Vue.js
Lukas Gamper
Vue.js
- Nur im View Layer
- Template basiert mit Virtual DOM
- Einfach in bestehende Projekte integrierbar
- Auch für anspruchvolle SPA's geeignet
Wieso Vue.js bei Webling
(noch 1x)
- In bestehende Projekte integrierbar
- Sehr schlank
- runtime nur 20k Bytes
- dev Version 10k Zeilen (mit Kommentaren)
Hello World
<html>
<head>
<script src="https://unpkg.com/vue">
</script>
</head
<body>
<div id="app">{{message}}</div>
<script>new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>HTML
CodePen
Declarative Rendering
<div id="app">
<p>{{ message }}</p>
<p>
<a @click="message='Hello World'">
Change
</a>
</p>
<p><input v-model="message"></p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})HTML
Javascript
CodePen
Directives
<div id="app">
<p>
<input type="checkbox" v-model="show">
<span v-if="show">Show is True</span>
<span v-else>Show is False</span>
</p>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
show: true,
list: [
'item 1',
'item 2',
'item 3'
]
}
})HTML
Javascript
CodePen
Methods
<div id="app">
<p>{{ message }}</p>
<p>
<a @click="message='Hello'">
Change
</a>
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})HTML
Javascript
CodePen
<div id="app">
<p>{{ message }}</p>
<p>
<a @click="setMessage('Hello')">
Change
</a>
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
setMessage(msg) {
this.message = msg
}
}
})Computed Properties
<div id="app">
<p><input v-model="message"></p>
<p>
{{ message
.split('')
.reverse()
.join('')
}}
</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})HTML
Javascript
CodePen
<div id="app">
<p><input v-model="message"></p>
<p>{{ reverseMessage }}</p>
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reverseMessage: function() {
return this.message
.split('')
.reverse()
.join('')
}
}
})Watcher
<div id="app">
<p><input v-model="message"></p>
<p>{{ lastChange }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
lastChange: ''
},
watch: {
message: function(newVal, oldVal) {
this.lastChange
= String(new Date())
}
}
})HTML
Javascript
CodePen
Components
<div id="app">
<ul>
<list-item
v-for="item in list"
:item="item"
:key="item.id">
</list-item>
</ul>
</div>Vue.component('list-item', {
props: ['item'],
template: '<li>{{ item.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
list: [
{ id: 0, text: 'item 1' },
{ id: 1, text: 'item 2' },
{ id: 2, text: 'item 3' }
]
}
})HTML
Javascript
CodePen
Single File Component
- Ein File pro Component
- Component Scoped CSS
- Compiled Render Functions
- Plugins für VS Code und WebStorm
<template>
<p>{{ greeting }} World!</p>
</template>
<style scoped>
p {
font-size: 2em;
}
</style>
<script>
module.exports = {
data: function() {
return {
greeting: 'Hello World'
}
}
}
</script>Single File Component
- Webpack loader für einzelne Abschnitte
<template>
<p>{{greeting}} World!</p>
</template>
<style lang="scss">
@import "css/global-styles.scss";
</style>
<script lang="ts">
import Vue from 'vue'
import { Component }
from 'vue-property-decorator'
@Component
export default class App
extends Vue
{
public greeting: string = 'Hello';
}
</script>Render Functions
<div id="app">
<ul>
<list-item
v-for="item in list"
:item="item"
:key="item.id">
</list-item>
</ul>
</div>Vue.component('list-item', {
render: function (createElement) {
return createElement(
'li',
[this.item.text]
)
},
props: {
item: {
type: Object,
required: true
}
}
})
var app = new Vue({
el: '#app',
data: {
list: [
{ id: 0, text: 'item 1' },
{ id: 1, text: 'item 2' },
{ id: 2, text: 'item 3' }
]
}
})HTML
Javascript
CodePen
Reactivity / Watcher
- Plain JS Objects
- Benutzt ES5 getter / setter
- Transparent für den User
Reactivity / Watcher
Dokumentation
Weiteres
- Transistions & Animations
- Filters, Mixins, Plugins
- Server Side Rendering
- Routing
- State Management (Vuex)
- Testing
- Vue CLI
Pro
- Nur View Layer
- Einfach zu lernen
- Gute Dokumentation
- In bestehende Projekte integrierbar
- Gute Mischung zwischen Angular und React
Con
- Nur View Layer
- Nicht so viele Plugins
- Keine Grosse Firma im Background
- Noch nicht so gross wie Angular und React
Fragen?
Reactivity / Watcher
- Watcher for updates
- Async Watcher
var app = new Vue({
data: {
val1: 1,
val2: 1
},
watch: {
val1: function(newVal) {
this.val2 = newVal
}
}
})
app.val1 = 2
document.writeln(app.val2)
Vue.nextTick(function() {
document.writeln(app.val2)
})Templates
<script
type="x-template"
id="list-item"
>
<li>{{ item.text }}</li>
</script>
<div id="app">
<ul>
<list-item
v-for="item in list"
:item="item"
:key="item.id">
</list-item>
</ul>
</div>Vue.component('list-item', {
props: ['item'],
template: '#list-item'
})
var app = new Vue({
el: '#app',
data: {
list: [
{ id: 0, text: 'item 1' },
{ id: 1, text: 'item 2' },
{ id: 2, text: 'item 3' }
]
}
})HTML
Javascript
CodePen
vuejs
By gamperl
