Vue.js Baiscs Part 1

In this Vue.js series I will dig in to Vue documentation. First, I will go over the Vue tutorial.

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.

};

toggle

Vue is awesome!

Svelte are coming!

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.