Update for 22-04-22 14:15

tech/vue.js.wiki

@@ -46,4 +46,74 @@ only be used as getters
 === v-if ===
 
 `v-if` is used to conditionally render a block. The block is only rendered if
-the argument is truthy
+the argument is truthy. For example,
+
+`<h1 v-if="awesome">Thats cool</h1>`
+
+This will render if `awesome` is truthy.
+
+=== v-else ===
+
+`v-else` is used with `v-if` to demonstrate an if-else block. It must be placed
+in a tag after a `v-if`. It takes no argument.
+
+=== v-else-if ===
+
+`v-else-if` is an `else if` statement from any other language. It can be
+chained multiple times.
+
+== Event handling ==
+
+Vue can handle events that occur on certain tags in the DOM. This is done with
+the `v-on` directive, or shorthand, `@`.
+
+=== inline ===
+
+Used for simple cases. For example,
+
+{{{
+<button @click="count++">Add 1</button>
+<p>Count is: {{ count }}</p>
+  }}}
+
+=== method handler ===
+
+Calls a method to do complex logic
+
+{{{
+<button @click="greet">Greet</button>
+  }}}
+
+Vue component
+
+{{{
+methods: {
+    greet(event){
+        alert('Hello!')
+    }
+}
+  }}}
+
+
+=== Event modifiers ===
+
+Sometimes we want to call some modifier on an event. This can be done with a
+`.modifier` syntax on the `v-on` call. The list of modifiers that are valid
+include
+
+* `.stop`
+* `.prevent`
+* `.self`
+* `.capture`
+* `.once`
+* `.passive`
+
+== v-model ==
+
+`v-model` allows us to bind some value in the DOM to some value in the
+component in two directions. This means updates in the DOM update the component
+state, and vice versa.
+
+`<input v-model="input">` will update the state of `this.input`.
+
+