En el post anterior fue un ejemplo muy básico de Vuejs, donde mostraba como vincular un template con una instancia de Vuejs y mostrar una propiedad  pero aun quedan varias propiedades para conocer de Vuejs, este era nuestro template.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="col-xs-12">
        <div class="row">
        <h2>{{message}}<h2>
         </div>
    </div>
</div>
</html>

Propiedades de Vue

Cuando realizamos una instancia de Vue este recibe como parámetro un json object, el cual posee varias propiedades como son:

  • el
  • data
  • methods
  • computed
  • watch

el:

Permite especificar que elemento del DOM nuestra instancia de Vue controlara.

new Vue({
   el:'#app'
});

data:

Permite almacenar las propiedades que queremos exponer a  en nuestro template y para acceder solo tenemos que usar {{}} interpolando ejemplo:

new Vue({
   el:'#app',
   data:{
     message:'Hola Vue'
   }
});

methods:

Permite exponer métodos a nuestro template que nos sirven para comportamiento o retornar datos.

new Vue({
   el:'#app',
   data:{
     message:'Hola Vue',
     
   },
    methods:{
     getName: function(){
       return 'EdgarJS!';
     },
     getMessage: function(){
       return this.message;
     }
   }
});

Modificamos nuestro template y llamando el método con () obtenemos el mensaje “EdgarJS”

 <div class="row">
        <h2>{{message}}<h2>
         <h3> {{ getName() }}</h3>
 </div>

computed

Permite definir funciones que son consumidas en la vista como propiedades y que son actualizadas cuando una propiedad de las que depende es modificada.

En el siguiente ejemplo si tengo una propiedad bankAccounts y es modificada por un método ejemplo addAccount entonces cada vez que sea modificada bankAccount la propiedad TotalAccounts es actualizada.

computed: {
 TotalAccounts: function(){
      return  this.bankAcconts.length;
   }
 }

watch

Permite definir un listado de propiedades que queremos  reaccionar a sus cambios de forma asíncrona.

 watch: {
     bankAcconts: function(value){
        alert("new account added")
    }
 }

Cuando usar watch o computed ?

Vue nos permite verificar cambios de una propiedad mediante computed o watch.  La diferencia entre cada uno, es que computed se ejecuta de forma sincronía y watch de forma asíncrona.

En mi caso uso computed para cálculos o resultados que esperan una respuesta asíncrona  ejemplo el calculo de un dato o verificar otras propiedades y watch para la llamadas asíncronas como una llamada Ajax de traer datos.

Aquí puedes ver un ejemplo completdo donde puedes ver las propiedades en acción.

Happy Vue 😀