HTML interpolation within Vue.js

HTML interpolation within Vue

Introduction

Vue.js is an MVVM framework, which has a system for how to connect a “model” (data) to a corresponding “view”. The “view” section is HTML, as in other frontend libraries, but with additional functionalities that allow it to dynamically display the model, such as:

  • “Interpolation”
  • “Directive”

Part of the HTML code used to interpolate is marked with double curly brackets, and this syntax is known as “Mustache syntax”. Everything within the double curly brackets will be processed by Vue.js and replaced with the appropriate result.

Text interpolation

If there is a text between parentheses that represents a property from a “data” object, this syntax will display within the HTML the current value from that property. Because the “given” property is specific and acts as a proxy to your instance, it is not necessary to use the syntax this.data.property, but only the name of the property is sufficient. The most important thing about text interpolation is that Vue.js will re-process everything within parentheses if a data change occurs, after which it will automatically update the HTML.

<p id = "example"> {{message}} </p>
 
<script>
     new Vue ({
       el: "#example"
       data: {
         messsage: "This text should be rendered!"
       }
     });
</script>

In this way, “data” is interpreted as plain text, not HTML. If HTML is to be evaluated then the “v-html” directive is used. It should be emphasized that text interpolation cannot be used to interpret HTML tag attributes, it is necessary to use the “v-bind” directive.

Interpolation of JavaScript expressions

When a JavaScript expression is found between double curly brackets, Vue.js will process it. After processing the expression within these double parentheses, Vue.js returns something that is DOM-friendly, something that can be converted to a string.

a) Interpolation of simple expression

Within the double curly brackets, a simple JavaScript expression can be found that will process Vue.js and render its result in that place. The limitation is that there can be only one JavaScript expression per set of curly brackets, meaning no loops and complicated logic are possible. So for complicated logic use “methods” or “computed properties“.

Example

{{ number + 1 }}
    //  or
{{ ok ? 'YES' : 'NO' }}

b) Interpolation of the “method” property

Mustache syntax can be used to show the results of a method definition, and this is sufficient to call the desired method within double-curly brackets:

<p> {{someMethod ()}} </p>
 
<script>
     let vm = new Vue ({
         data: {
             messsage: "Some text"
         }
         methods: {
             letMethod: function () {
                 return this.message.split (''). reverse (). join ('')
             }
         }
     });
</script>

Vue.js will call the method again each time the page is rendered.

c) Interpolation of the “computed” property

If we want to display the results of a “computed” property, then within the double curly brackets enter only its name (without brackets):

<p> {{someoneComputedType}} </p>
 
<script>
     let vm = new Vue ({
         data: {
             messege: "Hello"
         }
         computed: {
             somebodyComputedType: function () {
                 return this.message.split (''). reverse (). join ('')
             }
         }
     });
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *