Beato Bongco
Head of Operations + UI Engineer for insynchq.com
It's a Vuetiful World
WTF is Vue?
-
Vue is ❤️️
- Progressive framework for building user interfaces
- Build SPA's + have UI change according to data
- https://github.com/beatobongco/vuetiful-world
WTF is progressive?
Not a monolith
Progressive?
- designed to be incrementally adoptable.
- vue - view layer
- vuex - centralized state manager
- vue-router
- ...and so many more!
-
https://github.com/vuejs/awesome-vue
"Another framework? Who cares?" or why I personally think you should use Vue
You just wanna get started. So let's do this!
Fire up your code editors
Import vue
<!DOCTYPE html>
<html>
<head>
<title>It's a Vuetiful World!</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</body>
</html>
Hello, world!
...
<div id="app">
<p>It's a {{ message }} world!</p>
</div>
...
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: "It's a Vuetiful World!"
}
})
</script>Try changing app.message in console!
Directives
...
<div id="app">
<p>It's a <span v-bind:title="message">{{ message }}</span> world!</p>
</div>
...
v- prefixed, apply special reactive behavior to DOM
Conditionals
...
<div id="app">
<p>It's a <span v-bind:title="message">{{ message }}</span> world!</p>
<p v-if="message === 'Vuetiful'">Yes it is!</p>
</div>
...Loops
...
<div id="app">
<div v-for="message in messages">
<p>It's a <span v-bind:title="message">{{ message }}</span> world!</p>
<p v-if="message === 'Vuetiful'">Yes it is!</p>
</div>
</div>
...
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
messages: ['beautiful', 'Vuetiful', 'sexy']
}
})
</script>
...
app.messages.push('Vuetiful')Try this in your console....
Handling events, defining methods
...
<div id="app">
<div v-for="message in messages">
...
</div>
<input type="text" v-model="newMessage" v-on:keyup.enter="addMessage">
<button v-on:click="addMessage">Add message</button>
</div>
...
<script type="text/javascript">
...
methods: {
addMessage: function () {
this.messages.push(this.newMessage)
}
}
...
</script>
...
Check out v-model! Two-way binding made EZ.
Computed Properties + Watchers
...
<p>
<small v-if="isTyping">{{now}} You were typing '{{newMessage}}' weren't you?</small>
</p>
...
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
...
isTyping: false,
msgTimeout: null,
},
...
computed: {
now: function () {
return new Date().toString().split(' ').slice(0, 4).join(' ') + ':'
}
},
watch: {
newMessage: function (m) {
this.isTyping = true
clearTimeout(this.msgTimeout)
this.msgTimeout = setTimeout(function () {
app.isTyping = false
}, 1500)
}
}
})
</script>
</body>
</html>
Class bindings
...
<head>
...
<style type="text/css">
.active {
outline: none;
border: 2px solid tomato;
}
</style>
</head>
<body>
...
<input type="text" ... v-bind:class="{ active: isTyping }">
...
</body>
...
You can bind style too!
...
<div id="app">
...
<button v-on:click="addMessage" v-bind:style="styleObject">Add message</button>
...
</div>
...
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
...
styleObject: {
textTransform: 'uppercase',
fontWeight: '600'
}
},
...
})
</script>
...
It's that simple!
Just learn as you go. Add modules and shit as you need to. Learn about components later on when your app is bigger.
Vue grows with you!
Thanks for listening!
It's a Vuetiful World
By Beato Bongco
