Vue.js is a progressive JavaScript framework that is used to build interactive user interfaces. It is known for its simplicity and flexibility, making it a popular choice for web developers. In this tutorial, we will cover the fundamentals of Vue.js and guide you through building a complete course using Vue.js 3.
Prerequisites
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. It is also helpful to have some knowledge of reactive programming concepts. If you are completely new to Vue.js, I recommend going through the official Vue.js documentation to get a better understanding of the framework.
Getting Started
To start using Vue.js in your project, you can include it directly from a CDN or install it using a package manager like npm or yarn. In this tutorial, we will use the CDN approach for simplicity.
You can include Vue.js in your HTML file by adding the following script tag:
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.prod.js"></script>Creating a Vue Instance
To create a Vue instance, you need to call the Vue constructor and pass in an options object. The options object can include properties like data, methods, computed, watch, etc. Here is a basic example of creating a Vue instance:
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue.js!'
};
}
});Template Syntax
Vue.js uses a simple and intuitive template syntax that allows you to bind data to the DOM. You can use double curly braces {{ }} to interpolate data in your template. Here is an example of using template syntax in Vue.js:
<div id="app">
<p>{{ message }}</p>
</div>Mounting the Vue Instance
After creating a Vue instance, you need to mount it to a DOM element using the mount method. You can do this by passing a CSS selector or a DOM element to the mount method. Here is how you can mount a Vue instance:
app.mount('#app');Directives
Directives are special attributes that are prefixed with v- and provide functionality to Vue.js components. Some commonly used directives in Vue.js include v-bind, v-if, v-for, v-on, etc. Here is an example of using directives in Vue.js:
<div id="app">
<p v-if="showMessage">{{ message }}</p>
</div>Components
Components are the building blocks of Vue.js applications and allow you to create reusable and composable UI elements. You can create a component by using the component method of a Vue instance. Here is an example of creating a simple component in Vue.js:
const HelloWorld = {
template: '<p>Hello, Vue.js!</p>'
};
app.component('hello-world', HelloWorld);Lifecycle Hooks
Vue.js provides a series of lifecycle hooks that allow you to run code at specific stages of a component’s lifecycle. Some commonly used lifecycle hooks include beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted. Here is an example of using a lifecycle hook in Vue.js:
const app = Vue.createApp({
beforeCreate() {
console.log('Component is about to be created.');
}
});Vuex
Vuex is the official state management library for Vue.js and provides a centralized store for managing application state. It allows you to define actions, mutations, getters, and modules to manage your application state in a predictable way. Here is an example of using Vuex in a Vue.js application:
const store = Vuex.createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
}
}
});
const app = Vue.createApp({
computed: {
count() {
return store.state.count;
}
},
methods: {
increment() {
store.commit('increment');
}
}
});
app.use(store);Conclusion
In this tutorial, we covered the fundamentals of Vue.js and showed you how to build a complete course using Vue.js 3. We discussed creating a Vue instance, using template syntax, directives, components, lifecycle hooks, Vuex, and more. Vue.js is a powerful and versatile framework that can be used to build a wide range of applications. I hope this tutorial has helped you get started with Vue.js and explore its capabilities further. Happy coding!
Thank you! This is great!
I'm so lucky to have clicked this Vue beginner intro when I first learned Vue. These fundamentals are going to help me a lot as my learning journey goes on. Thank you, Ben. By the way, this video is definitely underrated.
Very nice explaination, thanks
remember to use script setup! makes coding and finding bugs easier
Very nice explaination very nice teacher very nice Tutorial
Best tutorial on vue
Please can you include timeline forrr the tutorials?? It's scarry without it.
masyaAllah, thank you so much
Introduction
00:00:00 – 00:04:37
Ben Hong introduces the course by providing some personal background, discussing who this workshop is for, and the course prerequisites. Course resources and an overview of the workshop format are also covered in this segment.
Vue Overview
00:04:38 – 00:14:15
Ben discusses an overview of what Vue is and why to consider using Vue, including Vue being approachable, performant, versatile, community-first, and enterprise proven. A brief demonstration of some applications that use Vue is also included in this segment.
Creating a Vue App
00:14:16 – 00:20:51
Ben briefly discusses prerequisite knowledge for creating a Vue app and walks through how to create a base Vue application without using any build tools. Vue is being used directly from a CDN by placing a script tag into the HTML and can be configured via a defined configuration object.
Directives
00:20:52 – 00:32:32
Ben demonstrates using unique attributes with the v- prefix called directives, including v-if, v-else, and v-for, to reactively apply updates to the DOM when the value of its expression changes. Student questions regarding differences between Vue 2 and Vue 3, why the v-for directive is on the li element instead of the ul element, and if the data attribute is required are also covered in this segment.
Getting Started with Vue Exercise
00:32:33 – 00:40:19
Students are instructed to choose a TV show and use their newly gained knowledge of directives to create an HTML page, reactive data for characters on the show, and render an empty state if no characters exist. Ben then walks through a possible solution to the exercise, including a new syntax for returning data.
Getting Started Q&A
00:40:20 – 00:48:38
Ben answers student questions regarding if the if…else statement can be extended, if there are any gotchas with namespacing the characterList, and if characterList is globally available. How to render the characterList as a string instead of a list is also covered in this segment.
Event Handling & View Model
00:48:39 – 01:01:58
Ben demonstrates handling events in Vue, defining methods, and using the v-on and v-bind directives to call those methods to add interactivity to the page. The v-model directive can be used in place of v-on and v-bind to create a two-way binding.
Event Handling Q&A
01:01:59 – 01:09:47
Ben answers student questions regarding tracking the increment amount, passing arguments to methods, and the difference between @click and v-on click.
Event Handling Exercise
01:09:48 – 01:17:41
Students are instructed to add a favorite button to each character and render the favorited characters in a separate list. Ben then walks through a possible solution to the event handling exercise, including the bonus challenge.
Watchers & Computed Properties
01:17:42 – 01:26:16
Ben demonstrates using the watch option to trigger a function whenever a reactive property changes. Computed properties allow the ability to declaratively compute derived values.
Computed Properties Exercise
01:26:17 – 01:38:39
Students are instructed to create a statistics column for character attributes that leverages computed properties. Ben then walks through a possible solution to the computed properties exercise.
Computed Properties vs Watchers
01:38:40 – 01:41:31
Ben answers a student's question regarding real-life examples of when it is better to use computed properties over watchers.
Vue Tools
Progressive Enhancement
01:41:32 – 01:45:29
Ben discusses the ability to progressively enhance websites with Vue using the CDN to avoid complete code rewrites. A brief walkthrough of the process GitLab took migrating their app to Vue is also provided in this segment.
create-vue, Dev Tools, & Volar
01:45:30 – 02:01:57
Ben walks through creating a new Vue application using the Vite-based scaffolding tool create-vue, the contents of the generated application, and briefly demonstrates the available functionality of the Vue dev tools. A student's question regarding migrating an existing project to Vite is also covered in this segment.
Build Tools Exercise
02:01:58 – 02:13:46
Students are instructed to create a new project using create-vue named your ${show_name}-forum and migrate index.html into App.vue. Ben then walks through a possible solution to the build tools exercise. A student's question regarding using .vue without using Vite is also covered in this segment.
Custom Components
02:13:47 – 02:22:32
Ben demonstrates creating a custom component in Vue and scoping all of the associated JavaScript and HTML to that specific file. Components are pulled into the application by registering them in the exports under the components option.
Custom Components Exercise
02:22:33 – 02:31:07
Students are instructed to practice scoping, creating, and importing custom components to App.vue. Ben then walks through a possible solution to the custom component exercise and briefly discusses the data flow between the application and components.
Props
02:31:08 – 02:38:26
Ben walks through passing data to components by declaring props. A student's question regarding passing functions as props is also covered in this segment.
Props Exercise and Q&A
02:38:27 – 02:49:49
Ben instructs students to practice implementing props for their Vue application. Student questions regarding how to approach user details when creating a user card component, if computed properties could be used to pass data, if properties are passed by reference, and will the component rerender if the data changes outside of it are also covered in this segment.
Emitting Custom Events
02:49:50 – 03:00:43
Ben discusses defining and emitting custom events, defining global methods, and demonstrates the Vue dev tools timeline registering DOM events. Student questions regarding if events traveling multiple levels have to be caught and reemitted and if there is an emit equivalent in Vue 2.
Emitting Custom Events Exercise
03:00:44 – 03:14:40
Students are instructed to build out components as they see fit, whether receiving data from the parent or keeping it at the top level. Ben then walks through a possible solution to the exercise and answers some student questions. Student questions covered in this segment include having the favoriteCharacter function in a separate module, how the data gets into the favoritesList variable.
Let's review vue
I just started watching the tutorial and I already find it to be better than many other courses out there
https://youtu.be/fdfWM_CUAAg?t=7401 Create Vue project with create-vue comand
use full tutorial