02.-Vue js 2 tutorial español 👀 [arreglos, objetos y links]

- mayo 24, 2019

En este tutorial vamos a trabajar con arreglos (no pueden hacer falta), objetos (son como matrices pero mas flexibles) y tambien vamos a aprender a usar links en vuejs.

Codigo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Vuejs</title>
  </head>
  <body>
    <div id="elemento">
      {{contenido}}
      <ul>
        <li v-for="lenguaje of lenguajes" ><a :href="lenguaje.link" target="_blank" >{{lenguaje.nombre}}</a></li>
      </ul>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const con=new Vue({
      el:"#elemento",
      data:{
        contenido:"Hola mundo desde programador novato",
        lenguajes:[
        {nombre:"JavaScript",link:'https://www.javascript.com'},
        {nombre:"PHP",link:'https://php.net'},
        {nombre:"Python",link:'https://www.python.org'}
        ]
      }
    })
  </script>
</html>

Codigo en Github.com: https://github.com/eucm2g/vuejs
Codigo en Codepen.io: https://codepen.io/programadornovato/pen/KLoqeq

Video

03.-Vue js 2 tutorial español 👀 [v-model,@click,v-on:click]

En este tutorial vamos a colocar 2 inputs y un botón, los inputs van a ser para colocar el nombre y la url del lenguaje de programación y el boton nos va a servir para agregar esos nombres en la lista de lenguajes.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Vuejs</title>
  </head>
  <body>
    <div id="elemento">
      {{contenido}}
      <input type="text" v-model="nuevoLenguaje" />
      <input type="text" v-model="nuevoLink" />
      <button @click="agregarLenguaje" >Agregar lenguaje</button>
      <ul>
        <li v-for="lenguaje of lenguajes" ><a :href="lenguaje.link" target="_blank" >{{lenguaje.nombre}}</a></li>
      </ul>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const con=new Vue({
      el:"#elemento",
      data:{
        contenido:"Hola mundo desde programador novato",
        lenguajes:[
        {nombre:"JavaScript",link:'https://www.javascript.com'},
        {nombre:"PHP",link:'https://php.net'},
        {nombre:"Python",link:'https://www.python.org'}
        ],
        nuevoLenguaje:'',
        nuevoLink:'',
      },
      methods: {
        agregarLenguaje(){
          this.lenguajes.push({nombre:this.nuevoLenguaje,link:this.nuevoLink})
        }
      },
    })
  </script>
</html>