Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Vue js for beginner

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
An Introduction to Vuejs
An Introduction to Vuejs
Wird geladen in …3
×

Hier ansehen

1 von 34 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Vue js for beginner (20)

Anzeige

Aktuellste (20)

Vue js for beginner

  1. 1. Vue JS A Progressive Framework @iamcsk90
  2. 2. What is Vue JS ?
  3. 3. • A Progressive framework • Build for User Interface • Component Driven • Many features that got inspired from popular frameworks in industry, which helped to improve framework’s performance and development.
  4. 4. Possibilities with Vue Development
  5. 5. • Desktop application with the help of Electron • Universal UI rendering with help of nuxtjs • Complete web framework with help of Vuex Vue-Router axious / Fetch Element UI, Semantic , Boostrap • Good support for mobile with below UI Kit Mint UI Onsen Vonic
  6. 6. Best Features
  7. 7. • Computer Properties and Watcher • Reactive • Style and Classname bindings • Conditional renderings and Listing helpers • Mixins and Service • Properties • Unit Test
  8. 8. • Content Distribution with Slot • Dynamic Components • Async Components
  9. 9. Content Distribution ( transclusion , Template helper, Outlet )
  10. 10. Vue Slot Vue’s slot feature provides the ability distribute boiler content with specific scope variable. Slot almost provides the ability to accomplish template helper’s work such as partial outlet transclusion Example .
  11. 11. Computer property and watch
  12. 12. var vm = new Vue({ el: '#demo', data: { firstName: 'Kirubha', lastName: 'Srini' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) Welcome {{ name }} Welcome Kirubha Srini! Demo
  13. 13. var vm = new Vue({ el: '#demo', data: { firstName: 'Kriubha', lastName: 'Srini', fullName: 'Kirubha srini' }, watch: { firstName: function (val) { console.log(' firstname changes '); this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) Welcome Kirubha Srini! Demo Kirubha Srini <div id="demo"> Welcome {{ fullName }} ! <br/> <input v-model="firstName"> <input v-model="lastName"> </div> Reative
  14. 14. Classname and style binding
  15. 15. <div class="static" v-bind:class="{ active: isActive}"> </div> data: { isActive: true } <div class="static" v-bind:style="{ color:color} ”> </div> data: { color:’red’ } Classname binding Style binding
  16. 16. Reactivity with binding
  17. 17. DOM User Model
  18. 18. Singlefile Component
  19. 19. <style scoped> .user { display:’inline’ } </style> <template> <div id="user"> {{ name }} </div> </template> <script> export default { name: "", data: function() { return { name: ‘Good thoughts’ } } } </script> Template Script Style
  20. 20. Reusability with Components
  21. 21. Profile page CSK Frontend CSK Frontend Monkey Frontend Srini Frontend Users Listing User Component chandruaskutty@icloud.com 91 9789891669 at
  22. 22. Dynamic Component
  23. 23. Dynamic component is a kind of helper which helps to switch between different types of components. Example new Vue({ el: 'body', data: { currentView: 'manage-posts' } }) Vue.component('manage-posts', { template: '#manage-template', }) Vue.component('manage-posts', { template: '#manage-template', }) Manage-post View Create-post View ( On value change )
  24. 24. Asynchronous Component
  25. 25. const AsyncComponent = () => ({ component: new Promise((resolve, reject) => { setTimeout(() => { resolve(NumberBoxComponent) }, 1000) }), loading: LoadingComponent, error: ErrorComponent, delay: 1 }) const NumberBoxComponent = { name: 'number-box', template: '#number-box', } Demo Component Resolving Component
  26. 26. Component Communications
  27. 27. Parent component Child component Passing Property Emit event
  28. 28. Vuex Communications
  29. 29. Component Mutations Dispatch action Getter Global Store State Actions
  30. 30. Mutations Getter State Actions Module to persist global data Portion to define global getter actions Block to define business and middleware logic Place to mutate global state
  31. 31. Vue & React
  32. 32. • Component Driven • Virtual Dom • View Layer build especially for User Interface • Reactivity Similarity
  33. 33. • 19kb min • Events • Single File Component (JS , Script, Style ) Difference • 62.21 kb min • Synthetic events • JS Driven Component
  34. 34. Thank You https://twitter.com/iamcsk90

×