Loading...
Loading...
Vue.js is a progressive JavaScript framework for creating user interfaces. It's simple to learn, yet powerful and flexible, making it excellent choice for both small projects and large web applications.
Simplicity and convenience
Vue.js is designed with focus on ease of use. Its syntax is intuitive, and documentation thoroughly describes all capabilities.
Note:
Vue is often compared with React and Angular: it's lighter and easier to learn than Angular, but provides more structured approach than React.
High performance
Vue.js size (~20KB) is smaller than React or Angular, and its virtual DOM ensures fast rendering.
Reactivity
Vue uses reactive data system. If data changes, Vue automatically updates interface without need to manually manipulate DOM.
Component approach
Vue uses reactive data system. If data changes, Vue automatically updates interface without need to manually manipulate DOM.
<template>
<button @click="sayHello">Click me</button>
</template>
<script setup>
const sayHello = () => {
alert('Hello!');
};
</script>
Two-way data binding
Unlike React, Vue supports two-way data binding (v-model), simplifying form work.
<template>
<input v-model="name" placeholder="Enter name" />
<p>Hello, {{ name }}</p>
</template>
<script setup>
import { ref } from 'vue';
const name = ref('');
</script>
Modularity and ecosystem
Vue easily integrates with other technologies and offers powerful tools:
SSR and PWA Vue supports server-side rendering (SSR) with Nuxt.js and allows creating progressive web applications (PWA).
Good documentation and community support Vue documentation is simple and clear, and large community actively helps beginners.
Important to remember:
Vue.js is a reactive framework that works on "Data-Driven View" principle. This means interface (UI) automatically updates when data changes.
Creating Vue Instance
Every Vue application starts with creating Vue.createApp() instance.
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue!');
</script>
<template>
<h1>{{ message }}</h1>
</template>
What happens here?
ref('Hello, Vue!') makes message variable reactive.<template> {{ message }} is used, and Vue will automatically update DOM when message changes.Reactivity and DOM Updates
Vue uses reactive system to track data changes.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
<template>
<p>Counter: {{ count }}</p>
<button @click="increment">+</button>
</template>
How does it work?
count is reactive state created via ref.count changes (count.value++), Vue automatically updates HTML {{ count }} in template.Component Approach
Vue application is built from reusable components.
▶ Parent Component (App.vue)
<template>
<Counter />
</template>
<script setup>
import Counter from './Counter.vue';
</script>
▶ Child Component (Counter.vue)
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
</template>
Vue breaks application into small blocks (components) that can be reused.
Two-way Binding (v-model)
Vue supports two-way data and interface binding.
<script setup>
import { ref } from 'vue';
const name = ref('');
</script>
<template>
<input v-model="name" placeholder="Enter name" />
<p>Hello, {{ name }}!</p>
</template>
How does it work?
<input>, name updates.name is reactive, Vue automatically updates <p>Hello, ...</p>.Virtual DOM
Vue uses virtual DOM for fast interface updates.
How does it work?