Alex Kyriakidis
Author - Educator - Consultant
Introduction to Vue.js
Who Am I?
Alex Kyriakidis
- Laravel & Vue.js developer and consultant
- Technical writer, author of The Majesty of Vue.js
- Open source enthusiast
What is Vue.js?
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.
Vue is focused on the view layer only and it can be used as a library in any project. Though, it is a full-blown framework, perfectly capable of building complex Single Page Applications.
adsf
Vue.js Statistics
Vue.js Statistics
- NPM downloads: 1,943,567 total, 1,531,217 YTD (up from 382,184 in 2015, +300%)
- Core repo GitHub stars: 37,664 total, ~26,000 YTD (up from ~7,600 in 2015, +240%)
- vuejs.org page views: 21,424,759 YTD (up from 3,761,728 in 2015, +470%)
- vuejs.org monthly active users: 358,405 (up from 77,836 in 2015, + 360%) Side note: 42% of user sessions are from China.
- Chrome DevTools extension weekly active users: 84,098 (no prior year stats)
Why should I use it?
Because it will make your life easier!
But wait, doesn't Vue suit small projects only?
Vue is a Progressive Framework: the key is that we can scale up the framework’s complexity incrementally, only when the project’s inherent complexity demands it.
Let's Get Started
Data Binding
Directive: v-model
Using jQuery
<html>
<head>
<title>Hi Friend</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hi</h1>
<input id="message">
</div>
<script type="text/javascript">
$('#message').on('keyup', function(){
var message = $('#message').val();
$('h1').text(`Hi ${message}`);
})
</script>
</body>
</html>Using Vue
<html>
<head>
<title>Hi Friend</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Hi {{name}}</h1>
<input v-model="name">
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'Alex'
}
})
</script>
</body>
</html>Computed Properties
Computed Properties
<html>
<head>
<title>Hi Friend</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Hi {{name}}, your are {{characteristic}}.</h1>
<input v-model="name">
<input v-model="age">
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'Alex',
age: 23
},
computed: {
characteristic(){
return (this.age < 65) ? 'young' : 'old'
}
}
})
</script>
</body>
</html>Conditional Rendering
Directives:
- v-if
- v-else
- v-else-if
- v-show (the element will always be rendered)
Conditional Rendering
<html>
<head>
<title>Hi Friend</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="name">Hi {{name}}</h1>
<h1 v-else>Type your name so I can say hi.</h1>
<input v-model="name">
</div>
<script>
new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>List Rendering
Directive: v-for
List Rendering
<html>
<head>
<title>Animals</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Animals:</h1>
<ul>
<li v-for="animal in animals">{{ animal.name }}</li>
</ul>
<h2>Equivalent</h2>
<ul>
<li v-for="animal in animals" v-text="animal.name"></li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
animals: [
{"name": "Crocodile"},
{"name": "Bobcat"},
{"name": "Elephant"},
{"name": "Bandicoot"},
{"name": "Barracuda"}
]
}
})
</script>
</body>
</html>Event Handling
Directive: v-on, shorthand: '@'
Event Handling
<html>
<head>
<title>Hi Friend</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="name">Hi {{name}}</h1>
<h1 v-else>Type your name so I can say hi.</h1>
<input v-model="name">
<button @click="clear">Clear</button>
</div>
<script>
new Vue({
el: '#app',
data:{
name: ''
},
methods: {
clear () {
this.name = ''
}
}
})
</script>
</body>
</html>Components 101
Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.
// register
Vue.component('my-component', {
template: '<div>My horse is amazing!</div>'
})
// create a root instance
new Vue({
el: '#example'
})Components 101
<div id="example">
<div>My horse is amazing!</div>
</div>Source
Output
<div id="example">
<my-component></my-component>
</div>Components 101
<html>
<head>
<title>Amazing Thing</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<amazing thing="horse"></amazing>
<amazing thing="dog"></amazing>
<amazing thing="kid"></amazing>
</div>
<template id="amazing-template">
<div>
My {{thing}} is amazing!
<button @click="likes++">Like ({{likes}})</button>
<hr>
</div>
</template>
<script>
// register
Vue.component('amazing', {
props: ['thing'],
template: '#amazing-template',
// data must be a function
data () {
return {
likes: 0
}
}
})
// create a root instance
new Vue({
el: '#app'
})
</script>
</body>
</html>Todo Example
<html>
<head>
<title>Amazing Thing</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
<h1>Todos</h1>
<!-- todos list -->
<ul class="list-group">
<li v-for="todo in todos" class="list-group-item">
<todo :todo="todo"></todo>
</li>
</ul>
<!-- add new -->
<h3>Add new</h3>
<div class="row">
<div class="col-sm-8">
<input v-model="newTodo" class="form-control">
</div>
<button @click="saveTodo" class="btn btn-primary col-sm-4">Add</button>
</div>
</div>
<template id="todo-template">
<div>
{{todo}}
<button v-if="!done" @click="done=true" class="btn btn-default">
Done
</button>
<span v-else class="glyphicon glyphicon-ok"></span>
</div>
</template>
<script>
Vue.component('todo', {
props: ['todo'],
template: '#todo-template',
// data must be a function
data () {
return {
done: false
}
}
})
// create a root instance
new Vue({
el: '#app',
data: {
todos: [
'Learn JavaScript.',
'Learn Vue.js.',
'Build something awesome.',
'Bathe horse.'
],
newTodo:''
},
methods: {
saveTodo(){
this.todos.push(this.newTodo)
this.newTodo = ''
}
}
})
</script>
</body>
</html>Ecosystem
Vue Devtools
Supports time travel with Vuex
Ecosystem
Is anyone actually using it in production?
Ecosystem
github.com/vuejs/ vue-router
github.com/vuejs/ vuex
github.com/vuejs/ vue-cli
github.com/vuejs/ vue-devtools
github.com/vuejs/ vue-rx
Routing
Flux State
CLI Generator
Devtools
Touch Events
Observables
Official support for practically required libs (like for routing and state management)
Ecosystem
Weex: A framework for building Mobile cross-platform UI
(Developed by Alibaba)
Questions?
Introduction to Vue.js
By Alex Kyriakidis
