Vue Cheat Sheet

Basic Vue structure

{{ var }} displays an escaped string.

<div class="app">
	<p>{{ title }}</p>
	<p>{{ sayHello() }}</p>
	<p><a href="{{ link }}">This link is not working: Vuejs cannot bind it.</a></p>
</div>

new Vue({
	el: '#app',
	data: {
		title: 'Hello World!',
		link: 'http://google.com'
	},
	methods: {
		sayHello: function() {
			return this.title; // returns a string
		}
	}
});

Rendering

v-bind

Tells Vuejs "Don't use the normal attribute (href), bind it

<a v-bind:href="link">Google</a>

v-once

v-once will not reload a component if it changes.

<!-- single element -->
<span v-once>This will never change: {{msg}}</span>
<!-- the element have children -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- component -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for directive -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

v-html

By default, Vuejs escapes html code. v-html renders html.

<p v-html="finishedLink"></p>

finishedLink: '<a href="http://google.com">Google</a>'

v-model

Title gets changed every time an input is read

<input v-model="title">

raphaelbadia/[INCOMPLETE - NOTHING TO SEE HERE].md