VueJS?
VueJs is a lightweight, easy to learn Framework. It allows you to take a webpage and split it up into reusable components each having their own HTML, CSS and Javascript. Vue is reactive, when data changes Vue takes care of updating all the places where we are using it.
Vue was created by Evan You and it was released in February 2014.
Let’s go ahead and create our first project!
First, lets create a new folder
mkdir vue-project
cd vue-project
To create our new project first we need to install vue cli which it stands for command-line interface and it will help you develop projects with Vue. vue/cli hides the complexity of having to know babel or webpack and it will simplify starting a project and building it.
npm install -g @vue/cli
Now we can create our Vue app:
vue create vue-app
I will ask you to select your preset. Let's pick the last version, Vue 3.
Once it finishes creating your project you can go to your app by adding these commands in your terminal
cd vue-app
npm run serve
It will show you where is your app running at locally
and if you go there, you will see your first Vue app!
At this point we have some cleanup to do.
Let's go to our root folder in our VSCode and delete the HelloWorld.vue component that will be in src/components. This will make your app freak out because it is looking for a component that is not there anymore, so we will have to change a coupe of think in App.vue.
Let’s go to App.vue and let’s delete what they have inside of 'template' and add an
H1 with hello world and in the 'script' let’s delete the import for HelloWorld and HelloWorld from the components
In 'style' we are going to delete a couple of things and add a margin top of 0 so we can start your css from scratch. It would look something like this.
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
* {
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
</style>
Now we have a fresh app ready to go!
Let’s explain now a little bit more of how the component works
In Vue instead of dividing the code base in three huge layers that work with another, Vue divides them into loosely-coupled components. In the component you can do your HML logic in “template”, Javascript inside “script” and CSS inside “style”.
What is different between Vue.js 2 and Vue.js 3 ?
Vuejs 3 introduces the composition IPA which instead of having options in your objects like :
<script>
export default {
name: "App",
data:
methods:
computed:
};
</script>
Now we have a single function called setup where you would have all your logic.
<script>
export default {
name: "App",
setup() {
function example() {
// function logic
}
},
return {
example,
};
};
</script>
Let's go back to our project and lets make a form with an input and a button.
We would have to go to template and add:
<template>
<div>
<form>
<h1>Hello World</h1>
<input />
<button>I am a button</button>
</form>
</div>
</template>
In Vue.js you can add event listeners to elements and you can do it by putting ‘v-on’ or the shortcut ‘@‘ and we will add submit and create a function that binds to this form.
<template>
<div>
<form @submit="addToPage"> // <== binds to addToPage
<h1>Hello World</h1>
<input />
<button>I am a button</button>
</form>
</div>
</template>
<script>
export default {
name: "App",
setup() {
},
};
</script>
Now we have to create addToPage function inside our setup
And return the function like this.
<script>
export default {
name: "App",
setup() {
function addToPage() {
console.log('click')
}
return {
addToPage,
};
},
};
</script>
When we test our form and press the button the page will refresh and we don’t want that so Vue has a helper for that. You just need to add ‘prevent’ like this
<form @submit.prevent="addToPage">
Now you will see that our console log appears when we click the button!
To save a value we need to import reactive from Vue. Now we can save a data which we will call word. Don't forget to return data, like this:
<script>
import { reactive } from "vue";
export default {
name: "App",
setup() {
const data = reactive({
word: "",
});
function addToPage() {
console.log('click')
}
return {
addToPage,
data,
};
},
};
</script>
Now let’s bind the text input to that specific variable with v-model and now we need to add to data as well.
<template>
<div>
<form @submit.prevent="addToPage">
<h1>Hello World</h1>
<input v-model="data.word" />
<button>I am a button</button>
</form>
</div>
</template>
Now if you type in the input you will be saving the input to data.
To finish up lets add words which will be an array of all the words typed in the input and they will display in our page. Now we will add logic to our addToPage. addToPage will push into our words array every word we type into our input.
<script>
import {
reactive
} from "vue";
export default {
name: "App",
setup() {
const data = reactive({
word: "",
words: [],
});
function addToPage() {
data.words.push(data.word);
}
return {
addToPage,
data,
};
},
};
</script>
Alright great! now the last thing we have to do is to be able to loop through the array and display it in our page. Vue.js has 'v-for' which renders a list of items based on an array. Let's add some stuff to our template.
<template>
<div>
<form @submit.prevent="addToPage">
<h1>Hello World</h1>
<input v-model="state.word" />
<button>I am a button</button>
</form>
<ul>
//syntax for looping in Vue
<li v-for="(w, index) in state.words" :key="index"> // <== we need a key for it to work!
<h1>{{ w }}</h1> // <== displaying our array
</li>
</ul>
</div>
</template>
THERE YOU GO!
Conclusion
Vue is a fantastic framework and it has become one of the most popular Javascript frameworks because it makes the developer's job much easier when creating new applications. I had a good experience using Vue and I encourage everybody to give it a look.
Top comments (0)