<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
{{ message }}
</div>

<script>
const { createApp } = Vue

createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>

<!-- MyComponent.vue -->
<template>
<div class="component">
<h1>{{ title }}</h1>
<button @click="incrementCounter">Счетчик: {{ counter }}</button>
</div>
</template>

<script>
export default {
name: 'MyComponent',
props: {
title: String
},
data() {
return {
counter: 0
}
},
methods: {
incrementCounter() {
this.counter++
}
}
}
</script>

<style scoped>
.component {
padding: 20px;
background-color: #f5f5f5;
}
</style>

export default {
created() {
console.log('Компонент инициализирован')
this.fetchData()
},
mounted() {
console.log('Компонент добавлен в DOM')
},
methods: {
fetchData() {
// Запрос к API
}
}
}

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)
app.component('my-component', MyComponent)
app.mount('#app')

import MyComponent from './MyComponent.vue'

export default {
components: {
MyComponent
}
}

<template>
<div>
<my-component title="Привет, мир!"></my-component>
</div>
</template>

const Counter = {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++ // Автоматически обновит DOM
}
},
template: `
<div>
<p>Счетчик: {{ count }}</p>
<button @click="increment">Увеличить</button>
</div>
`
}

import { ref, reactive } from 'vue'

export default {
setup() {
// Примитивные значения оборачиваются в ref
const count = ref(0)

// Объекты оборачиваются в reactive
const user = reactive({
name: 'John',
age: 30
})

function increment() {
count.value++ // Для ref нужно обращаться через .value
user.age++ // Для reactive доступ прямой
}

return {
count,
user,
increment
}
}
}

<template>
<div>
<!-- v-bind (сокращенно :) -->
<img :src="imageUrl" :alt="imageDescription">

<!-- v-on (сокращенно @) -->
<button @click="handleClick">Нажми меня</button>

<!-- Условный рендеринг -->
<p v-if="showMessage">Это сообщение видно</p>
<p v-else>Альтернативное сообщение</p>

<!-- Отображение списков -->
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>

<!-- Двусторонняя привязка -->
<input v-model="message" placeholder="Введите сообщение">
<p>Вы ввели: {{ message }}</p>
</div>
</template>

export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
items: [1, 2, 3, 4, 5]
}
},
computed: {
// Вычисляемое свойство – кэшируется и пересчитывается только при изменении зависимостей
fullName() {
return this.firstName + ' ' + this.lastName
},
// Геттер и сеттер для двусторонней вычисляемой привязки
formattedName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length – 1]
}
},
// Фильтрация массива
evenItems() {
return this.items.filter(item => item % 2 === 0)
}
},
watch: {
// Наблюдатель – выполняется при изменении firstName
firstName(newValue, oldValue) {
console.log(`Имя изменилось с ${oldValue} на ${newValue}`)
this.saveToLocalStorage()
}
},
methods: {
saveToLocalStorage() {
// Сохранение данных
}
}
}

<template>
<form @submit.prevent="submitForm">
<div>
<label for="username">Имя пользователя:</label>
<input 
id="username" 
type="text" 
v-model="formData.username" 
:class="{ 'error': errors.username }"
>
<span v-if="errors.username" class="error-message">{{ errors.username }}</span>
</div>

<div>
<label for="email">Email:</label>
<input 
id="email" 
type="email" 
v-model="formData.email"
:class="{ 'error': errors.email }"
>
<span v-if="errors.email" class="error-message">{{ errors.email }}</span>
</div>

<div>
<label for="category">Категория:</label>
<select id="category" v-model="formData.category">
<option value="">Выберите категорию</option>
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ category.name }}
</option>
</select>
</div>

<div>
<label>Интересы:</label>
<div v-for="interest in interests" :key="interest.id">
<input 
type="checkbox" 
:id="'interest-' + interest.id" 
:value="interest.id" 
v-model="formData.selectedInterests"
>
<label :for="'interest-' + interest.id">{{ interest.name }}</label>
</div>
</div>

<div>
<label>Пол:</label>
<div>
<input type="radio" id="male" value="male" v-model="formData.gender">
<label for="male">Мужской</label>
</div>
<div>
<input type="radio" id="female" value="female" v-model="formData.gender">
<label for="female">Женский</label>
</div>
</div>

