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:
- Remove unnecessary content: We will delete the HTML content except the
div with app ID.
- Use Bulma for the base: We will create elements like
section, nav, and container with Bulma classes.
- 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">×</a> </div> </nav> <div class="container results"> <div class="columns is-multiline"> </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.
- Property
searchQuery: We create this property in the ViewModel, initialized as an empty string and bound to the input using v-model.
-
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; }}
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.
Want to see more contributions, questions and answers from the community?