← back to index

Vue Notes

Notes from learning Vue 1.x.

published May 14, 2016 tags #javascript #vue

~/posts/vue-guide $ cat post.md

/ LANG EN / 中文
/ THEME / /

Vue 01

  • v-if-else: v-if, v-else, and v-else-if can all go in a tag’s declaration. The element renders when the condition holds, otherwise it doesn’t. Useful for things like a login page that varies by time of day.

  • v-on: event handler

    • e.g. v-on:keyup="txtKeyup($event)".
    • Inside the keyup handler you can read this.srcElement.tagName, id, innerHtml. event.key ? event.key : "" prints which key was pressed.

  • The naming convention is Hungarian notation, e.g. btnOK.

computed: {
    priceInTax: {
        get: function () {
            return this.price * 1.08;
        },
        set: function (value) {
            this.price = value / 1.08;
        },
    },
}

  • A computed property is the same kind of thing as data or a method. In the template, {{ priceInTax }} returns the computed value.

    • Reading priceInTax calls get, assigning to it calls set.

  • watch

watch: {
    price: function (newVal, oldVal) {
        console.log(newVal, oldVal);
        this.priceInTax = Math.round(this.price * 1.08);
        this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
    },
}

(The API style is borrowed from Angular.)

Vue 02

  • Form binding with v-model

    • Bind multiple inputs to the same array and you get a set of checkboxes.

  • Toggling visibility with v-show

    • Controls whether the element shows.
    • e.g. v-show="result" — shows when result is truthy, hides otherwise.
    • An element hidden by v-show is still in the DOM.
      • In contrast, v-if/v-else-if only renders the branch that’s currently shown.

Vue 03 — radio buttons

  • A radio input is a single-choice control. When two radios share the same v-model, picking one deselects the other and writes the selected value back to the model.

Select boxes

  • Add multiple to the select tag for ctrl-click multi-select. The UX isn’t great.
  • Otherwise, bind the model to an array and you’re done.

Components

Most options you can pass to the Vue constructor also work on a component. data is the exception — it must be a function.

Vue.component("my-component", {
    template: "<span>{{ message }}</span>",
    data: {
        message: "hello",
    },
});

The above is wrong. So is this one:

var data = { counter: 0 };
Vue.component("simple-counter", {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    // Technically `data` is a function now and Vue won't warn,
    // but every component instance references the same data object.
    data: function () {
        return data;
    },
});

When the router switches, the old component really is destroyed — every mount triggers the ready lifecycle. But setInterval doesn’t know anything about your component; it’s a resource the component acquires on entry and has to release on exit, and that part has to be done by hand. So clearInterval belongs in the router’s deactivate or in beforeDestroy.

A lot of frameworks work this way. A desktop window that opens a database connection on init has the same shape: the framework can’t guess what the inverse of “open a database connection” is, so the close-window callback has to disconnect by hand.

← back to index