<div>
<label for="message">Сообщение:</label>
<textarea id="message" v-model="formData.message"></textarea>
</div>

<div>
<input type="checkbox" id="agreement" v-model="formData.agreement">
<label for="agreement">Я согласен с условиями</label>
</div>

<button type="submit" :disabled="!isFormValid">Отправить</button>
</form>
</template>

<script>
export default {
data() {
return {
formData: {
username: '',
email: '',
category: '',
selectedInterests: [],
gender: '',
message: '',
agreement: false
},
errors: {
username: '',
email: ''
},
categories: [
{ id: 1, name: 'Технологии' },
{ id: 2, name: 'Искусство' },
{ id: 3, name: 'Наука' }
],
interests: [
{ id: 1, name: 'Программирование' },
{ id: 2, name: 'Дизайн' },
{ id: 3, name: 'Музыка' }
]
}
},
computed: {
isFormValid() {
return this.formData.username && 
this.formData.email && 
!this.errors.username && 
!this.errors.email &&
this.formData.agreement
}
},
methods: {
validateUsername() {
if (this.formData.username.length < 3) {
this.errors.username = 'Имя пользователя должно быть не менее 3 символов'
} else {
this.errors.username = ''
}
},
validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (!emailRegex.test(this.formData.email)) {
this.errors.email = 'Введите корректный email'
} else {
this.errors.email = ''
}
},
submitForm() {
this.validateUsername()
this.validateEmail()

if (this.isFormValid) {
// Отправка данных формы
console.log('Форма отправлена', this.formData)
// Сброс формы
this.resetForm()
}
},
resetForm() {
this.formData = {
username: '',
email: '',
category: '',
selectedInterests: [],
gender: '',
message: '',
agreement: false
}
}
},
watch: {
'formData.username': function(newVal) {
if (newVal) this.validateUsername()
},
'formData.email': function(newVal) {
if (newVal) this.validateEmail()
}
}
}
</script>

<template>
<div>
<!-- Базовое событие клика -->
<button @click="counter++">Счетчик: {{ counter }}</button>

<!-- Вызов метода -->
<button @click="handleClick('Параметр')">Вызвать метод</button>

<!-- Доступ к объекту события -->
<input @input="handleInput">

<!-- Модификаторы событий -->
<form @submit.prevent="submitForm">
<!-- .prevent предотвращает действие по умолчанию -->
<button type="submit">Отправить</button>
</form>

<!-- Модификаторы клавиш -->
<input @keyup.enter="search">

<!-- Комбинирование модификаторов -->
<div @click.once.stop="handleSpecialClick">
Клик только один раз без всплытия
</div>
</div>
</template>

<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
handleClick(param) {
console.log('Клик с параметром:', param)
},
handleInput(event) {
console.log('Введено:', event.target.value)
},
submitForm() {
console.log('Форма отправлена')
},
search() {
console.log('Поиск запущен')
},
handleSpecialClick() {
console.log('Специальный клик сработал')
}
}
}
</script>

import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength } from '@vuelidate/validators'

export default {
setup() {
const state = reactive({
username: '',
email: ''
})

const rules = {
username: { required, minLength: minLength(3) },
email: { required, email }
}

const v$ = useVuelidate(rules, state)

return { state, v$ }
},
methods: {
submitForm() {
this.v$.$validate()
if (!this.v$.$error) {
// Форма валидна
// Отправка данных
}
}
}
}

npm install vue-router@4 # Для Vue 3

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import UserProfile from '../views/UserProfile.vue'
import NotFound from '../views/NotFound.vue'

const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/user/:id',
name: 'user',
component: UserProfile,
props: true // Передает параметры как пропсы
},
// Маршрут для ленивой загрузки компонента
{
path: '/dashboard',
name: 'dashboard',
// Динамический импорт для разделения кода
component: () => import('../views/Dashboard.vue'),
// Защищенный маршрут
meta: { requiresAuth: true }
},
// Маршрут 404
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: NotFound
}
]

