Vue.js notes

• Specify target element:

  <div id="vue-thing"></div>

• Create instance:

  new Vue({
    el: '#vue-thing',
    data: {},
    methods: {}
  })

• this refers to the Vue instance.
• data is proxied into methods.

• Use v-html:

  <div v-html="htmlLit"></div>

• and data:

  data: {htmlLit: <some literal html>}

• Security?

• Use handlebars:

  <p>{{ name }}</p>

• and data members:

  data: {
    name: 'Sigmund'
  }

• Use handlebars:

  <h1>{{ greet('Hi') }}<h1>

• and methods:

  methods: {
    greet: function(s) {return s + ', ' + this.name + '!'}
  }

TODO

• Use v-bind:

  v-bind:<attribute-name>="<data-name>" ... 

• Shortcut: : is a synonym for v-bind:.

• Use v-on with single Vue/JS statement:

  v-on:<event-type>="<statement>"

• or method w/parameters:

  v-on:<event-type>="<method-name>(p1, p2)"

• or method with event passed in as 1st param:

  v-on:<event-type>="<method-name>"

• event handling can be modified (prevent, once, etc.):

  v-on:<event-type>.<modifier>="<method-name>(p1, p2)"

• Shortcut: @ is a synonym for v-on:.