Curso de Vue.js ADC

# Essentials

# Expresiones (interpolación)

<div id="app">
  <p>I have a {{ product }}</p>
  <p>{{ product + 's' }}</p>
  <p>{{ isWorking ? 'YES' : 'NO' }}</p>
  <p>{{ product.getSalePrice() }}</p>
</div>

# Directivas

# Condicionales

v-if & v-else Element inserted/removed based on truthiness:

<p v-if="inStock">{{ product }}</p>
<p v-else-if="onSale">...</p>
<p v-else>...</p>

v-show Toggles the display: none CSS property:

<p v-show="showProductDetails">...</p>

# Binding

v-bind

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

Two-way data binding:

<input v-model="firstName" >

v-model.lazy="..." // Syncs input after change event
v-model.number="..." // Always returns a number
v-model.trim="..." // Strips whitespace

# List Rendering

v-for

<li v-for="item in items" :key="item.id">
   {{ item }}
</li>

To access the position in the array:

<li v-for="(item, index) in items">...

To iterate through objects:

<li v-for="(value, key) in object">...

Using v-for with a component:

<cart-product v-for="item in products"
:product="item" :key="item.id">

# Actions / Events

v-on Llamar al método addToCart:

<button v-on:click="addToCart">...</button>
<!-- shorthand -->
<button @click="addToCart">...</button>

Se pueden pasar argumentos:

<button @click="addToCart(product)">...

Para evitar el comportamiento predeterminado (por ejemplo, recarga de página):

<form @submit.prevent="addProduct">...

Solo se dispara una vez:

<img @mouseover.once="showImage">...

.stop Detener toda propagación de eventos

.self Solo se dispara si event.target es el elemento mismo

Keyboard entry example:

<input @keyup.enter="submit">
Call onCopy when control-c is pressed:
<input @keyup.ctrl.c="onCopy">

Key modifiers: .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .right .middle

# Computed Properties

var app = new Vue({
el: '#app’,  
  data: { 
    x: 0,
    y: 0
  },
  computed: {
    total() {
      return this.x + this.y
    }
  }
})

# Componentes

Vue.component('lista-tareas', {
  name: '',
  template: `
        <ul class="list-group">
            <li v-for="(tarea, indice) of tareas" class="list-group-item" 
               v-bind:class="{terminada: tarea.terminada }">
                {{ tarea.texto }}
                <span class="pull-right">
                    <button type="button" class="btn btn-success btn-xs glyphicon glyphicon-ok"
                        v-on:click="tarea.terminada = !tarea.terminada"
                    ></button>
                    <button type="button" class="btn btn-danger btn-xs glyphicon glyphicon-remove"
                        v-on:click="borrar(indice)"
                    ></button>
                </span>
            </li>
        </ul>
    `,
  data: () => { // ahora data debe ser una función que retorne un objeto
    return {}
  },
  props: '',
  filter: {},
  watch: {},
  methods: {},
  computed: {}
})

# Computed Properties

← Recursos →