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