Vue.js Practical Examples: Learn by Doing

Vue.js is a popular JavaScript framework that simplifies the development of interactive web applications. It offers a versatile set of features and is known for its simplicity and ease of integration into existing projects. One of the best ways to learn Vue.js is by diving into practical examples. In this article, we’ll explore several hands-on Vue.js examples to help you grasp the core concepts and see how this framework can be used in real-world scenarios.

Hello World: Let’s start with the simplest example. Create an HTML file and include Vue.js. Then, create a Vue instance and bind it to a DOM element. You can use the double curly braces {{}} to display data. This is a great way to understand the basics of Vue.js data binding and templating.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Hello Vue.js</title>
   </head>
   <body>
       <div id="app">
           {{ message }}
       </div>

       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
       <script>
           var app = new Vue({
               el: '#app',
               data: {
                   message: 'Hello, Vue.js!'
               }
           });
       </script>
   </body>
   </html>

Conditional Rendering: Learn how to conditionally render elements in Vue.js. For example, you can display a message only if a certain condition is met. This example demonstrates the use of v-if and v-else directives.

   <div id="app">
       <p v-if="seen">You can see me!</p>
       <p v-else>Now you don't.</p>
   </div>

List Rendering: Explore Vue’s powerful list rendering capabilities with the v-for directive. This is invaluable for rendering lists of data, such as items in a shopping cart or a list of blog posts.

   <ul>
       <li v-for="item in items">{{ item.text }}</li>
   </ul>

User Input Handling: Learn how to handle user input and create dynamic forms with Vue.js. Use v-model to create two-way data binding, making it easy to work with form elements like input fields.

   <div id="app">
       <input v-model="message">
       <p>{{ message }}</p>
   </div>

Component-Based Architecture: Vue.js promotes the creation of reusable components. In this example, create a simple component for a to-do list item and then use it within the main Vue instance.

   <div id="app">
       <todo-item></todo-item>
   </div>

   Vue.component('todo-item', {
       template: '<li>This is a to-do item</li>'
   });

HTTP Requests: Incorporate data from external sources using Vue’s axios library to make HTTP requests. Fetch data from an API and display it in your application.

   <div id="app">
       <ul>
           <li v-for="user in users">{{ user.name }}</li>
       </ul>
   </div>

   <script>
       new Vue({
           el: '#app',
           data: {
               users: []
           },
           mounted() {
               axios.get('https://jsonplaceholder.typicode.com/users')
                   .then(response => {
                       this.users = response.data;
                   });
           }
       });
   </script>

Routing: Vue Router allows you to create single-page applications with multiple views. Implement basic routing and navigation between different pages or components.

   <div id="app">
       <router-link to="/home">Home</router-link>
       <router-link to="/about">About</router-link>
       <router-view></router-view>
   </div>

Setting up routing requires configuring Vue Router separately.

These practical examples should provide a solid foundation for your Vue.js journey. Remember that Vue.js offers a wealth of additional features and advanced concepts that you can explore once you are comfortable with the basics. Don’t hesitate to dive into the official Vue.js documentation and other online resources to further expand your knowledge. Vue.js is a versatile and powerful framework, and mastering it can open up a world of possibilities in web development.

Vue.js Practical Examples: Learn by Doing

Comments

Leave a Reply Cancel reply