You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
13 Hrs
40 Min
16 Seg

Integración a Platzi Music

18/53
Resources

How to apply Vue.js concepts in our code?

It's time to see how the acquired concepts can be implemented in code. Let's create a basic search application using Vue.js and the CSS framework Bulma, which will facilitate the task of building elegant and responsive interfaces.

How to structure our base HTML with Bulma?

First, we will keep the div with the app ID to assemble the application. Here we will use Bulma classes to structure our HTML. The steps to follow are:

  1. Remove unnecessary content: We will delete the HTML content except the div with app ID.
  2. Use Bulma for the base: We will create elements like section, nav, and container with Bulma classes.
  3. Add interactivity: Let's insert a search input and two buttons, using the a tag instead of button for a uniform style.

The HTML code would look something similar to this:

<div id="app"> <section class="section"> <nav class="nav has-shadow"> <div class="container"> <input class="input is-large" placeholder="Search songs" type="text"> <a class="button is-info is-large">SEARCH</a> <a class="button is-danger is-large">&times;</a> </div> </nav> <div class="container results"> <div class="columns is-multiline"> <!-- Search results --> </div> </div></div> </section></div></div>

How to manage data and events with Vue.js?

Let's see how to manage data inside the ViewModel and how to bind it to user interaction.

  1. Property searchQuery: We create this property in the ViewModel, initialized as an empty string and bound to the input using v-model.
  2. Search method: Print in console the value of searchQuery when the SEARCH button is clicked, using the @click event.

The Vue.js code would look like this:

 {data() { return { searchQuery: '', tracks: [] };},methods: { search() { console.log(this.searchQuery); this.tracks = mockTracks; // mockTracks are dummy data of songs }}

How to render search results automatically?

To display the results, we use a v-for directive and create a fixed list of tracks.

Example of mock data structure:

const mockTracks = [ { { name: 'Muchacha', artist: 'Luis Alberto Spinetta' }, { name: 'Hoy', artist: 'El Pepo' }, { name: 'I Was Made', artist: 'Kiss' }];

And to render in the DOM:

<div v-for="track in tracks" :key="track.name" class="column"> <p>{{ track.name }} - {{ track.artist }}</p></div>

Why is indentation important and how does it affect Vue.js?

Indentation is key in Vue.js because the structure of the code defines how components and elements are related. A common mistake is to think that a block is at the wrong level, which can break the application logic.

How to incorporate computed properties in Vue.js?

Computed properties allow us to perform computations based on reactive data automatically.

computed: { searchMessage() { return `Found ${this.tracks.length}`; } }}

We will integrate this dynamic count into the interface as feedback to the user, improving the user experience.

Using Vue.js development tools

Vue's development tools allow you to inspect components in real time. This is essential to verify that properties and methods are executing correctly and to debug errors more quickly.

This foundation positions us to take the next step, which is to connect these concepts with RESTful APIs, which we will explore next. This will push your Vue.js development skills to the next level and open up a world of new possibilities in interactive and dynamic web applications.

Contributions 24

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

Equivalente a HTML puro:

<template>
    <div id="app">
        <section class="section">
            <nav class="nav has-shadow">
                <div class="container">
                    <input type="text" class="input is-large" placeholder="buscar canciones" v-model="searchQuery">
                    <a href="" class="button is-info is-large" @click.prevent="search">Buscar</a>
                    <a href="" class="button is-danger is-large">&times;</a>
                </div>

              
            </nav>

            <div class="container results">
                <div class="colums">
                    <div class="column" v-for="(track, index) in tracks" :key="index">
                        {{track.name}}
                        {{track.artist}}
                        
                    </div>
                    Resultados encontrados: {{searchMesssage}}
                </div>
            </div>
        </section>
    </div>
</template>

<script>
const tracks = [
    {
        name:'muchacha',artist: 'Luis albeto'
    },
    {
        name:'vivir la vida',artist: 'Marck antony'
    },
    {
        name:'Platzi',artist: 'Nacho'
    }
]

export default {
    name: 'app',
    data() {
        return {
            searchQuery: '',
            tracks: []
        }
    },
    methods: {
        search(){
            this.tracks = tracks;
        }
    },
    computed: {
        /*Las propiedades computadas siempre devuelven algo*/
        searchMesssage(){
            return this.tracks.length
        }
    },
}
</script>

Solución actualizada a 2019. (Algunas cosas cambiaron en Bulma)

<template lang="pug">
  #app
    section.section
      nav.navbar
        .field.has-addons
          .control.is-expanded
            input.input(
              type="text"
              placeholder="Buscar canciones"
              v-model="nombre")
          .control
            button.button.is-info(@click="buscar") Buscar
          .control
            button.button.is-danger &times;
          .control
            button.button
              span.is-size-7 Encontrado: {{ cantidad }}

      .container.custom
        .columns
          .colum(v-for="c in canciones") {{ c.nombre }},{{ c.artista }}
</template>

<script>

const canciones = [
  { 'nombre': 'De mes en mes', 'artista': 'Ricardo Arjona' },
  { 'nombre': 'Pinguinos en la cama', 'artista': 'Ricardo Arjona' },
  { 'nombre': 'Atrevete', 'artista': 'Calle 13' },
  { 'nombre': 'Nadie como tu', 'artista': 'Calle 13' }
]

export default {
  name: 'app',
  data () {
    return {
      canciones: [],
      nombre: ''
    }
  },
  methods: {
    buscar () {
      this.canciones = canciones
    }
  },
  computed: {
    cantidad () {
      return this.canciones.length
    }
  }
}
</script>

<style lang="scss">
@import 'scss/main.scss';

#app {

  .custom {
    margin-top: 30px;
  }

}
</style>

Esto de usar frameworks CSS me hace flojo y confiado. mejor escribo mi propio CSS

para que no les recargue la página con el botón “Buscar”, cambien @click=“search” por @click.prevent=“search”

Saludos del 2021 (casi finalizando), si por casualidad tuviste un error llamado “No ESLint configuration found” al ejecutar npm run dev, quizás estos pasos puedan ayudarte:

  1. Instalar el paquete “eslint-plugin-vue” en la versión específica:
npm i -D eslint-plugin-vue@^4.7.1
  1. Dentro de la carpeta platzi-music, crear un archivo con el nombre de “.eslintrc” y colocar el siguiente pedazo de código:
{
    "extends": ["plugin:vue/base"],
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module"
    }
}
  1. Ejecutar nuevamente el npm run dev, deberá hacerlo sin problemas.

https://bootstrap-vue.org/

Este framework basado en bootstrap le falicitara la vida en Vue

Recuerden que si el v-for les da problemas es porque debe usar :key=“t”

Realice una actualización npm de las dependenias y se rompió todo sufrí al final lo deje de esta forma, pero tengo muchos WARN deprecated 😕

"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^3.2.1",
"eslint": "^7.11.0",
"eslint-config-standard": "^14.1.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^7.0.1",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"pug": "^2.0.0",
"pug-loader": "^2.4.0",
"sass-loader": "^5.0.1",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.5"

Todo chidori hasta el momento, me gusta el curso. 👏

<template lang="pug">
  #app
    section.section
      nav.nav.has-shadow
        .container
          input.input.is-large(type="text",
          placeholder="Buscar Canciones",
          v-model="searchQuery")
          a.button.is-info.is-large(@click="search") Buscar
          a.button.is-danger.is-large &times;
          p
            small {{searchMessage}}

      .container.results
        .columns
          .cloumn(v-for="t in tracks") {{t.name}} - {{t.artist}}
</template>

<script>
const tracks = [
  { name: "The Count of Tuscany", artist: "Dream Theater" },
  { name: "Remember", artist: "Circus Maximus" },
  { name: "Iconoclast", artist: "Symphony x" }
];
export default {
  name: "app",

  data() {
    return {
      searchQuery: "",
      tracks: []
    };
  },

  computed: {
    searchMessage() {
      return `Encontrados: ${this.tracks.length}`;
    }
  },

  methods: {
    search() {
      this.tracks = tracks;
    }
  }
};
</script>

//
<style lang="scss">
@import "./scss/main.scss";

.results {
  margin-top: 50px;
}
</style>

Creo que este curso es muy viejo 😐

<template lang="pug">
  #app 
   section.section
    nav.nav.has-shadow
      .container
       input.input.is-large(type="text", placeholder="Buscar tu musica" v-model="searchQuery") 
       a.button.is-large.is-danger(@click="clean()") &times
       a.button.is-large(@click="searchMusic()") BUSCAR
       
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      searchQuery:""
   }},
  


  methods: {
     searchMusic(){
       alert(this.searchQuery)
       this.clean()
     },
     clean(){
       this.searchQuery=""
       
     }
  }
   
}
</script>