const router = createRouter({
history: createWebHistory(),
routes
})

// Навигационный хук для защиты маршрутов
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')

<template>
<div>
<nav>
<!-- Навигационные ссылки -->
<router-link to="/" active-class="active">Главная</router-link>
<router-link :to="{ name: 'about' }">О нас</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">Профиль пользователя</router-link>
</nav>

<!-- Отображение компонента для текущего маршрута -->
<router-view></router-view>

<!-- Программная навигация -->
<button @click="navigateToDashboard">Перейти в панель управления</button>
</div>
</template>

<script>
export default {
methods: {
navigateToDashboard() {
this.$router.push('/dashboard')

// Альтернативные способы:
// this.$router.push({ name: 'dashboard' })
// this.$router.push({ path: '/dashboard', query: { tab: 'overview' }})
}
}
}
</script>

npm install vuex@next # Для Vuex в Vue 3
# ИЛИ
npm install pinia # Рекомендуется для новых проектов

// store/index.js
import { createStore } from 'vuex'

export default createStore({
state: {
count: 0,
todos: [],
user: null,
isLoading: false
},
getters: {
completedTodos: state => state.todos.filter(todo => todo.completed),
todoCount: state => state.todos.length,
isAuthenticated: state => !!state.user
},
mutations: {
// Синхронные изменения состояния
INCREMENT(state) {
state.count++
},
SET_TODOS(state, todos) {
state.todos = todos
},
ADD_TODO(state, todo) {
state.todos.push(todo)
},
SET_USER(state, user) {
state.user = user
},
SET_LOADING(state, status) {
state.isLoading = status
}
},
actions: {
// Асинхронные операции
async fetchTodos({ commit }) {
commit('SET_LOADING', true)
try {
const response = await fetch('https://api.example.com/todos')
const todos = await response.json()
commit('SET_TODOS', todos)
} catch (error) {
console.error('Failed to fetch todos:', error)
} finally {
commit('SET_LOADING', false)
}
},
async login({ commit }, credentials) {
commit('SET_LOADING', true)
try {
const response = await fetch('https://api.example.com/login', {
method: 'POST',
body: JSON.stringify(credentials),
headers: {
'Content-Type': 'application/json'
}
})
const data = await response.json()
if (data.user) {
commit('SET_USER', data.user)
localStorage.setItem('token', data.token)
return true
}
return false
} catch (error) {
console.error('Login failed:', error)
return false
} finally {
commit('SET_LOADING', false)
}
},
logout({ commit }) {
localStorage.removeItem('token')
commit('SET_USER', null)
}
},
modules: {
// Модули для разделения большого хранилища
// products: productsModule,
// cart: cartModule
}
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App)
.use(store)
.mount('#app')

<template>
<div>
<p>Счетчик: {{ count }}</p>
<button @click="increment">Увеличить</button>

<div v-if="isLoading">Загрузка...</div>

<div v-if="isAuthenticated">
<p>Привет, {{ user.name }}</p>
<button @click="logout">Выйти</button>
</div>
<div v-else>
<button @click="login">Войти</button>
</div>

<h2>Задачи ({{ todoCount }})</h2>
<button @click="fetchTodos">Загрузить задачи</button>
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
</ul>
</div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
computed: {
// Мапинг состояния и геттеров
...mapState(['count', 'todos', 'user', 'isLoading']),
...mapGetters(['todoCount', 'isAuthenticated'])
},
methods: {
// Мапинг мутаций и действий
...mapMutations({
increment: 'INCREMENT'
}),
...mapActions([
'fetchTodos',
'login',
'logout'
])
}
}
</script>

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++
},
async fetchAndUpdate() {
const response = await fetch('https://api.example.com/counter')
const data = await response.json()
this.count = data.value
}
}
})

// Использование в компоненте
import { useCounterStore } from '../store/counter'

export default {
setup() {
const counterStore = useCounterStore()

return { 
// Можно вернуть весь стор
counterStore,
// Или отдельные свойства и методы
count: computed(() => counterStore.count),
doubleCount: computed(() => counterStore.doubleCount),
increment: () => counterStore.increment()
}
}
}