This course is really easy to follow and it will teach you the basics about Vue.js. You can find all the source code used in this series by visiting the github repo: https://github.com/thedevdojo/vue-js-basics. This video course has 7 videos total. Each of these videos are listed below.
1. Introduction
In the first video you will get a brief introduction about this course. We'll tell you what you can expect to learn in throughout this video course.
2. Installation and the Vue Instance
In this video you will learn how to Install Vue JS and we will also show you how to create your first Vue Instance.
Take a look at the example code used in this video below:
<!DOCTYPE html>
<html>
<head>
<title>Nice to Meet Vue 2</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Tony'
},
created: function(){
}
// mounted, updated, destroyed
});
</script>
</body>
</html>
3. Vue Data Binding
In this video you will learn how to bind data to your application. You will also learn how to do 2 way-data binding which is really cool.
Checkout the code used from this video below:
<!DOCTYPE html>
<html>
<head>
<title>Nice to Meet Vue 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<input type="text" v-model="name"><br><br>
<span :id="id">Hello </span>
{{ name }}
<br><br><div v-html="html"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Tony',
id: 'greeting',
html: '<a href="http://google.com">Google</a>'
},
updated: function(){
console.log('updated');
}
// mounted, updated, destroyed
});
</script>
</body>
</html>
4. Watchers and Computed Properties
In this video you will learn how to use Watchers and Computed Properties in your Vue.js application. A watcher will watch for a variable to change and perform some type of functionality; whereas, a computed property will be computed every time it is called.
<!DOCTYPE html>
<html>
<head>
<title>Nice to Meet Vue 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<input type="text" v-model="first_name">
<input type="text" v-model="last_name"><br><br>
{{ name }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
first_name: 'John',
last_name: 'Doe'
},
computed: {
name: function(){
return this.first_name + ' ' + this.last_name;
}
}
// watch: {
// first_name: function(){
// this.name = this.first_name + ' ' + this.last_name;
// },
// last_name: function(){
// this.name = this.first_name + ' ' + this.last_name;
// }
// },
// created: function(){
// this.name = this.first_name + ' ' + this.last_name;
// }
// mounted, updated, destroyed
});
</script>
</body>
</html>
5. Vue Conditionals and Loops
Adding conditionals and loops in your Vue application is super simple. In this video you will learn how to add conditionals and loops to your document with Vue.
You can find the code that was used in this video below:
<!DOCTYPE html>
<html>
<head>
<title>Nice to Meet Vue 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<template v-if="fridge == 'full'">The Fridge is Full. Let's Eat!</template>
<template v-else-if="fridge == 'half-full'">We can still eat!</template>
<template v-else>
<p>The Fridge is Empty. Let's Get Some Groceries</p>
<ul>
<li v-for="(food, key, index) in groceries">{{ index+1 }} : {{ key }} - {{ food }}</li>
</ul>
</template>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fridge: 'empty',
//groceries: ['Milk', 'Eggs', 'Cheese']
groceries: {
milk: 'Almond Milk',
eggs: 'Organic Eggs',
cheese: 'Provolone Cheese'
}
}
});
</script>
</body>
</html>
6. Events and Methods
In this video you will learn how to use events and methods in your Vue application. These events can be things such as a mouse click or a keyup event.
You can find the code that was used in this video below:
<!DOCTYPE html>
<html>
<head>
<title>Nice to Meet Vue 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<a href="http://google.com" @click.prevent="increment">+1</a>
<!--input type="button" value="+1" @click="increment"-->
The Counter is {{ counter }}
<input type="text" v-on:keyup.ctrl.67="customFunction">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
increment: function(event){
this.counter += 1;
},
customFunction: function(){
alert('We hit Ctrl+c');
}
}
});
</script>
</body>
</html>
7. Components
In this video you will learn how to create your own custom components. Vue components are super powerful and really simple to create.
You can find the code that was used in this video below:
<!DOCTYPE html>
<html>
<head>
<title>Nice to Meet Vue 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<my-counter text="+1"></my-counter><br>
<my-counter text="add One"></my-counter>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
Vue.component('my-counter', {
props: ['text'],
template: '<div><input type="button" :value="text" @click="counter += 1">The Counter is {{ counter }}</div>',
data: function(){
return {
counter: 0
}
}
});
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html>
Vue.js is quickly becoming one of the most popular javascript frameworks, so learning this awesome javascript tool will be super beneficial. Checkout the resources below.
Comments (0)