I've got my hands on vue.js lately and most tutorials I'd seen out there are not so beginners friendly, so i'd decided to start this series to help #codeNewbies go from beginners to intermediate in Vue.js.
Please Note β οΈ: You should have a basic understanding of HTML, CSS and JavaScript before learning Vue.js. If you do not, here are great resources to help you get started.
Introduction
Vue.js is a pogressive JavaScript framework for building interactive user interface. Vue.js is considered as a goto framework by many developers because it is:
- Easier to learn compared to other frameworks/libraries like react, angular,...
- Have an easily understandable structure.
- Better runtime performance ...
What can i build with Vue.js ?
Below are some stuffs you can build with vue.js
- Single Page Applications (SPA)
- Multi Page Applications
- Native Android and iOS application - With Vue native
Getting started
Open your favourite text editor, create a new index.html
file and copy the basic html code below.
<html>
<head>
<title>Vue.js Tutorial</title>
</head>
<body>
<h1>Hello World</h1>
<div id="wrapper">
</div>
</body>
</html>
And, lets include the vue.js library source file in our code.
[+...]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
Now, lets go ahead and create a new vue instance using the new
keyword.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
[+...]
<script>
var app = new Vue({
el: "#wrapper",
data: {
myMessage: "Welcome to my vue app."
}
});
</script>
So what have we done?
The new Vue(..
keyword is to create a new instance from the Vue class. And this requires one important parameter which is the el
.
The el
is to specify where we want to wrap our vue application, and in this case it's our <div>
with the attribute id = wrapper
Recall: In DOM manipulation that
#
(hash) is to id, while.
(fullstop) is to class. So that's why ourel
value is #wrapper.
Data
During our new vue initialization, we'd added a second parameter data
- This is basically where we are going to house all the local properties we will be using while rendering our application, which is 100% reactivate (more on this later).
To access our property myMessage for example, our index.html
file should look like this.
<html>
<head>
<title>Vue.js Tutorial</title>
</head>
<body>
<h1>Hello World</h1>
<div id="wrapper">
<p>{{myMessage}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#wrapper",
data: {
myMessage: "Welcome to my vue app."
}
});
</script>
You'll notice we wrapped our myMessage in a mustache {{}}
structure. Other ways we can display our local properties is using the v-text
and v-html
attribute.
The difference between the v-text and v-html is that.
- v-text will display the data as plain text, while
- v-html will output the real html. > Run the pen below to see the difference in action.
Conclusion
This article is just an introduction to what vue.js is, and how to get started. In coming articles, I'll be covering crucial topics under Vue.js including:
- Binding data
- Methods
- Components
- Looping in Vue
- Conditional rendering (if & else)
- Vue CLI
- Nuxt.js maybe?
And... we will be learning all this by building real world applications π
Okay, why not follow me on twitter so you'll be notified first when I write a new article.
Thanks for reading π
Top comments (3)
Good material for beginners.
I think that might be useful for many pepole who just start learning Vue. Keep going π
Thank you π
Lit as always