Formato resumido de las directivas v-bind y v-on

La directiva v-bind: y v-on: pueden resumirse o definir atajos.

La forma resumida de v-bind: es solo los dos puntos.

La forma resumida de v-on: es @click.

Problema

Mostrar una dirección web en un ancla rescatando del modelo la url. Disponer un botón que al ser presionado redirija a otra página.

Resolver el problema utilizando formato normal para las directivas y el formato resumido.

Formato normal

<!doctype html>
<html>
<head>
  <title>Prueba Vue</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <div id="aplicacion">
    <a v-bind:href="buscador">{{nombreBuscador}}</a>
    <hr>
    <button v-on:click="ir()">Entrar a google</button>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>   

  <script>
  new Vue({
    el: '#aplicacion',
    data: {
      buscador: 'https://www.google.com',
      nombreBuscador: 'Google',
      contador: 0
    },
    methods: {
      ir: function() {
        window.location.href=this.buscador;
      }
    }
  })
  </script>
</body>
</html>

Si utilizamos la sintaxis resumida tenemos:

<!doctype html>
<html>
<head>
  <title>Prueba Vue</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <div id="aplicacion">
    <a :href="buscador">{{nombreBuscador}}</a>
    <hr>
    <button @click="ir()">Entrar a google</button>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>   

  <script>


  new Vue({
    el: '#aplicacion',
    data: {
      buscador: 'https://www.google.com',
      nombreBuscador: 'Google',
      contador: 0
    },
    methods: {
      ir: function() {
        window.location.href=this.buscador;
      }
    }
  })
  </script>
</body>
</html>

Sintaxis completa:

    <a v-bind:href="buscador">{{nombreBuscador}}</a>
    <hr>
    <button v-on:click="ir()">Entrar a google</button>

Sintaxis resumida:

    <a :href="buscador">{{nombreBuscador}}</a>
    <hr>
    <button @click="ir()">Entrar a google</button>

28 - Formato resumido de las directivas v-bind y v-on

Problema

Ejecutar Ejemplo

Retornar