Vue Directives
Special attributes that add dynamic behavior to HTML
🎯 What are Vue Directives?
Directives are special attributes with the v- prefix that apply reactive behavior to HTML elements. They tell Vue to do something with a DOM element, like binding data or handling events.
<!-- Directive Example -->
<div id="app">
<p v-text="message"></p>
<button v-on:click="greet">Click Me</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return { message: 'Hello from directive!' }
},
methods: {
greet() { alert('Hello!') }
}
}).mount('#app')
</script>
Output:
Hello from directive!
Common Vue Directives
v-bind
Bind attributes to data
<img v-bind:src="url">v-if
Conditionally render elements
<p v-if="show">Text</p>v-show
Toggle element visibility
<p v-show="visible">Hi</p>v-for
Loop through arrays
<li v-for="item">
{{ item }}
</li>v-on
Listen to events
<button v-on:click="fn">
Click
</button>v-model
Two-way data binding
<input v-model="text">🔹 v-text Directive
The v-text directive updates the element's text content. It works similarly to text interpolation but as an attribute. Use it when you want to set the entire text content of an element.
<div id="app">
<p v-text="greeting"></p>
<span v-text="name"></span>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
greeting: 'Welcome to Vue Directives!',
name: 'Vue Learner'
}
}
}).mount('#app')
</script>Output:
Welcome to Vue Directives!
Vue Learner🔹 v-html Directive
The v-html directive renders HTML content from your data. Be careful with this directive as it can expose your app to XSS attacks if used with user-generated content.
<div id="app">
<div v-html="htmlContent"></div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
htmlContent: '<h3>This is HTML</h3><p>Rendered by v-html</p>'
}
}
}).mount('#app')
</script>Output:
This is HTML
Rendered by v-html
🔹 v-on Directive (Event Handling)
The v-on directive listens to DOM events and executes JavaScript when triggered. You can use the shorthand @ symbol instead of v-on: for cleaner code.
<div id="app">
<p>Count: {{ count }}</p>
<button v-on:click="increment">Add 1</button>
<button @click="count += 5">Add 5</button>
<button @click="reset">Reset</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return { count: 0 }
},
methods: {
increment() { this.count++ },
reset() { this.count = 0 }
}
}).mount('#app')
</script>Output:
Count: 0
🔹 v-model Directive
The v-model directive creates two-way data binding on form inputs. When the input changes, the data updates, and when the data changes, the input updates automatically.
<div id="app">
<input v-model="username" placeholder="Enter name">
<p>Your name is: {{ username }}</p>
<textarea v-model="message"></textarea>
<p>Message: {{ message }}</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
username: '',
message: ''
}
}
}).mount('#app')
</script>Output:
Your name is:
Message:
🔹 v-for Directive
The v-for directive renders a list of items by iterating over an array. Each item gets its own element, making it easy to display dynamic lists of data.
<div id="app">
<h3>My Favorite Fruits:</h3>
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
fruits: ['Apple', 'Banana', 'Orange', 'Mango']
}
}
}).mount('#app')
</script>Output:
My Favorite Fruits:
- Apple
- Banana
- Orange
- Mango