Abbreviation and event modifier for v-on of Vue instruction event modifier:
. stop prevents bubbling
. prevent block default events
. capture use event capture mode when adding event listeners
. self triggers the callback only when the event is triggered by the element itself (for example, not a child element)
. once event is triggered only once

v-model of Vue instruction and HTML code structure of two way data binding simple calculator case

<div id="app">

    <input type="text" v-model="n1">

    <select v-model="opt">

      <option value="0">+</option>

      <option value="1">-</option>

      <option value="2">*</option>

      <option value="3">÷</option>

    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" v-on:click="getResult">

    <input type="text" v-model="result">

  </div>

Vue instance code:

// Create Vue instance to get ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        n1: 0,

        n2: 0,

        result: 0,

        opt: '0'

      },

      methods: {

        getResult() {

          switch (this.opt) {

            case '0':

              this.result = parseInt(this.n1) + parseInt(this.n2);

              break;

            case '1':

              this.result = parseInt(this.n1) - parseInt(this.n2);

              break;

            case '2':

              this.result = parseInt(this.n1) * parseInt(this.n2);

              break;

            case '3':

              this.result = parseInt(this.n1) / parseInt(this.n2);

              break;

          }

        }

      }

    });

Using styles in Vue using class style arrays

< H1: class = "{Red: true, italic: true, active: true, thin: true}" > this is an evil H1</h1>

1. Use ternary expression in array

    < H1: class = "['Red ',' thin ', isactive?' active ':']" > this is an evil H1</h1>

1. Nested objects in array

    < H1: class = "['Red ','Thin', {'active': isactive}]" > this is an evil H1</h1>

1. Direct use object

    < H1: class = "{Red: true, italic: true, active: true, thin: true}" > this is an evil H1</h1>

Use inline style

1. Pass directly on the element :style Writing style object

    <h1 :style="{color: 'red', 'font-size': '40px'}">It's a good one H1</h1>

1. Defining style objects to data , and references directly to :style in

- stay data Define style on:

    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }

- In the element, the style object is applied to the element in the form of attribute binding:

    <h1 :style="h1StyleObj">It's a good one H1</h1>

1. stay :style Multiple references through array in data Style objects on

- stay data Define style on:

    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
            h1StyleObj2: { fontStyle: 'italic' }
    }

- In the element, the style object is applied to the element in the form of attribute binding:

    <h1 :style="[h1StyleObj, h1StyleObj2]">It's a good one H1</h1>