My First impression on VueJs

I am a software engineer working on the front end. For a couple of years, I work with React on hobby projects. My professional experience started six or seven months ago. My front-end knowledge is increasing day by day, and I want to look at VueJs from a professional side.

Installation

When you open the Vues documentation, It is clear, easy to read, and understandable. Documentation welcomes the reader with What is Vue firstly. Also, there has a link under this introduction about the video course. I skipped all these parts, directly came to the installation part.

In the installation part, there has an NPM package to install Vue. You can directly use this command;

$ npm install vue

If you want a new project, you should visit the cli.vujs.org page to creating a project. The documentation on this side wants to run vue/cli. Then, you can check the version of the Vue.

$ npm install -g @vue/cli
$ vue --version

In Creating a Project side, ‘vue create’ helps us to create. Also, it asks questions like do you want to constitute a project Vue2 or Vue3, and do you want to use yarn or npm. In this scenario, I selected Vue2.

$ vue create my-project

After this, the Vue project has to be built on your machine. It says ‘cd my-project’ and ‘yarn serve’. You should get going inside the project on the terminal and starts the project.

$ cd my-project
$ yarn serve

Then, yarn runs directly on terminal. At that moment, on terminal you should see ‘App running at: …’

DONE  Compiled successfully in 3218ms                                
App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.11:8080/

Open your browser and go to the localhost page. And, Vue.js App salutes us. As you know, we did not touch some codes while doing these. Ope the code on VS code, atom, or what you use for a source code editor. I use the VS code, and I install the Vue extension. In that first look, folder management is basic and simple.

After this point, the main subject is starts. How to write some Vue code? :)

Basic Vue

When you check the created files, you can understand how to create a component and use it. Written files look likes HTML documents. In JSX, all files are javascript based (.js) and using HTML inside of the javascript. But, Vue is different from the JSX concept. It uses HTML-based template syntax which is using javascript inside of HTML. You can take much information on the document in the Template Syntax section.

Interpolations

Double curly braces are used for the basic form of data binding. In documentation says that it is “Mustache” syntax. The name is replaced with the value of the assigned value of the name.

<span>Hello, {{ name }}</span>

The weird thing is Raw HTML. You can not use HTML inside the mustaches interprets. If you want to use another HTML in mustaches you have to use ‘v-html’. Also, using javascript is available in these mustaches.

<p>Using mustaches: {{ rawHtml }}</p> 
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
{{ number + 1 }}
{{ message.split('').reverse().join('') }}

Directives

Directives can usable with the v- prefix. These are special attributes. The documentation says that ‘Directive attribute values are expected to be a single JavaScript expression. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction’. I think this concept can be learnable with practice.

<p v-if="seen">Now you see me</p>
<a v-bind:href="url"> ... </a>
<a v-on:click="doSomething"> ... </a>

Also, modifiers exists for easy to use. These are special postfixes denoted by a dot. For example, it looks like event.preventDefault() but simpler version, .prevent modifier on v-on.

<form v-on:submit.prevent="onSubmit"> ... </form>

So, today we are installed Vue and take a quick tour of basic codes. And, notes are taken. In the documentation, I read these parts;

• Installation
• Introduction
• The Vue Instance
• Template Syntax

I suggest you read all of these in documentation if you don’t read. Because reading docs is a good skill for everybody. My Vue notes will be continued…

30 day blogging challenge #8