Downloaded 40 times
Uploaded byChandrasekar G
Vue js for beginner
Vue JS is a progressive framework for building user interfaces. It uses a component-driven approach and features like reactivity and computed properties that make it possible to build desktop, mobile, and web applications. Some key features include reactive data binding, conditional rendering, mixins, slots for content distribution, and Vuex for global state management between components. Asynchronous and dynamic components add flexibility. Vue shares similarities with React in using virtual DOM and components but differs in file structure and size.
Vue js for beginner
- 1. Vue JS A ProgressiveFramework @iamcsk90
- 2. What is VueJS ?
- 3. • A Progressiveframework • 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.
- 5. • Desktop applicationwith 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.
- 7. • Computer Propertiesand Watcher • Reactive • Style and Classname bindings • Conditional renderings and Listing helpers • Mixins and Service • Properties • Unit Test
- 8. • Content Distributionwith Slot • Dynamic Components • Async Components
- 9. Content Distribution ( transclusion, Template helper, Outlet )
- 10. Vue Slot Vue’s slotfeature 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.
- 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. 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.
- 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.
- 17.
- 18.
- 19. <style scoped> .user { display:’inline’ } </style> <template> <divid="user"> {{ name }} </div> </template> <script> export default { name: "", data: function() { return { name: ‘Good thoughts’ } } } </script> Template Script Style
- 20.
- 21. Profile page CSK Frontend CSK Frontend Monkey Frontend Srini Frontend Users Listing UserComponent chandruaskutty@icloud.com 91 9789891669 at
- 22.
- 23. Dynamic component isa 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.
- 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.
- 27. Parent component Childcomponent Passing Property Emit event
- 28.
- 29.
- 30. Mutations Getter State Actions Module to persistglobal data Portion to define global getter actions Block to define business and middleware logic Place to mutate global state
- 31.
- 32. • Component Driven •Virtual Dom • View Layer build especially for User Interface • Reactivity Similarity
- 33. • 19kb min •Events • Single File Component (JS , Script, Style ) Difference • 62.21 kb min • Synthetic events • JS Driven Component
- 34.