Home / MAD2 / Week 4

Week 4 · Vue basics: instances, directives and reactivity

The one-minute story

By the end of this week you can:

• add Vue 2 to a page with one script tag and create an instance with el, data, methods, computed and watch;
• use {{ }} and the directives v-bind, v-on, v-model, v-if, v-show and v-for correctly;
• bind classes and styles in the object, array and ternary forms;
• choose between a computed property, a method and a watcher, and explain caching;
• predict what the template renders and what the console prints, including lifecycle hook order;
• explain reactivity caveats (adding properties, array index assignment) and fix them with Vue.set.

Words you need

Idea 1: What Vue is and how to add it

Vue is a progressive framework: you can use it on one corner of a normal HTML page, or build a whole application with it. In MAD2 you first use it the simple way, with a CDN script tag, and later (week 6) with the Vue CLI and .vue files.

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <button @click="count++">Clicked {{ count }} times</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
      new Vue({
        el: "#app",
        data: { message: "Hello Vue", count: 0 },
      });
    </script>
  </body>
</html>

How it works:

1. The browser loads Vue, which defines the global Vue.
2. new Vue({...}) creates an instance and mounts it on the element matching el (#app).
3. Vue reads the HTML inside #app as the template, finds {{ message }} and @click, and renders.
4. When you click, count++ changes data, and Vue updates only that text.

Idea 2: Interpolation and declarative rendering

{{ expression }} prints the value of any single JavaScript expression: a property, arithmetic, a ternary, a method call. It is text only, and it works only in the template (HTML text and attribute values never get {{ }}).

<div id="app">
  <p>{{ name }}</p>
  <p>{{ price * qty }}</p>
  <p>{{ qty > 5 ? "bulk" : "single" }}</p>
  <p>{{ name.toUpperCase() }}</p>
  <p>{{ items }}</p>
  <p v-text="name"></p>
  <p v-html="raw"></p>
</div>
<script>
  new Vue({
    el: "#app",
    data: { name: "pen", price: 10, qty: 3, items: [1, 2], raw: "<b>bold</b>" },
  });
</script>

Renders: pen, 30, single, PEN, the JSON text of the array (arrays and objects are printed as JSON), pen, and bold text (v-html inserts real HTML).

Idea 3: Directives

A directive is an attribute starting with v-. Its value is a JavaScript expression (except v-for and v-on, which have their own forms).

v-bind (shorthand :) and v-on (shorthand @)

<img v-bind:src="photo" :alt="caption" :disabled="busy">
<button v-on:click="save" @click.prevent="save">Save</button>

• :attr="expr" sets an HTML attribute from data. If the expression is false, null or undefined, the attribute is removed (so :disabled="false" enables the button).
• @event="handler" listens to a DOM event. The handler can be a method name (@click="save"), a call with arguments (@click="remove(item.id)") or a short statement (@click="count++"). Inside an inline handler, $event is the event.

Event modifiers (chain them after a dot):

v-model: two-way binding on form inputs

<input v-model="name">
<input v-model.trim="name">      <!-- strips spaces at both ends -->
<input v-model.number="age">     <!-- converts the text to a number -->
<input v-model.lazy="name">      <!-- updates on change (leaving the box), not on every key -->
<input type="checkbox" v-model="agree">             <!-- true / false -->
<input type="checkbox" v-model="chosen" value="A">  <!-- chosen is an array -->
<input type="radio" v-model="size" value="L">
<select v-model="city"><option>Chennai</option><option>Delhi</option></select>
<textarea v-model="notes"></textarea>

v-model is shorthand for two things: :value="name" (data to input) and @input="name = $event.target.value" (input to data). Typing updates name and changing name in code updates the box. I checked v-model.number and .trim in Vue 2: typing 42 stores the number 42, typing hi stores "hi".

Idea 4: Conditionals and lists

v-if, v-else-if, v-else and v-show

<p v-if="score >= 80">Distinction</p>
<p v-else-if="score >= 40">Pass</p>
<p v-else>Fail</p>
<p v-show="showHelp">Help text</p>

With score = 55 Vue renders only Pass. The v-else and v-else-if element must come immediately after a v-if element.

v-for: lists

<ul>
  <li v-for="(item, index) in items" :key="item.id">{{ index }}: {{ item.name }}</li>
</ul>
<span v-for="(value, key, i) in person">{{ i }}{{ key }}={{ value }}; </span>
<b v-for="n in 3">{{ n }}</b>

• Over an array: (item, index) in items.
• Over an object: (value, key, index) in obj (value first, then key).
• Over a range: n in 3 gives 1 2 3 (starts at 1, not 0).
• :key must be a unique, stable id (not the index when the list is reordered or items are deleted). It lets Vue move the right element instead of re-using the wrong one.
• Never put v-if and v-for on the same element; wrap with template v-for or filter with a computed property.

Running this in Vue 2: o = {a:1,b:2} with (v,k,i) in o prints 0a=1;1b=2;, and n in 3 prints 123.

<div id="app">
  <input v-model.trim="text" @keyup.enter="add" placeholder="new task">
  <button @click="add" :disabled="!text">Add</button>
  <ul>
    <li v-for="(t, i) in tasks" :key="t.id">
      <span :class="{ done: t.done }" @click="t.done = !t.done">{{ t.title }}</span>
      <button @click="tasks.splice(i, 1)">x</button>
    </li>
  </ul>
  <p v-if="tasks.length === 0">Nothing to do.</p>
  <p v-else>{{ remaining }} left</p>
</div>
<script>
  new Vue({
    el: "#app",
    data: { text: "", nextId: 1, tasks: [] },
    computed: {
      remaining() { return this.tasks.filter(t => !t.done).length; },
    },
    methods: {
      add() {
        if (!this.text) return;
        this.tasks.push({ id: this.nextId++, title: this.text, done: false });
        this.text = "";
      },
    },
  });
</script>

Idea 5: Class and style binding

:class and :style accept more than a string. Given the data:

data: {
  classObj: { is_active: true, completed: false },
  myClass: "is_active",
  status: true,
}

<div :class="classObj"></div>                       <!-- class="is_active" -->
<div :class="[myClass, { completed: status }]"></div> <!-- class="is_active completed" -->
<div class="base" :class="status ? 'on' : 'off'"></div> <!-- class="base on" -->
<div :style="{ color: 'red', fontSize: '14px' }"></div>

I ran these in Vue 2 and they render exactly the comments shown.

Idea 6: Computed, methods and watch

Three ways to run logic. They look similar but are used for different jobs.

new Vue({
  el: "#app",
  data: { counter: 0, first: "Ada", last: "Lovelace" },
  computed: {
    fullName() { return this.first + " " + this.last; },     // cached
    double() { return this.counter * 2; },
  },
  methods: {
    stamp() { return Date.now(); },                           // runs every call
  },
  watch: {
    counter(newVal, oldVal) {                                 // side effect
      console.log("counter changed from " + oldVal + " to " + newVal);
    },
  },
});

Facts proved by running Vue 2:

• Reading a computed property three times with unchanged data runs its function once.
• Changing data twice in a row (n = 2; n = 3) calls the watcher once, with old value 1 and new value 3, because updates are batched.
• A computed property is read-only unless you give it a get and a set.
• A watcher can be written { handler, deep: true, immediate: true }: deep watches nested changes, immediate also runs it once at start. To watch a nested key use a string: 'o.a'() {...} (and '$route.path'() for the router).

new Vue({
  el: "#app",
  data: { counter: 0 },
  computed: { computedValue() { return this.counter * 2; } },
  watch: {
    counter(newVal, oldVal) { console.log(`Counter changed from ${oldVal} to ${newVal}`); },
  },
  mounted() { setInterval(() => { this.counter++; }, 1000); },
});

Idea 7: Reactivity and its caveats

When you create an instance, Vue 2 walks through data and converts every property into a getter and setter (using Object.defineProperty). The getter records "this render used me"; the setter tells Vue "re-render". That only works for properties that exist when the instance is created.

Caveats (Vue 2 only) that I confirmed by running the code:

data: { arr: [1, 2, 3], o: { a: 1 } }

this.arr[0] = 99;          // data changes to [99,2,3] but the page does NOT update
this.arr.length = 1;       // data changes but the page does NOT update
this.o.b = 2;              // new property: o has b, but the page does NOT update

Vue.set(this.o, "b", 2);   // reactive new property (same as this.$set)
this.$set(this.arr, 0, 99);        // reactive index assignment
this.arr.splice(0, 1, 99);         // reactive too
this.o = { ...this.o, b: 2 };      // replace the whole object: reactive

• Array methods that Vue wraps and which do update the page: push, pop, shift, unshift, splice, sort, reverse.
• Declare every property you will use in data up front, even as null or "".
• Vue updates the page asynchronously in batches: many changes in one tick lead to one re-render. So right after this.m = "b" the element still shows the old text; use this.$nextTick(() => { ... }) to run after the update.

this.message = "changed";
console.log(this.$refs.p.textContent);        // still the OLD text
this.$nextTick(() => console.log(this.$refs.p.textContent));  // the NEW text

Template refs. Put ref="box" on an element, and this.$refs.box is the real DOM element (after mount). It is the Vue way to call focus() on an input: mounted() { this.$refs.box.focus(); }. Refs exist only after mounting, and they are not reactive.

In newer Vue 3: reactivity uses Proxy, so adding properties and arr[0] = x do work, and Vue.set is gone. The instance is made with Vue.createApp({...}).mount("#app"), there is the Composition API (ref, reactive), and beforeDestroy/destroyed are renamed beforeUnmount/unmounted. This course tests Vue 2.

Idea 8: The lifecycle

Every instance goes through the same stages. Vue calls your hook at each.

new Vue()
  |
beforeCreate   (data and methods do NOT exist yet)
  |  (Vue sets up data, computed, methods, watchers)
created        (data and methods work; no DOM yet)
  |  (find the template, compile it)
beforeMount    (just before the first render)
  |  (render, create elements, insert in page)
mounted        (this.$el is in the page; refs work)
  |
  |-- data changes -->  beforeUpdate  ->  (DOM re-rendered)  ->  updated   (repeats)
  |
  |-- vm.$destroy() / component removed
beforeDestroy  (still fully working: clean up here)
  |
destroyed      (watchers and listeners are removed)

new Vue({
  el: "#app",
  template: `<div>Status: {{message}} ETA: {{ETA}}</div>`,
  data: { message: "", ETA: 10 },
  beforeCreate() { this.message += "Creating,"; this.ETA -= 1; },
  created()      { this.message += "Created,";  this.ETA -= 1; },
  beforeMount()  { this.message += "Mounting,"; this.ETA -= 1; },
  mounted()      { this.message += "Mounted";   this.ETA -= 1; },
});

new Vue({
  el: "#app",
  data() { return { message: "Initial" }; },
  created() { console.log("Created Hook"); this.message = "Created Hook Called"; this.fetchData(); },
  mounted() { console.log("Mounted Hook"); },
  methods: {
    async fetchData() {
      const res = await new Promise(resolve => setTimeout(() => resolve("Data Loaded"), 1000));
      this.message = res;
      console.log("Data updated after fetch");
    },
  },
});

<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Change Message</button>
  <button @click="changeCount">Change Count</button>
</div>

new Vue({
  el: "#app",
  data() { return { message: "Hello" }; },
  beforeCreate() { console.log("Before Create: " + this.message); this.message = "Before Create"; },
  mounted() { this.message = "Mounted"; console.log("Mounted: " + this.message); },
  template: `<div>{{ message }}</div>`,
});

Idea 9: Templates in HTML and in strings

Two ways to give an instance a template:

<!-- 1. In the page: Vue reads the HTML inside #app (in-DOM template) -->
<div id="app"><p>{{ message }}</p></div>
<script>new Vue({ el: "#app", data: { message: "Hi" } });</script>

<!-- 2. As a string: the template option replaces what is inside #app -->
<div id="app"></div>
<script>
  new Vue({ el: "#app", data: { message: "Hi" }, template: "<p>{{ message }}</p>" });
</script>

The template option needs the full build of Vue (the CDN default, which includes the compiler). The .vue files of week 6 are compiled in advance, so they need no compiler at run time. One extra rule in in-DOM templates: HTML is case-insensitive, so write <my-comp> (kebab-case) and player-name="...", not <MyComp> or playerName.

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 1 papers