Глобальное состояние приложения представляет собой вынесение логики из компонентов в отдельный модуль, подключив его глобально
Установка VueX в терминале IDE приложения
npm install vuex@next --save
Рубрики
Установка Store
Метка: Vue.js
фреймворк JavaScript
- Первый модульный компонент Vue3 в Laravel проекте
resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>- регистрируем компонент Vue в Laravel проекте
resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from 'components/../App.vue';
//компоненты
import comp1 from 'components/comp1.vue';
import comp2 from 'components/comp2.vue';
//создание главного компонента
//и регистрация внутри него других компонентов
const app=createApp(App);
app.component('comp-1',comp1);
app.component('comp-2',comp2);
app.mount('#app');- На шаблоне Laravel проекта
(пример resources\views\index.blade.php)
размещение Vue3 компонента в id=»app» (примере my-test)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script src="./js/app.js"></script>
</body>
</html>- создание роуминга Laravel
для шаблона (пример resources\view\index.blade.php)
как главной страницы
на routes\web.php
...
Route::get('/', function () {
return view('index');
});
...создание функции внутри default
пример data
- Свойство data в компоненте всегда должна быть функцией, которая возвращает объект.
функция data возвращает объект
внутри возвращаемого объекта описываются все поля или модели
Интерполяция
синтаксис
{{Модель}}
- встраивание поля в шаблон и
регистрация поля data в компонент
src\App.vue
<template>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>
<script>
export default{
data(){
return {likes: 0,dislikes: 5}
}
}
</script>
<style>
</style>Событие
Объект вызывается как событие тега без возвращения значения
<template>
<a @click="Объект">test</a>
</template>Атрибут
Присвоить значению атрибута тега от Объекта
<template>
<a :title="Объект">test</a>
</template>Объект
- имя функции
- значение
- javascript выражение