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

title
Declarative Rendering

Instalation

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.

The use of term "declarative" tends to straighten this concept to declarative languages, such as SQL: you order something, it's not implied any implementation. Vue.js allows you to declare what data you want to be rendered, as simply as that:

<div id="app">
  {{ message }}
</div>

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
});

With those snippets, you're telling Vue to dynamically render whatever is stored inside message variable. And the fun: whenever message is changed, Vue.js manages to reload that specific part of the DOM and you see the change.

If you want to try this reactivity out, open the console and change the value of app.message to, say, "Hello from console". Did you notice the change in the page?

The {{ ... }} 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 are cases in which what we want is to set an attribute using our Vue app's variable. You might think that the same syntax applies, but Vue has something specific for that, what we call "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 syntax v-bind is what Vue.js calls a "directive". It's a way to set a new attribute to the tag that will be handled by Vue -- there are more directives, they all begin with v-.