Projects created from Udemy Course on Vue JS

Applications:

Notes App

Single Page application using the Star Wars API

Multi Page application using the Star Wars API and vue-router

Joke App using vuex library

Exercises:

• Creating and using a Vue instance
• Using Directives for reactive and conditional rendering
• Using v-for and v-if
• Using v-on for interactivity
• Creating and working with components and props
• V-model and computed properties
• Lifecyle hooks

Notes:

• A Vue instance accepts an options object that allows us to manipulate html and add reactivity through various Vue features.

• A Vue directive follows the v- pattern and allows us to add dynamic attributes to elements of the html.

• The v-if directive accomplishes conditional rendering.

• The v-for directive creates dynamic lists.

• V-on allows interactivity by binding instance methods to the click handler of elements.

• Components in Vue encapsulate HTML with Vue interactivity and create reusable code.

• V-models map data to pieces of HTML to allow two-way data binding,

• Computed properties use complex logic to return modified pieces of data.

• Lifecycle hooks like created, mounted, and updated allow vue instances to run specific code throughout its lifespan.

Creating vue project using a webpack template:

• Webpack - tool to launch a server to host our code and see edits of application in realtime

Command - vue init Example - vue init webpack-simple starbase And follow the instructions to install node modules