Cacher is the code snippet organizer for pro developers

<!-- 
  special if you want to use a non-escaped html tag 
  finishedLink:'<a href="http://www.test.de">Test</a>',
-->
<p v-html="finishedLink"></p>

<!-- binds certain data attribute from vue-object to input -->
<input type="text" v-model="wanna">

<!-- on click, full and  short version -->
<button v-on:click="showAlert">Show Alert</button>
<button @click="value += 5">Add 5</button>

<!-- keydown listener, other just listens if its enter -->
<input type="text" v-on:keydown="listenKeyDown">
<input type="text" v-on:keydown.enter="value = $event.target.value">

<!-- mousemove, stopPropagation child (short version) -->
<p v-on:mousemove="updateCoordinates">
  {{x}} / {{y}}
  <span v-on:mousemove.stop="">DEAD SPOT</span>
</p>

<!-- clickHandler, switch classes -->
<p :class="changeClasses"  @click="attachRed = !attachRed">{{ output }}</p>

<!-- 
  can be of data attributes, or a function called, 
  vue.js goes through the whole tree
  -->
<div class="test" :style="myStyle"></div>

<!-- 
  class comes for eg. from data attributes
    data: {
    color: 'green'...
  class red can be attached conditionally like that
    data: {
    attachRed: false...  }
    computed: {
      changeClasses: function() {
      	return {
        	red: this.attachRed,
          green: !this.attachRed
        }...    -->
<div class="test" :class="[color, {red: attachRed}]"></div>


<!-- two input fields adopt style -->
<div class="test" :style="[{backgroundColor:color}, {height: width+'px'}]"></div>
<input type="text" v-model="color">
<input type="text" v-model="width">

<li v-for="(name, index) in array">{{ name }} ({{ index }})</li>
<li v-for="(value, key, index) in myObject">{{ key }}: {{ value}}, ({{ index }})</li>

<li v-for="value in testData">
  <template v-if="Array.isArray(value)">
    <div v-for="element in value">
      {{ element }}
    </div>
  </template>
  <template v-else>
    {{ value }}
  </template>
</li>

  <!-- condition, tag disappears from DOM -->
  <p v-if="show">Can you see me</p>
  <p v-if-else="maybeShow">now you see me</p> <!-- NEW in version 2.1-->
  <p v-else>now you see me</p>
  
  <!-- just hides the element -->
  <p v-show="show">Do you see also me?</p>