Vue Js Path

Requirements:

• HTML
• CSS (Flex , Grid , Position)
• JS
  • (Higher Order Function) From 71 To 78
  • Arrow Function
  • Destructuring
  • (DOM) From 86 To 101

  https://www.youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv

---

Vue JS :

Vue.js Crash Course 2024 - https://youtu.be/VeNfHj6MhgA?si=gsZzaIoXN2B1z25B

• 1- What Is Vue Js ?:
  • Single Page Application (SPA)?
  • Server-Side Rendering SSR
  • Why Vue ...?

---

• 2- Installing vuejs

  https://vuejs.org/guide/quick-start.html#creating-a-vue-application

  • CDN "overview"
  • Vue CLI "overview"
  • NPM "Creating a Vue Application"

---

• 3- First Component
  • What is Component?
  • What is Script tag ?
  • What is Template tag ?
  • What is Style tag?

---

• 4- The Style of building Components (overview) :
  • Option API
  • Composition API

---

• 5- Folders Structure (overview)

---

• 6- Template Syntax
  • Write HTML
  • Attribute Bindings

    https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings

  • Directives
    • v-if, v-else & v-else-if

      https://vuejs.org/guide/essentials/conditional.html

    • v-for

    https://vuejs.org/guide/essentials/list.html

    • v-bind
    • v-on

    https://vuejs.org/guide/essentials/event-handling.html

    • calss , style

    https://vuejs.org/guide/essentials/class-and-style.html

---

Every Section here you need to know how looks on Composition And Option API But The Main Focus Should on Composition

• 7- Reactivity
  • ref
  • reactive
• 8- computed

---

• 9- Forms & v-model

  https://vuejs.org/guide/essentials/forms.html

---

• Make A Project For example Todo List
  • Add Task
  • Edit Task
  • Delete Task
  • Done Task

---

• 10- Components

  https://vuejs.org/guide/components/registration.html

  • Registration
  • Props
  • Events
  • Slots
  • Provide / Inject
  • Async Components

---

• 11- Watchers

  https://vuejs.org/guide/essentials/watchers.html

---

• 12- * Lifecycle Hooks*

  https://vuejs.org/guide/essentials/lifecycle.html

---

• 13- composables

  https://vuejs.org/guide/reusability/composables.html

---

Projects:

https://www.youtube.com/watch?v=gUsBaB5ViAo&list=PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ&ab_channel=NetNinja

---

• 14- Different Topics

  • TypeScript with Composition API

    • https://vuejs.org/guide/typescript/composition-api.html

  • Vue Router

    • https://router.vuejs.org/
    • https://youtu.be/juocv4AtrHo?si=eZXR8CQmSptHY_00
    • https://youtu.be/UCI9dO4Vxvk?si=ZxjKE-e6-5jtuM_2

  • State Management - pinia

    • https://pinia.vuejs.org/
    • https://youtu.be/N5u49FSnlxc?si=194SsknceXq08EiZ
    • https://youtu.be/u0B9dysw29A?si=_D8BwZ234ugZw1Bs