what is directives

 

 s

directives are modifying the html dom elements or oding some actions on dom elements

Directives in Vue.js are special attributes that allow you to apply custom behavior to HTML elements. They are prefixed with v- followed by the directive name. Directives are used to add interactivity, manipulate the DOM, and apply dynamic behavior to elements in your Vue components.
Vue.js provides several built-in directives, including:
v-if: Conditionally renders an element based on the truthiness of an expression.
v-for: Renders elements or components in a list based on an array or object.
v-on: Attaches event listeners to elements, allowing you to run methods or expressions when events occur.
v-bind: Binds element attributes or component props to expressions or data values.
v-model: Creates a two-way binding between form input elements and component data.
v-show: Conditionally shows or hides an element based on the truthiness of an expression.
v-text: Updates the text content of an element with the result of an expression.
v-html: Updates the innerHTML of an element with the result of an expression, allowing you to render HTML dynamically.
Here's an example that demonstrates the usage of some directives in Vue.js:
<div id="app">
  <p v-if="showMessage">Hello, Vue.js!</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button v-on:click="handleClick">Click me</button>
  <input v-model="inputText" type="text">
  <p v-show="showMessage">{{ dynamicText }}</p>
</div>

s

n this example, v-if conditionally renders the <p> element based on the value of the showMessage data property. v-for iterates over the items array and renders <li> elements for each item. v-on attaches a click event listener to the button and invokes the handleClick method when clicked. v-model establishes a two-way binding between the input field and the inputText data property. v-show conditionally shows or hides the <p> element based on the value of showMessage. The :key attribute is used with v-for to ensure proper element reactivity and efficiency.

You can also create custom directives in Vue.js using the directive function. Custom directives allow you to encapsulate reusable behavior and manipulate the DOM directly.

Overall, directives provide a powerful way to extend and customize the behavior of HTML elements in Vue.js applications.

attributes

clas is attrbute,key is attribute

In the example I provided, the :key is an attribute, not a prop.

In Vue.js, when using the v-for directive to iterate over an array and render elements, it is recommended to provide a unique key attribute to each rendered element. The key attribute helps Vue.js efficiently track and update the rendered elements when the underlying array changes.

In the example <li v-for="item in items" :key="item.id">{{ item.name }}</li>, :key is a shorthand for v-bind:key, which binds the value of item.id to the key attribute of each <li> element. The item.id is typically a unique identifier for each item in the items array.

By providing a unique key attribute, Vue.js can optimize the rendering and update process by identifying which elements have been added, removed, or re-ordered. This allows for more efficient and smooth updates when the underlying array changes.

The key attribute is specific to Vue.js and is not considered a prop. Props, on the other hand, are used to pass data from parent components to child components. They are explicitly defined in the component's options and are accessible within the component's template or script

https://www.youtube.com/watch?v=ANu48QxdaCQ&t=899s

option api

beforecreate

created

beforemount

mounted

beforeupdate

updated

beforeunmount or destoryed

unmount

composition api

table is component ( htmll element has attributes) similarly props ( component have props)

driectives are special html attributes

to do something with dome elements we use directivyes onlye

to modify dom elements we use directives only

v-html

it can controll the rednreding of elements bind data ,add event listener

anchor tag => it has src attribute,

img tag has src

v-for

v-if

v-else

v-else-if

v-bind:html_attribute => v-bind:src, :src

v-on:click

v-on ( shortly @)

@mouseenter

v-show

v-html

v-once after dome elements loaded once

v-cloak ( to hide uncompled elements till comoles

directive is alternative of attributes

compted properties vs methods

whenver properties or variables changes it calls compited

watched fro complex, computed for small