Introduction to Vue js

A short and quick intro to Vue js

Introduction to Vue js

A short and quick intro to Vue js

But, who are you?

I’m Ismail, known as Smakosh on the web.
A self-taught designer & developer
I made few products, some are online like Ontwik, others are dead like Beaf while the rest are sinking like Ai Hashtags
OSS developer and blogger, you can find me on GitHub or Twitter under the username Smakosh
Huge fan of tech, finance, crypto, sci-fi and anime

So, what is Vue.js?

A JavaScript framework that lets you build web UIs, its core concepts are:

Vue instances
SFC (Single file components)
- template
- script
- style
Vue directives
State (data)
Methods (default lifecycle hooks)

Lifecycle methods are called outside the "methods" object.

<template>
  <div id="app">
    <input name="name" v-model="name" />
    {{name}}
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      name: "",
    };
  },
  methods: {
    handleName: function (event) {
      this.name = event.target.value;
    },
  }
};
</script>

<style>
#app {
  color: #2c3e50;
}
</style>
<template>
  <div id="app">
    <input name="name" v-model="name" />
    {{name}}
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      name: "",
    };
  },
  methods: {
    handleName: function (event) {
      this.name = event.target.value;
    },
  }
};
</script>

<style>
#app {
  color: #2c3e50;
}
</style>

Vue directives

Piece of code that get binded to a certain DOM element or component


`v-show`	show an element if certain condition is met but it’s still in the DOM
`v-bind`	binds one or more attributes to a DOM element or a component prop to an element
`v-on`	Lets you listen to DOM events to run some JavaScript when the events are triggered
`v-model`	Used for binding with form inputs
`v-if / v-if-else / v-else`	Same thing as v-show except it removes it from the DOM
`v-for`	Iterate through Arrays and Objects
`v-once`	Renders the element once and will never change

Data (state)

<script>
export default {
  name: "App",
  data: function () {
    return {
      name: "",
    };
  },
  methods: {
    handleName: function (event) {
      this.name = event.target.value;
    },
  }
};
</script>
<script>
export default {
  name: "App",
  data: function () {
    return {
      name: "",
    };
  },
  methods: {
    handleName: function (event) {
      this.name = event.target.value;
    },
  }
};
</script>

Methods (with default lifecycle hooks)

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

You can access any state within these methods using the “this” keyword

<script>
export default {
  name: "App",
  data: function () {
    return {
      name: "",
    };
  },
  created: function (event) {
    this.name = "created";
  },
  methods: {
    handleName: function (event) {
      this.name = event.target.value;
    },
  }
};
</script>
<script>
export default {
  name: "App",
  data: function () {
    return {
      name: "",
    };
  },
  created: function (event) {
    this.name = "created";
  },
  methods: {
    handleName: function (event) {
      this.name = event.target.value;
    },
  }
};
</script>

How is Vue different from React js?

Standard syntax, no new syntax like JSX added to the learning curve
Style is scoped by default, you wouldn’t really need CSS in JS or CSS modules
Uses Mustache syntax for data binding’s interpolation
Directives
Methods
CLI with customization options
Vue plugins
Built-in router as a Vue plugin

Demo time

That’s all, questions time!

Documentation · GitHub · Twitter · Written version