DAY 01 - 100 Days With Vue

At last, I have started to learn Vue.js. Well, starting is the hard part of learning. Today I have learned about how to integrate Vue CDN and add Vue property to your project.
It's simple just add Vue CDN at the end of your Html file. Vue is ready for use.

Vue CDN

<script src="https://unpkg.com/vue@next" defer></script>

Adding Vue property in a particular HTML section

In your app.js (External JS file) file you have to create a Vue app and mount it into a particular section. Well you can use a variable to declare the Vue app

const app = Vue.createApp({});

To add this Vue app into your HTML code you need to use the mount function to this object. Mount accepts a string value of a CSS selector in which this Vue code applies. Here we have a section that has an id named #user-goal

const app = Vue.createApp({});
app.mount('#user-goal');

Nice ! Vue is mounted on that section

"data" property of Vue object

"data" is a predefined property of the Vue object which holds all the variables of the Vue app. "data" property always returns an object which holds a collection of variable names and values in a key-value pair. the variable value can be anything String, Number
, Boolean etc.

const app = Vue.createApp({
   data(){
      return {
        variable_name : "variable_value"
     }
  }
});
app.mount('#user-goal');

"Interpolations" Showing data property value

"Interpolations" is a fancy name of handlebars, if you want to show your variable value into HTML. Just use double curly braces and write the variable name which you had declared on the data property.

    <p>{{ variable_name }}</p>

"Interpolations" tells Vue to replace the variable name with the actual value of it. so you can't use "Interpolations" outside Vue mounted section.

"v-bind" attribute of Vue

Well, sometimes we need to pass value to Html attribute. For example, let's say you want to return a link to an anchor tag 'href' attribute, but if you use "Interpolations" it won't work. You need to use the "v-bind" attribute for that.
"v-bind" is a Vue attribute that helps to bind any Html attribute to Vue variables. Example :

    <p> <a v-bind:href="variable_name">Link </a></p>

P.S: There are more uses of v-bind and we can use the shorter version of v-bind, But for now, let's stick with this.

"v-html" attribute of Vue

Now let's say you want to show an Html code using a variable. If you use only "Interpolations" it will show markup value and won't fulfill the purpose. For that, you need to use v-html attribute.
Example:
In app.js

const app = Vue.createApp({
   data(){
      return {
        variable_name : "<h1> Hello this is value </h1>"
     }
  }
});
app.mount('#user-goal');

In index.html

     <p v-html="variable_name"></p>

"methods" property of Vue object

Till now, we have used only static data. We need to add some dynamic feel to it. To do this, we need to use the "methods" property of the Vue object. "methods" is a predefined property that accepts only JS objects that hold the collection of functions.

const app = Vue.createApp({
   data(){
      return {
        variable_name : "<h1> Hello this is value </h1>"
     }
  },
methods: {
    function_name: function () {
     //do something
    }
  }
});
app.mount('#user-goal');

We can use direct methods in "Interpolations"
In index.html

     <p> {{ function_name() }}</p>

Use "data" property into "methods"

Basically we need to use variable into methods for that we just need to use "$this" keyword.

const app = Vue.createApp({
   data(){
      return {
        variable_name : "<h1> Hello this is value </h1>"
     }
  },
methods: {
    function_name: function () {
      $this.variable_name = "new value"
    }
  }
});
app.mount('#user-goal');

Github Practice Code

Tahsin-Ahmed52225 / 100days-with-Vue