Unlike official vue-router which is organized around URLs, Voie is organized around states. Voie-based apps are basically finite-state machines.

• URL pattern
• Vue component
• enter hook to populate state with data
• leave hook to cleanup things

1. 1. Vue.js for beginners @juliobitencourt
2. 2. JavaScript everywhere.
3. 3. Which path to choose?
4. 4. Julio Bitencourt Web Developer since 2000 @juliobitencourt
5. 5. Why Vue.js? You know. One more JavaScript Framework.
6. 6. Reactive Components for Modern Web Interfaces • Reactivity • Components • Modularity and more
7. 7. $ 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', });
8. 8. Databinding forget $('#mydiv p').text('foo')…
9. 9. <div id="app"> <h1>{{message}}</h1> </div> new Vue({ el: '#app', data: { message: 'Hello World' } }); Binding
10. 10. <div id="app"> <h1>{{message}}</h1> <input type="text" v-model="message"> </div> new Vue({ el: '#app', data: { message: 'Hello World' } }); Two-way binding
11. 11. <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
12. 12. <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('') }}
13. 13. Directives v- syntax
14. 14. 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
15. 15. 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>
16. 16. 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!"); } } });
17. 17. 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>
18. 18. Components Just don’t repeat yourself
19. 19. 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', });
20. 20. Computed Properties
21. 21. 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', });
22. 22. Where to go now?
23. 23. Beyond the basics • Routing - vue-router • Ajax - vue-resource • Modules handler (browserify, webpack, duo.js) Check out the docs

• NPM downloads: 382,184 ytd, ~52k/month current
• GitHub Stars: 11,357 current

Repo Activity

• Releases: 54 ytd (from 0.11.5 to 1.0.12, including alpha/beta/rc releases)
• Commits: 1,023 ytd
• Issues Closed: 1,014 ytd
• Pull Requests Merged: 69 ytd from 43 contributors

Vuejs.org

• Page views: 3,761,728 ytd
• Unique visitors: 363,365 ytd
• 30 Day Active Users: 76,090 current