freeCodeCamp/guide/english/vue/declarative-rendering/index.md

title

title
Declarative Rendering

Installation

Before we get started, there are a couple of ways to use Vue.js, namely via CDN and via installation. For a first experience, it's easier to use the CDN.

For development, use this:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

When jumping to production, this:

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

As mentioned before, you can also install the vue-cli, but this is not recommended for beginners.

Declarative Rendering

Vue.js is a great tool for creating dynamic pages, and a first way to get in touch with that is what's called Declarative Rendering.

"Declarative", because it is somewhat similar to declarative languages such as SQL. Using Vue.js straightforward syntax, you just declare what data you want to see, and the framework will take care of the rendering, as simply as that:

<div id="app">
  {{ message }} <!-- declaring what we want to see -->
</div>

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!' // Vue.js fetches its value here
  }
});

With those snipets, you're telling Vue to dynamically render whatever is stored inside the message variable. And the fun part: whenever message is changed, Vue.js manages to instantly update that specific part of the DOM.

To experience this reactivity, once you've set up a new project and displayed it in your browser open the console and change the value of app.message to, say, "Hello from console".

app.message = "Hello from console"

Did you notice the change in the page? It's just like magic.

The {{ ... }}, or double mustache brakets, is the syntax for that behavior: outputting the value of a variable or of an expression. For instance, this is also a valid use and will result in hello :

<div id="app">
  {{ 1 < 2 ? "hello" : "goodbye" }}
</div>

There will be cases when we want to dynamically set a DOM element's attribute. Vue has a way to do exactly that, and it is called "binding" :

<div id="app">
  <a v-bind:href="dynamicLink">This link</a>
</div>

let app = new Vue({
  el: '#app',
  data: {
    dynamicLink: 'medium.freecodecamp.org'
  }
}

The v-bind: syntax is what Vue.js calls a "directive". It's a way to dynamically bind an attribute to data. As a shorthand, v-bind: can be replaced with :. You will often see it used that way, as this type of directive is widely used across projects. See more shorthands in the shorthand section of this Vue.js guide.

As a general rule, Vue.js makes it easy to recognize its declarations by always using the v- prefix : v-bind, v-for, v-if, v-else, v-on, and more.