Client-side programming

This chapter goes through the basics of the JavaScript programming inside the Web browser environment.

• 3-1 Background
  • Document tree manipulation vs. MVVM approach
• 3-2 Vue basics
  • Loading Vue library from CDN
  • Data properties and reactivity
  • Template syntax: moustache {{ }}, attribute binding v-on:attr, style binding
  • Computed properties
• 3-3 Dynamic structure in template
  • Conditional rendering: v-if and others
  • List rendering: v-for
• 3-4 Events, methods and component lifecycle
  • asynchronous function calls
  • UI event handling, @event
  • Component methods
  • JavaScript timers, setInterval, setTimeout
  • Component lifecycle hooks, created and others
• 3-5 Forms controls and bi-directional binding
  • Using HTML built-in form controls
  • v-model and bi-directional binding
• 3-6 Components: motivation and common features
  • reuse components
  • organize a web app as a hierarchy of components
  • properties / attributes, event, v-model, slots
• 3-7 Vue projects and build tools
  • intro to Node.js, node project, package.json
  • Vite, build tools
  • Starter project and SFC
• 3-8 Defining your own components
  • define prop
  • bi-directional binding
  • emit event

Here are some useful online reference for this chapter.

• Vue.js official site: guide and API reference for Vue 3
• Node.js official site
• NPM registry, the largest JavaScript library registry
• The build tool Vite that we use in second half of the chapter

Todo: multiple html, public folder in Vite