User Tools

Site Tools


Vue.js notes

Vue.js instance

Target what the Vue.js instance operates on

  • 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.

Outputing literal HTML

  • Use v-html:
    <div v-html="htmlLit"></div>
  • and data:
    data: {htmlLit: <some literal html>}
  • Security?

Binding content text

Static data

  • Use handlebars:
    <p>{{ name }}</p>
  • and data members:
    data: {
      name: 'Sigmund'

Computed data using methods

  • Use handlebars:
    <h1>{{ greet('Hi') }}<h1>
  • and methods:
    methods: {
      greet: function(s) {return s + ', ' + + '!'}

Computed data using computed properties


Binding attributes

  • Use v-bind:
    v-bind:<attribute-name>="<data-name>" ... 
  • Shortcut: : is a synonym for v-bind:.

Binding events

  • Use v-on with single Vue/JS statement:
  • or method w/parameters:
    v-on:<event-type>="<method-name>(p1, p2)"
  • or method with event passed in as 1st param:
  • event handling can be modified (prevent, once, etc.):
    v-on:<event-type>.<modifier>="<method-name>(p1, p2)"
  • Shortcut: @ is a synonym for v-on:.
vuejs/vue.js_notes.txt · Last modified: 2018/06/28 01:57 by mithat