VueJS 💚

"The Progressive JavaScript Framework"

Vue es un marco progresivo para construir interfaces de usuario. A diferencia de otros marcos monolíticos, Vue está diseñado desde cero para ser gradualmente adoptable. La biblioteca principal se centra solo en la capa de vista y es fácil de recoger e integrar con otras bibliotecas o proyectos existentes.

Conceptos Principales

Componentes

En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas. Registrar un componente en Vue es directo y sencillo.

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

Instancia de Vue

Cada vm Vue es iniciada creando una instancia raíz de Vue con la función constructora Vue.

var vm = new Vue({ // options })

Sintaxis de plantillas

Vue.js utiliza una sintaxis de plantilla basada en HTML lo que te permite enlazar declarativamente el DOM con los datos de la instancia de Vue subyacente. Todas las planitllas de Vue.js están compuestas por HTML válido que puede ser analizadas por navegadores compatibles con las especifiaciones o analizadores HTML.

Propiedades computadas

Podemos hacer uso de las propiedades computadas cuando la expresión que queremos mostrar en nuestra plantilla no es tan simple como de costumbre, como sería mostrar el valor de una variable.

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

Observadores

Una propiedad observada es aquella que devuelve un valor en función de otra propiedad, por lo que tiene que observarla. Es por eso que Vue proporciona una forma más genérica de reaccionar a los cambios de datos a través de la opción watch. Esto es más útil cuando desea realizar operaciones asíncronas o costosas en respuesta al cambio de datos.

<div id="watch-example">
  <p>
    Haz una pregunta de sí/no:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'No puedo darte una respuesta hasta que hagas una pregunta!'
  },
  watch: {
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Esperando que deje de escribir...'
      this.debouncedGetAnswer()
    }
  }
})
</script>