Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Learn about Vue directives -- special instructions just for Vue that help you control how your templates should display or behave.
Link to Placeholder Image
https://placeimg.com/200/200/animals
Terminology
Vue directive
A special attribute that you add to an HTML element in a Vue template. These are like special instructions just for Vue-- used to define certain behaviors such as when a method should be called in response to an event, or when to show/not show pieces of a UI element.
Vue Directive Syntax
Vue directives start with v-
For example: v-text, v-html, v-bind
Examples
Vue template
<p v-text="property1"></p>
<p v-html="property2"></p>
<a v-bind:href="property3">A link to somewhere </a>
Vue Instance
new Vue({
el: '#anHTMLElement',
data: {
property1: "My Property!",
property2: 343,
property3: "https://www.alinksomwhere.com"
}
});
You need to sign up for Treehouse in order to download course files.
Sign up