Mithat Konar (the wiki)

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Vue.js notes ======

===== Vue.js instance =====
==== Target what the Vue.js instance operates on ====
  * Specify target element: <code html><div id="vue-thing"></div></code>
  * Create instance: <code javascript>new Vue({
  el: '#vue-thing',
  data: {},
  methods: {}
})</code>
  * ''this'' refers to the Vue instance.
  * data is proxied into methods.

===== Outputing literal HTML =====
  * Use ''v-html'': <code html><div v-html="htmlLit"></div></code>
  * and data: <code javascript>data: {htmlLit: <some literal html>}</code>
  * Security?

===== Binding content text =====

==== Static data ====

  * Use handlebars: <code html><p>{{ name }}</p></code>
  * and data members: <code javascript>data: {
  name: 'Sigmund'
}</code>

==== Computed data using methods ====
  * Use handlebars: <code html><h1>{{ greet('Hi') }}<h1></code>
  * and methods: <code javascript>methods: {
  greet: function(s) {return s + ', ' + this.name + '!'}
}</code>

==== Computed data using computed properties ====
TODO
===== Binding attributes =====

  * Use ''v-bind'': <code html>v-bind:<attribute-name>="<data-name>" ... </code>
  * Shortcut: '':'' is a synonym for ''v-bind:''.

===== Binding events =====

  * Use ''v-on'' with single Vue/JS statement: <code html>v-on:<event-type>="<statement>"</code>
  * or method w/parameters: <code html>v-on:<event-type>="<method-name>(p1, p2)"</code>
  * or method with event passed in as 1st param: <code html>v-on:<event-type>="<method-name>"</code>
  * event handling can be [[https://vuejs.org/v2/guide/events.html#Event-Modifiers|modified]] (prevent, once, etc.): <code html>v-on:<event-type>.<modifier>="<method-name>(p1, p2)"</code>
  * Shortcut: ''@'' is a synonym for ''v-on:''.