Two-way data binding in MVC

Technologies

  • TypeScript
  • Vue.js
  • Docker + Vue.js CLI + VSCode/Atom/vim/...

Lecture - Agenda

  • What is data binding and how to use it
  • History and concepts of databinding (two-way and one-way)
  • (well known) Frameworks supporting data binding
  • Introduction to TypeScript (as deep as required for the exercise)
  • Introduction to Vue.js (also as deep as required for the exercise)
  • Problems and stumbling blocks of databinding

See the lecture notes here or as PDF.

The slides are available here.

Assignment

Read the spec here or as PDF.

Part 1

  • Create a tiny registration form by using the Vue.js basics and display the created data in a second view fragment

Part 2

  • ICNDB-API Homepage
  • TypeScript hands-on
  • Display a different count of jokes
  • Replace the first and last name in all displayed jokes at once with data binding (performance)

Part 3

  • Implement a custom observer to understand the underlying concepts of Vue.js