Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Vue.js Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Hello Vue

6:15 with Treasure Porth

Learn how to set up a basic Vue application.

Terminology

Vue instance

The root of a Vue application, created by using the new keyword. You pass the Vue instance an object containing options that give you the ability to store data and define methods (more about methods in a later video!). The data and methods you define are then used in a Vue template to control the behavior of your application.

Templating

A Vue template generally consists of HTML, data bindings and Vue directives (more about Vue directives in a later video!). This is where you lay out the rules of how Vue should display your data. In our example, we've built a template that creates two data bindings: a title and a message.

Data Binding

Data binding generally means establishing a connection between an application's data and the application's user interface. In the video we created a connection between the title and message data properties to the Vue template. Vue will make sure that this data is always in sync with the user interface. If title or message change, Vue will detect the the change and updates the browser without any extra legwork from us.

Basic Syntax of a Vue instance

 new Vue({
   el: '#anHTMLElement',
   data: {
     property1: "My Property!", 
     property2: 343,
     property3: "This is the third property on my data object!" 
  }
});

Basic Syntax of a Vue template

<div id="anHTMLElement">
  <h1>{{ property1 }}</h1>
  <h2>{{ property2 }}</h2>
  <p> {{ property3 }} </p>
</div>

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Every Vue application starts with at least two things, some data and 0:00
    a template. 0:04
    You can think of a template as a representation of how you want 0:05
    the structure of your application, the HTML, to relate to your data. 0:09
    In other words, rather than hard code data about cats, for example, into the HTML, 0:13
    you'd use placeholders to tell Vue where to place the data within your HTML. 0:18
    For example, let's create a div with an ID of helloVue. 0:23
    This element, and everything nested within it, 0:33
    is what we will hook up to Vue as a template. 0:36
    Inside the helloVue div, I'll create an h1. 0:39
    Normally, we'd put some text between the text, but 0:43
    because this is going to be a Vue template, instead of normal text, 0:47
    we're going to add placeholders that will tell Vue where to place the data. 0:51
    In a Vue template, 0:56
    we can use something known as mustache syntax to tell Vue where to display data. 0:57
    It's called mustache syntax because it uses curly braces, 1:03
    which look a bit like sideways mustaches. 1:07
    I'll create a placeholder called {{ title }}. 1:10
    Save, then open up the app.js file. 1:19
    Every Vue project begins with creating a new Vue 1:21
    instance with a constructor called Vue. 1:26
    The instance can be optionally saved to a variable. 1:30
    The Vue Instance takes an object, and this object takes some options, 1:36
    some properties containing important information about the data and 1:41
    methods we'll be using with our templates. 1:45
    We'll learn about a few options we can pass to the Vue instance, but 1:49
    the two main things we need to get started are el and data. 1:53
    The el property, short for 2:04
    element, is how we tell Vue which HTML element to attach the Vue instance to. 2:06
    In our index.html, we've already created a Vue template with an id="helloVue". 2:11
    So that's what we'll pass to the Vue instance as a string. 2:19
    Notice that I've included a hash symbol here. 2:28
    We're telling Vue that we intend to use an HTML element with an ID 2:31
    of helloVue as our template. 2:35
    So Vue should attach, or mount itself, to that element. 2:37
    The data property on the Vue instance is an object where I can define 2:41
    which data I want to connect with which placeholder in my template. 2:46
    In my HTML, I created a placeholder and called it, title. 2:52
    So now in my data object, I can add a property called title. 2:56
    Now I can set title to whatever I want. 3:03
    Let's save and open this up in a browser. 3:08
    Instead of seeing the word title in curly braces, 3:21
    we see the value of what we've set as the title in the Vue instance. 3:24
    So whatever I've defined as title in my Vue instance is what we'll 3:29
    see when the page is displayed. 3:34
    Let's go back to app.js and 3:36
    change the value of title to HELLO WORLD!!!!, in all caps. 3:38
    With some extra exclamation points. 3:45
    Save and refresh the page and you'll see that the title has changed. 3:48
    Associating data with a template, like we've done here, 3:52
    is a simple example of a concept called data binding, which basically means that, 3:55
    whenever the value of this title property changes in our Vue instance, 4:00
    you will automatically update it for us in the template. 4:04
    As we continue to learn Vue it will become clear why this is a convenient and 4:08
    powerful way to organize your code. 4:11
    It's easier to see how the data automatically updates from the console. 4:14
    I can open up the console and change the value of 4:19
    title by referring to the name of the Vue instance, 4:24
    which we named earlier helloWorld. 4:30
    I can access and change the title property using dot notation. 4:36
    And, you'll see that over here the title changes instantly. 4:46
    Note that we're not working with a database or anything here, so 4:50
    this change will only persist until the page reloads. 4:53
    If I refresh the previous data, what I have coded into the file will reappear. 4:57
    I can create and bind as many data properties as I want to my template. 5:01
    Let's add a new property to the Vue instance called message. 5:07
    If you're following along with me, remember that this is an object, 5:19
    so you need a coma after your first data property. 5:22
    Now, I can add the message property as a placeholder to my template. 5:25
    Save this. 5:30
    And we'll put the placeholder between paragraph text. 5:34
    Here I called it message, so in my HTML, I will call it {{ message }}. 5:41
    Save, refresh the browser, and you'll see my new data. 5:48
    You can see that instead of hard coding my data into the HTML I'm instead building 5:52
    a template containing placeholders that tell Vue where my data should go. 5:57
    Throughout the course we'll see many examples of how useful this can be. 6:02
    Templating and data binding are used, in one form or another, in all of the popular 6:06
    front-end frameworks, so we'll explore a lot moe of what you can do in them in Vue. 6:10

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up