This is a draft cheat sheet. It is a work in progress and is not finished yet.
The Vue Instance
// main.js
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
}
})
// index.html
<div id="app">
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
Conditional and Loops
v-if [destroyed and re-created] |
<span v-if="seen"></span>
|
v-else |
<p v-if="inStock">In Stock</p> <p v-else>Out of Stock</p>
|
v-else-if |
<p v-if="type === 'A'">A</p> <p v-else-if="type === 'B'">B</p><p v-else>Not A/B</p>
|
v-show [edit CSS display: none] |
<h1 v-show="ok">Hello!</h1>
|
v-for |
<div v-for="item of items"></div>
|
|
|
Binding
v-bind |
<img v-bind:src="image" />
|
v-bind (short version) |
|
v-on |
<button v-on:click="reverseMessage">Reverse Message</button>
|
|