para tener la misma version de bulma que el curso “npm uninstall bulma”, “npm i [email protected]

Para los que sigan este curso usando Vue.js v3.x, si no les funciona la extension de Vue.js Devtools, instalen Vue.js Devtools Beta (v6.x).
Reinicien el navegador, y ya les va a reconocer el Vue.

Dato curioso: El camarografo tararea “I was made for lovingv you” cuando Ignacio la menciona.

me sale asi

Solo para mencionar, a quienes les guste trabajar con Bulma pueden probar Buefy, una librería de componentes Vuejs basada en Bulma 😄

Cuales extensiones utilizas para que cambian los colores del texto pug?

La propiedad computada se va ha activar cada vez que exista una modificación en la propiedad tracks ? A que se debe esto ?

<template lang='pug'>
  #div
    section.section
      nav
        .field.has-addons
          p.control.is-expanded
            input.input.is-large(type='text' placeholder='Buacar canción' v-model='searchQuery')
          p.control
            a.button.is-large.is-info(@click='search') Buscar
          p.control
            a.button.is-large.is-danger
                i.fas.fa-sync-alt
      .container.custom
        .notification {{ seachMessage }}
      .container
        .columns.custom
          .column(v-for='track in tracks') {{ track.name }} - {{ track.artist }}

</template>

<script>
const tracks = [
  { name: 'Muchacha', artist: 'Luis Alberto' },
  { name: 'Hoy aca en el baile', artist: 'El Pepo' },
  { name: 'I was made for loving you', artist: 'Kiss' }
]
export default {
  name: 'app',
  data: () => ({
    searchQuery: '',
    tracks: []
  }),
  methods: {
    search () {
      this.tracks = tracks
    }
  },
  computed: {
    seachMessage () {
      return `Encontrados: ${this.tracks.length} resultados`
    }
  }
}
</script>

<style lang="scss">
@import "@/scss/main.scss";

.custom {
  margin-top: 2rem
}
</style>

Muy bien explicada la clase, lo unico malo es que con las actualizaciones de bulma las clases usadas en la clase no se ven igual en el navegador a la fecha de diciembre de 2019.

Genial!!

Creo que aunque no es muy relevante el buscador pudo haber quedado mejor con los botones en distintas posiciones🤨

const tracks = [
  {name: 'Muchacha', artist: 'Luis Albert'},
  {name: 'If you like piña Coladas, and be shown', artist: 'El pepo'},
  {name: 'I was made for locing you', artist: 'Kiss'}
  ]

-👌