I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)

1. Vue.js for beginners
@juliobitencourt

2. JavaScript everywhere.

4. Which path to choose?

5. Julio Bitencourt
Web Developer since 2000
@juliobitencourt

6. Why Vue.js?
You know. One more JavaScript Framework.

7. Reactive Components for
Modern Web Interfaces
• Reactivity
• Components
• Modularity
and more

8. $ npm install vue
$ bower install vue
or just CDN
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<div id="app">
</div>
new Vue({
el: '#app',
});

9. Databinding
forget $('#mydiv p').text('foo')…

10. <div id="app">
<h1>{{message}}</h1>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
Binding

11. <div id="app">
<h1>{{message}}</h1>
<input type="text" v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
Two-way binding

12. <div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
Lists

13. <span>This will never change: {{* msg }}</span>
Interpolations
One-time interpolation
<span>{{{ raw_html }}}</span>
Raw HTML
<div id="item-{{ id }}"></div>
HTML Attributes
JavaScript Expressions
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

14. Directives
v- syntax

15. Special attributes with the v- syntax.
A directive’s job is to reactively apply special behavior
to the DOM when the value of its expression changes.
You could pass an expression or a filter

16. Directives
<p v-show="greeting">Hello!</p>
<a v-bind:href="url"></a>
<!-- full syntax -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- shorthand -->
<button :disabled="someDynamicCondition">Button</button>

17. DOM events
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
<form action="done.html" v-on:submit.prevent="myMethod">
<button type="submit">Click here!</button>
</form>
<!-- shorthand -->
<form action="done.html" @submit.prevent="myMethod">
new Vue({
el: '#app',
methods: {
myMethod: function() {
console.log("Hi there!");
}
}
});

18. Conditional Rendering
<p v-if=“votes > 1000”>Popular!</p>
<a v-else=“doSomething”>Please vote</a>
<p v-show=“votes > 1000”>Popular!</p>
<a v-else=“doSomething”>Please vote</a>

19. Components
Just don’t repeat yourself

20. Create reusable components
<!-- Your App -->
<div id="app">
<counter header="Up"></counter>
<counter header="Down"></counter>
</div>
<!-- The template -->
<template id="counter-template">
<h1>{{ header }} {{ count }}</h1>
<button @click="count += 1">Click me!</button>
</template>
Vue.component('counter', {
template: '#counter-template',
data: function() {
return { count: 0 }
}
});
new Vue({
el: '#app',
});

21. Computed Properties

22. Encapsulate complex logic
<!-- The template -->
<template id="counter-template">
<h1>{{ header }} {{ count }} {{ status }}</h1>
<button @click="count += 1">Click me!</button>
</template>
Vue.component('counter', {
template: '#counter-template',
data: function() {
return { count: 0 }
},
computed: {
status: function() {
return this.count > 10 ? 'Good!' : 'Normal';
}
}
});
new Vue({
el: '#app',
});

23. Where to go now?

24. Beyond the basics
• Routing - vue-router
• Ajax - vue-resource
• Modules handler (browserify, webpack,
duo.js)
Check out the docs

25. Thanks ;)
@juliobitencourt