A directive is a framework-specific instruction in an HTML template that adds or changes a DOM element’s behavior. Common uses include displaying elements conditionally and iterating over arrays. section 1.3.1
Vue’s v-if is a custom directive: it shows an element when application state permits. Svelte and React express the same conditional behavior with different syntaxes. section 1.3.1
Recognize the main responsibilities of directives:
- Attach framework behavior to markup. section 1.3.1
- Render or hide elements from application state. section 1.3.1
- Represent framework-specific alternatives to comparable template or JSX expressions. section 1.3.1
<p v-if="hasDiscount"> You get a discount! </p>
Inspect the Vue conditional directive in a focused template example. section 1.3.1
{#if hasDiscount}
<p>
You get a discount!
</p>
{/if}
Compare Svelte’s block syntax for the same conditional rendering behavior. section 1.3.1
{hasDiscount && <p>You get a discount!</p>}
Compare React’s JSX expression for state-dependent rendering. section 1.3.1
