# Vue Sintaxis

# Básicos

:dissable deshabilita.
class="d-none" oculta la etiqueta.

# v-model

# v-bind / :

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- abreviado -->
<a :href="url"> ... </a>

# v-on / @click

Vue.js @click (opens new window)

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- abreviado -->
<a @click="doSomething"> ... </a>

# v-for

Vue.js v-for (opens new window)

<div v-for="(item, index) in items" :key="index">
    {{ index }}: {{ item.name }}
</div>

# v-if / v-show

Vue.js v-if (opens new window)

Aquí veremos como mostrar/ocultar un botón en función de una variable booleana

<button v-show="this.editar === true" 
    @click.prevent="actualizarProducto(producto)" 
    class="btn btn-primary">Editar
</button>
<button v-show="this.editar === false" 
    @click.prevent="agregarProducto(producto)" 
    class="btn btn-primary">Guardar
</button>

# Como modificar una variable booleana

Con this.editar = !this.editar invertimos el booleano.

<button @click.prevent="obtenerProductoID( item.id );
                        this.editar = !this.editar;" 
    class="btn btn-primary">Editar
</button>

data() {
    return {
        editar: false,
}
``