Vue Directives - sana028/VueLearningsPoc GitHub Wiki

vue has a some directives which are used commonly in vue js

1.v-bind =>

using v-bind to element we can bind the class , styles and we can send props to child component using v-bind. the shortcut symbol for v-bind is ':' ex: <div :style="{color:'blue'}"></div>

2.v-on => using v-on we can bind a event to a specific element to perform some functionality when user click on something or any modification on user data. the short cut for v-on is @ ex: <button @click="addSomeText"></div>

3.v-if,v-else,v-elseif => these are conditional directives which are used to perform some conditions on specific elements.

 ex:` <p v-if="isDataAvailable">Show User Data</p>`

in above example user will see data when it is available only. if it is not available it will show v-else condition data.

4.v-for => this will used to show data from e array or array of objects through looping. ex: <div v-for="(item,index) in items" :key="index" >{{item}}<div>

5.v-html => this is used to render a string to a html code. ### ex: we have some string data with <strong> or <em> tags and we want render the string with strong tag styles at the time if we use the v-html ### this will render the entire string with html tags and give specific strong tag styles that string.

### string text=" hello <strong>everyone</strong> , welcome to cognine"; ### <div v-html="text"></div>

6.v-model => this one we use most commonly when we want dynamically update the data it will form two way binding to vue components. like we have name property when user give his name the v-model dynamically took that name update the name property.

 `###  ex:<input type="text" v-model="name"/>`

7.v-show => like v-if it is also show data based on a condition but it doesn't have v-else type conditions. ex: <div v-show="isUserAvailable">show user Data</div>