Vue Directives

README.md

Vue Directives

VueJS provides a number of directives that are great for dynamically generating a website. But they can be tricky to get the hang of. This gist demonstrates how to use these effectively in your code

v-text

• Used to update an elements textContent with data

v-html

• Renders html, not just text
• Used to generate html into your template
• Use in cases when you cannot use mustache syntax

v-on

• Used to listen to DOM events such as click
• You can use the full syntax like this
  • <button v-on:click="functionName">text</button>
• or you can use the shorthand syntax like
  • <button @click="functionName">text</button>
• pick a syntax and stick with it

v-bind

• one way binding
• Use v-bind in a component to pull properties from the parent

<info-box v-bind:prop-value="propValue" />

• Use v-bind to add properties to html tags (you cannot use moustache syntax inside html tags)

v-model

• two way binding
• Use this for forms and inputs

<input v-model="userName" type="text">

v-for

• This is a for loop used to loop through data in arrays and/or objects.
• your data is stored

v-if

• Introduces if/else conditional logic to vue template