Quasar Framework Introduction for C++ develpoers
- 1. Quasar Framework By a C++ Programmer :) Saeed Dadkhah [email protected]
- 2. WhatisQuasar
- 3. Whatelse ● Huge library of components ● Utilities ● Hot reloading ● Platform detection ● Great documentation and support
- 4. WhatisVue.js ● Powerful front-end JavaScript Framework ● Can be used to add functionality to existing web pages (widgets) ● Or can be used to power an entire SPA(Single Page Application) ● A Vue.js SPA is made up of Vue Component Files ○ Template(For HTML) ○ Script (For data, methods, computed properties etc) ○ Style
- 5. Quick Look at a Module https://codesandbox.io/embed/elegant-almeida-telu9?fontsize=14&hide navigation=1&theme=dark
- 6. FolderStructure ● src/App.vue -> Main Vue component of application ● src/layouts/MainLayout.vue -> Everything surrounds application pages ● src/pages/Index.vue ● src/components -> All of Vue components go here ● src/router/routes.js -> Assign a path to a Vue component ● src/store -> Used by Veux
- 7. Vue.js Basics Let’s create a Todo list application ^_^
- 8. 1. Remove Image from Index.vue 2. Print a message in h5 element on the page using data() 3. Save and see hot reloading :) BindDatatotheView TextInterpolation
- 9. 1. Add an input element. 2. Use v-model to set the value of the message property. 3. Get rid of class. 4. Add padding TwoWay DataBinding with v-model v-modeldirective
- 10. 1. Add a Clear button 2. Add click event using @click 3. Clear message text on click 4. Call a method instead of clearing directly EventsandMethods - click @click event
- 11. 1. Add keyup event handler 2. Console.log event parameter to the handler 3. Clear the message if ESC pressed. 4. Exercise: Show an alert when Enter pressed. 5. Instead of keyup, use keyup.esc 6. Get rid of handleKeyUp function. Events- Keyboard @keyup event
- 12. 1. Set a border for the h5 element 2. Use v-show on h5 to show/hide the element based on the length of the message. Showingand Hidingelements usingv-showdirective V-show directive
- 13. 1. Use v-if instead of v-show in the previous code 2. What is the difference between v-show and v-if 3. Exercise: Use v-else to show a message whenever the message is empty. Conditional Renderingusing v-ifandv-else V-if & v-else directives
- 14. Try to create <p> element containing upper case text of the message. Computed Properties(1) What’s wrong with using methods?
- 15. Try to write the previous code using a computed property.. ComputedProperties(2) Just update the view if message changes
- 16. Add new paragraph containing the lower case of the message. Filters What is the difference between filters & c-properties?
- 17. In filters you just have access to the value passed to the filter function. Filters vsComputedproperties
- 18. ● In Vue.js directives start with v- ● Components can have custom directives. 1. Create autofocus directive 2. Explore more hook functions in https://vuejs.org/v2/guide/custom-directive.html Directives
- 19. ● In Vue, v-bind lets you bind an HTML attribute to a JavaScript expression. 1. Create a CSS class for error 2. Assign this CSS to the element whenever the message length is bigger than 22 characters. Using v-bind V-bind:class === :class How to add more conditions and classes?
- 20. ● We can use the v-for directive to render a list of items based on an array. Displaying listswithv-for
- 23. ChildComponents(1) 1. Create a child component named Task.vue 2. Move Task related code to Task.vue 3. Import the new Component
- 24. ChildComponents(2) 1. Use the newly imported component. 2. Check if the program is working properly
- 25. ChildComponents-PassingData tochildcomponents(3) 1. Add task prop to the Task Component. 2. Pass task as Task prop to the Task component! 3. Exercise- Pass index to the Task component.
- 26. ChildComponents-Slots(4) 1. Pass the name of the Task using slots
- 27. Let’s Create Awesome TODO app!
- 28. Pages and Routes 1. Create new application using $>quasar create 2. Rename index page to TodoPage.vue 3. Add new page named SettingsPage.vue 4. Add routing for Settings page. 5. Add page navigation to Sidebar (Drawer) 6. Add Icons using Material.io web site.
- 29. Add Navigation for Mobile 1. Add footer to the main layout. 2. Add q-tabs component with two items in it. 3. Replace q-tab with q-route-tab 4. Use to attribute to navigate to the desired page. 5. Exercise - Use v-for to clean up the code for q-route-tab generation and drawer links.
- 30. Display tasks in a list 1. Add a checkbox enabled list to Tasks page. 2. Add completed property to task objects. 3. Add class=”q-ma-md” to the Tasks page. 4. Make q-item clickable 5. @click -> make task (un)completed. 6. Add bg-green-1 class to q-item.
- 31. VUEX
- 32. What is VUEX ● Vuex is a State management pattern + library for Vue.js applications ● Store all of our data in one, centralised place. ● Components of our app can access the data from the Store using getters ● Components of our app can change the data in the Store by triggering actions and mutations that are contained in the store. ● Reactive - when the data in the Store changes, all components using that data will be updated.
- 33. Deleting a task without using Vuex
- 34. Deleting a task using Vuex
- 35. Setup a Vuex store ● Adding a Vuex Module ○ $ quasar new store tasks ● Import it to storeindex.js
- 36. What are vuex parts? single object contains all your application level state think of them as computed properties for stores The only way to actually change state in a Vuex store is by committing a mutation. Actions are similar to mutations, the differences being that: ● Instead of mutating the state, actions commit mutations. ● Actions can contain arbitrary asynchronous operations. What is namespaced: true?
- 37. Import Tasks to tasks store store/tasks/state.js Vue Extension
- 38. Change Task Array into an object structure ● Why?
- 39. Put task into a new child component ● Create new Component named Task.vue ● Move q-item portion of TodosPage to Task.vue ● Import Task in TodosPage ● Add task props to Task.vue ● Add id props to Task.vue
- 40. ADD NEW TASK
- 41. Add + Button to TodosPage
- 42. Add Dialog to TodosPage
- 43. Show Dialog whenever + button clicked
- 44. Move Dialog to new Component 1. Create New Child component named AddTaskDialog.vue 2. Move q-card code to this new component. 3. Import it in TodosPage.vue 4. Use it!
- 45. Add Close Button for Add Task Dialog
- 46. Design the form body 1. Add taskToSubmit data to the dialog data function 2. Add Task name input field. 3. Add Due date input field. 4. Add Due time input field.
- 47. Make Task name a required field
- 49. Add Task to the store 1. Add addTask action 2. Add addTask mutation 3. Commit addTask mutation in addTaskAction 4. Use mapActions to import addTask action
- 52. Use mapActions to import addTask action