Section 3 Interpolation and Data

--> Explain Interpolation
What is Interpolation?

Interpolation, aka “String Interpolation”, we talk about the “Mustache” syntax{{ }}.
There are 4 types of interpolations:

1. Text
2. JavaScript Expressions
3. Raw HTML
4. Attributes

Text

1. <div id="app">
2.   {{ title }}
3. </div>
4.
5. data(){
6.    return {
7.       title: "I'm Interpolating!"
8.    }
9. }

We see that Vue is accessing the data property inside our Vie instance, is grabbing the title and ‘binding’ it’s value inside our {{ title }}.

JavaScript Expressions

1. <h1>Home Component 10 + 10 = { { 10+10 } }</h1>

Raw HTML
Until here we saw that whatever was inside our Mustache {{ }} was text, or interpreted as text, but what about if we want to bind some HTML? Imagine that we have a JSON where we have stored the content of the website, or we fetch it from the back-end. Most of the time, we will store the content as plain text, but sometimes we might get HTML instead.
For this we will need to use the v-html directive.

1. 1.
2. <div id="app">
3.    {{ title }}
4. </div>
5. The result of first attempt will be <h1 style='color: blue'>I\'m Interpolating</h1>
6. 2.
7. <div id="app">
8.    <span v-html="title"></span>
9. </div>
10. The result will be "I'm Interpolating" with blue color
11. data() {
12.     return {
13.       title: "<h1 style='color: blue'>I'm Interpolating</h1>"
14.     }
15. }

Attributes
As we saw with the v-html, there are times when we need to pass certain values to our HTML, for that, we use directives. Imagine we have to put a dynamic id, inside of a div in our HTML. For this we can use the v-bind directive.

The v-bind directive is a Vue. js directive used to bind one or more attributes, or a component properties( props ) to an element. If that attribute is bonded to our data defined in Vue instance then dynamically changes can be observed as data changes.

1. <div>
2.     <span v-bind:id="dynamicId"></span>
3. </div>

Directives are special HTML attributes that allow us to manipulate the DOM. Directives are very powerful and we use them every day. Common directives are v-if , v-for and v-model .


--> Interpolation and Data
Passing date from script to template

To pass data from <script> tag to <template> can do it as follow:

1. <template>
2.    <h1>Name: {{ name }}</h1>
3. </template>
4. <script>
5.     export default {
6.         name: "Hello",
7.         data() {
8.             return {
9.                 name: "Ivan"
10.             }
11.         }
12.     }
13. </script>


--> How to define functions and methods
How to define a function or methods? It’s easy, as it was with passing data.

1. <template>
2.     <h1>Name: {{ name }} Age:{{age()}}</h1>
3. </template>
4. <script>
5.     export default {
6.         name: "Hello",
7.         data() {
8.             return {
9.                 name: "Ivan",
10.                 getAge() {
11.                     return 25;
12.                 }
13.             }
14.         }
15.     }
16. </script>

A Vue method is an object associated with the Vue instance. Functions are defined inside the methods object. Methods are useful when you need to perform some action with v-on directive on an element to handle events. Functions defined inside the methods object can be further called for performing actions.

Define a method

1. <template>
2.     <h1>Fist name: {{ name }}</h1>
3.     <h1>Last name: {{ getLastName() }}</h1>
4. </template>
5. <script>
6.     export default {
7.         name: "Hello",
8.         data() {
9.            return {
10.              name: "Ivan"
11.            }
12.         },
13.         methods: {
14.            getLastName() {
15.                return "Ivanov";
16.            }
17.        }
18.     }
19. </script>