Suggest an editImprove this articleRefine the answer for “How do directives differ from regular HTML attributes?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**HTML attributes** are static properties of an element that set a fixed value, while **Vue directives** are dynamic instructions that tell the framework how to update the DOM depending on the state of the data. **Key point:** directives are reactive and execute logic (conditional rendering, lists, events), while HTML attributes are not.Shown above the full answer for quick recall.Answer (EN)ImageVue directives and regular HTML attributes look similar (both are attributes in markup), but **they work in completely different ways**. Here is a clear explanation that sounds good in an interview. --- ## The main difference #### HTML attributes are static properties of an element. They simply set a fixed value: `id`, `class`, `href`, `disabled`, `value`, etc. #### Vue directives are dynamic instructions. They tell the framework **how to update the DOM depending on the state of the data**. --- ## Detailed differences ### 1. Directives are reactive, HTML attributes are not An HTML attribute sets a value once: ```javascript <input value="Hello"> ``` If the value changes in JavaScript, the HTML attribute does not update. A Vue directive reacts to data changes: ```javascript <input :value="message"> ``` ```javascript message = 'New value' // the DOM updates automatically ``` --- ### 2. Directives execute logic, not just set properties An HTML attribute cannot: - conditionally show/hide an element - render lists - listen to events with a reactive context - update automatically Directives can: ```javascript <div v-if="isLoggedIn">Welcome!</div> <button @click="logout">Log out</button> <li v-for="item in list">{{ item }}</li> ``` These are not just attributes, they are **instructions for Vue's template engine**. --- ### 3. Directives have a lifecycle and DOM interaction logic Regular HTML attributes are just text. A custom directive can execute JavaScript: ```javascript app.directive('focus', { mounted(el) { el.focus(); } }); ``` --- ### 4. HTML attributes work in plain HTML, directives work only inside Vue This code is valid in plain HTML: ```javascript class="button" disabled ``` But directives with `v-` work **only inside a Vue template**: ```javascript v-if="show" v-model="value" v-for="item in list" ``` If you insert such code into plain HTML, it will just be a string with no logic.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.