Mastering VueJS

Content

  • First item
  • Second item
  • Third item
  • Fourth item

CLI Installation

The cli installation is easy but requires prior knowledge of NodeJS.

Installing the CLI is as easy as running the following command in your terminal (requires node/npm to be installed).

yarn global add @vue/cli
# OR
npm install -g @vue/cli

Introduction

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

Personally, Vue is the easiest frontend framework / library to learn.

Vue uses declarative rendering, this means that it can render data to the DOM using standard HTML template syntax such as;

<div id="block">
  <h1>Hello, World!</h1>
</div>

Using Vue you can create links between the data and the DOM for example if we have a prop or a variable in our <script></script> tag and this is updated the DOM will react and update to match the new data.

Directives

Vue uses html attributes known as directives e.g. 'v-on'. Directives can attach event listeners that invoke methods in our instances. See example below;

<div id="event-handler">
  <h2>Welcome</h2>
  <button v-on:click="doSomething">Click me</div>
</div>

The above snippet tells Vue to run the method doSomething when the button is clicked. The method is declared in the <script></script> tags under methods or more recently using the Vue composition API's setup method.

There is more directives than v-on, for example you can also use v-model to bind data to an DOM element or use v-if to conditionally render an element. There is a lot more too what you can find scattered around the Vue Website.

On top of the existing directives you can also create your own custom directives. Find out more here.

Videos

Everything Is AWESOME