Week 8 Labs: Vue.js Introduction (Vue 3)

• Vue 3 Introduction
  • Hello Vue 3 : created a vue app instance along with data, methods & computed options; used moustache syntax and event listeners.
  • Hello input : used v-model for 2 way binding for form inputs along with conditional rendering and event listeners.
  • Task List
    • Task List Display : used v-for for looping.
    • Task List Input : recorded user input and used v-for to loop & display the list.
  • Vue 3 summary : Vue template tags


• Shopping Cart Application
  • Cart with Vue 3 : Reactive Vue application
  • Cart with Vanilla JS : Compare with "Cart with Vue 3" code
  • Cart Validation : in Vue 3 showing error messages for invalid inputs
  • Cart watching : used the watch option in Vue 3 that watches data property and shows error messages for invalid inputs


• Product page : A single product page using Vue.js


• Random Dog API
  • Vue 3 : with API fetching
  • Vue 3 shortcuts : with API fetching

ITEC 2560-60: Web Client and Server Programming
Minneapolis Community and Technical College (MCTC), Minneapolis, Minnesota
Prof. Clara James, Fall 2020