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"
}
});
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up