Vue.js Baiscs Part 1
Published: 2022-08-30 15:45:51

In this Vue.js series I will dig in to Vue documentation. First, I will go over the [Vue tutorial](https://vuejs.org/tutorial/#step-1).

**_Since I'm working on browser with Vue for now, this tutorial will not include how to set up Vue.js_**

## Using Script and Template Tags - Declarative Rendering

In script tags we write our JS code and script of the file that extends to HTML. We use states from here and make changes on our HTML.

You will see `data(){}` below, that's where we store our data. It must return something, otherwise it won't work. We can use values in our data() inside our `<template>` tags, that is where HTML stays.

```
<script>
export default {
  data () {
    return {
      msg: "Hello Vue!" // msg is property key || "Hello Vue!" is property value
    }
  }
}
</script>

<template>
  <h1> {{msg}} !</h1>
</template>
```

To use values in data, we need to type our property keys _**msg** in this case_ in double curly-bracets (a.k.a. mustache syntax)

## Bind Attributes

In the code below, I simply have a property key called `titleClass` and it has property value of `"title"`. `title` gets its styling from `style` tags. Shine your CSS skills in style tags :)

```
<script>
export default {
  data() {
    return {
      titleClass: "title",
    };
  },
};
</script>

<template>
  <h1 v-bind:class="titleClass">Change the color of this title</h1>
</template>

<style>
.title {
  color: red;
}
</style>

```
Shorthand for `v-bind` is `:` 

To bind attributes in Vue, we use `v-` prefix. So, to bind attributes we need to use `v-bind:` code that comes after colon `:` is the argument.

## Event Listeners

Use `v-on:` to use event listeners in Vue. I'm lazy, do we have a shortcut? Sure, it's `@`. So, instead of typing `v-on:click`, you can type `@`. _This time, I will go with shortcut version of **v-on:**_

```
<script>
export default {
  data() {
    return {
      count: 0
    	}
  	},
  	methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

<template>
  <!-- make this button work -->
  <button @click="increment">count is: {{ count }}</button>
</template>
```

The code block above has a button. It calls the `increment` method **when clicked** (`@` or `v-on:click` remember?). When you want to access your property keys in `data(){}` you must use the `this` keyword to get it in your methods. Otherwise, Vue won't know what you're referring to. That's because I'm coding in options style, and won't bother to get into detail about that here :)

## v-on and v-bind, or just use v-model - Form Bindings

In the code below, to type something inside an input and to render (get the value on your screen) its value we need a combination of `v-on:` and `v-bind`. With `v-bind:` we access the value of `text`, and with `v-on:` we call the onInput method that takes `event` as a parameter. To get the value we simply need `something.target.value`. Our parameter is event `e`, so to say `e.target.value` to get the value inside input. More, `text` property key (which is an empty string initially) will be assigned to the value inside the input.

```
<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-bind:value="text" v-on:input="onInput" placeholder="Type here" />
  <p>{{ text }}</p>
</template>
```

However, Vue.js makes things simpler for us and gives us the `v-model:` which combines `v-bind:` and `v-on:`. With `v-model:`, we do not need to call the function explicitly. Here it's:

```
<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-model="text" placeholder="Type here" />
  <p>{{ text }}</p>
</template>
```

In other words, I removed `v-on:` completely and changed `v-bind` with `v-model=`.

## Conditional Rendering

Use `v-if=""` `v-else=""` and if you have more conditions `v-else-if` for conditional rendering. If the condition is not satisfied, Vue **doesn't render it**. And that's the main difference between `v-if` and `v-show`. `v-show` renders in any case.

```
<script>
export default {
  data() {
    return {
      awesome: true,
    };
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome;
    },
  },
};
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Svelte are coming!</h1>
</template>
```

If `awesome` is `true` render `<h1 v-if="awesome">Vue is awesome!</h1>`, else render `<h1 v-else>Svelte are coming!</h1>`

Before I finish part, I want to talk about this line `this.awesome = !this.awesome`. This means, next value will be opposite of the current value when event listener is triggered. If current value is falsy, next value will be truthy and vice versa.

To sum it up, in this part we talked about declarative rendering (mustache syntax), bind attributes (v-bind), event listeners (v-on), form bindings (v-model), conditional rendering (v-if, v-else, v-else-if)

This is the end of part 1, I will go over `v-for` in the next part.

};
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Svelte are coming!</h1>
</template>
```

If `awsome` is `true ` render `<h1 v-if="awesome">Vue is awesome!</h1>`, else render `<h1 v-else>Svelte are coming!</h1>`

Before I finish part, I want to talk about this line `this.awesome = !this.awesome`. This means, next value will be opposite of the current value when event listener is triggered. If current value is falsy, mext value will be truthy and vice verca.

To sum it up, in this part we talked about declarative rendering (mustache syntax), bind attributes (v-bind), event listeners (v-on), Form Bindings (v-model), conditional rendering (v-if, v-else, v-else-if)

This is the end of part 1, I will go over `v-for` in the next part.