**Course Title:** Mastering Vue.js: Building Modern Web Applications **Section Title:** Vue Directives and Event Handling **Topic:** Using built-in directives (v-if, v-for, v-bind, v-model) In this topic, we will explore Vue's built-in directives, which are essential for building dynamic and interactive web applications. Directives are special attributes that start with the prefix `v-`, and they are used to declare a specific behavior or functionality for the element they are applied on. We will cover four of the most commonly used built-in directives: `v-if`, `v-for`, `v-bind`, and `v-model`. ### 1. v-if Directive The `v-if` directive is used to conditionally render an element or a block of elements based on a boolean expression. If the expression is true, the element is rendered; otherwise, it is not. The `v-else` directive can be used to specify an alternate element to render if the expression is false. **Example:** ```html <template> <div> <h1 v-if="isAdmin">Welcome, Admin!</h1> <h1 v-else>Welcome, User!</h1> </div> </template> <script> export default { data() { return { isAdmin: true } } } </script> ``` In this example, if `isAdmin` is true, the first `h1` element is rendered; otherwise, the second `h1` element is rendered. ### 2. v-for Directive The `v-for` directive is used to render a list of elements based on an array or object. It can also be used to iterate over an array of objects and access the properties of each object. **Example:** ```html <template> <ul> <li v-for="(user, index) in users" :key="index">{{ user.name }} ({{ user.age }})</li> </ul> </template> <script> export default { data() { return { users: [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 }, { name: 'Bob Smith', age: 40 } ] } } } </script> ``` In this example, the `v-for` directive is used to render a list of `li` elements, where each element displays the `name` and `age` properties of each object in the `users` array. ### 3. v-bind Directive The `v-bind` directive is used to bind an attribute to a dynamic value. It can be used to bind CSS classes, styles, and other HTML attributes. **Example:** ```html <template> <div> <a :href="url">Visit Google</a> </div> </template> <script> export default { data() { return { url: 'https://www.google.com' } } } </script> ``` In this example, the `v-bind` directive is used to bind the `href` attribute of the `a` element to the `url` property. ### 4. v-model Directive The `v-model` directive is used to create a two-way data binding between a form element and a dynamic value. It can be used to bind input fields, textarea fields, and select fields. **Example:** ```html <template> <div> <input v-model="name" type="text" placeholder="Enter your name"> <p>Hello, {{ name }}!</p> </div> </template> <script> export default { data() { return { name: '' } } } </script> ``` In this example, the `v-model` directive is used to bind the `input` element to the `name` property. When the user types something in the input field, the `name` property is updated automatically, and the greeting message is updated dynamically. **Key Takeaways:** * `v-if` is used to conditionally render an element or block of elements based on a boolean expression. * `v-for` is used to render a list of elements based on an array or object. * `v-bind` is used to bind an attribute to a dynamic value. * `v-model` is used to create a two-way data binding between a form element and a dynamic value. **Practice Exercise:** Create a simple Vue application that uses the `v-if`, `v-for`, `v-bind`, and `v-model` directives. For example, you can create a todo list app that allows users to add, remove, and edit todo items. **Additional Resources:** * [Vue.js Documentation: Built-in Directives](https://vuejs.org/v2/guide/syntax.html#Directives) * [Vue.js Documentation: Conditional Rendering](https://vuejs.org/v2/guide/conditional.html) * [Vue.js Documentation: List Rendering](https://vuejs.org/v2/guide/list.html) **Leave a comment or ask for help:** If you have any questions or need help with the practice exercise, please leave a comment below. We will do our best to assist you.