Variables and Properties under VueJS

Today we will see the different types of properties and how to use them. We will start from our code VueJS created in the previous lesson.

"Reserved" properties of an VueJS instance

When you instantiate a View object, you can put it in a variable (named here "vm"). You can set properties for each View instance. These properties must be declared in "data" like this (in src/main.js):

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
var vm = new Vue({
  el: '#myApplication',
  template: '<App/>',
  components: { App },
  data: {
    attributeA: 'valueA',
    attributeB: 'valueB'
  }
})

// on les affiches
alert(vm.attributeA) // valueA
alert(vm.attributeB) // valueB

As you see, once instantiated, you can retrieve the values of these properties in "data" by calling the object "vm".
By default, a View object has already defined properties such as the "el" attribute or the "data" attribute that can be accessed by prefixing them with a "$".

Example:
Add to the end of the previous script:

// on les affiches
alert(vm.$data.attributeA); // valueA
alert(vm.$el.id) //myApplication

Define and display a property in a VueJS template

With VueJS, you can display the value of a property in a template by double-bracketing it like this "{{myvariable}}". If we want to display the value of "firstname" in the title, we will edit our component App/src/App.vue like this:

<template>
  <div id="app">
    <h1>Hello World {{ prenom }} </h1>
    <p>little text behind the title</p>
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          nom: 'Nom',
          prenom: 'Pierre'
        }
    }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

How to use "computed" VueJS properties

Let's say you want to create a dynamic property called "fullname" that concatene the lastname and firstname to make a single string. This dynamic property will be a function, we will tell it to concatenate the lastname with the firstname. It is possible to define a "computed" property in our Vue object to do this, this VueJS property contains all dynamic primitives. We can access a "data" of our VueJS object via "this". So let's create the "fullname" property like this:

<template>
  <div id="app">
    <h1>Hello World {{ fullname }} </h1>
    <p>little text behind the title</p>
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          firstname: 'Pierre',
          lastname: 'Fay'
        }
  },
  computed: {
    fullname: function () {
      return this.firstname + ' ' + this.lastname
    }
  }
}
</script>

You will now see "Hello World Pierre Fay".
Congratulations you just created your first "computed property" :)
Here we do a simple concatenation but we can imagine making a more complex treatment, it is you who decide what you do in the function.

Now you know how to use properties with VueJS! As usual do not hesitate to download the code from this tutorial below this article.