CodeGidфреймворк
JavaScript
с открытым исходным кодом
для создания пользовательских интерфейсов
похожий
Angular, React
плюсы
реактивность данных (обновлять данные на лету)
v-if директива if
bool выражение,которое возвращает true или false
если возвращает false, тогда тег удаляется
если возвращает true, тогда тег добавляется
<тег v-if="bool"/>v-else директива else
если директива v-if возвращает false, тогда тег добавляется
если директива v-if возвращает true, тогда тег удаляется
<тег v-else/>resources\store.js
главный файл, в котором
подключаются остальные модули Store
из папки resources\store\store\…js
import {createStore} from "vuex";
export default createStore({
state:{
},
getters:{
},
mutations:{
},
actions:{
},
modules:{
},
});для того чтобы создать глобальное хранилище используется функция createStore который принимает объект с полями.
Четыре поля составляют ядро VueX
state
само состояние. Описываем данные, которые в нашем приложении
getters
некие computed свойства. Кэшируемые вычисляемые значения
mutations
изменять состояние напрямую мы не можем, но можем изменять с помощью мутации. Мутации представляют из себя функции, внутри которых мы меняем значение какого то поля в состоянии.
actions
функции, которые используют внутри себя мутации. Напрямую из actions изменять состояния не рекомендуется.
Но мы можем внутри этих action-ов делать мутации. В свою очередь внутри action-ов мы делаем какие-то сайт эффекты например получаем какие то данные из сервера, вызывем мутации и сохраняем эти данные в состоянии.
включить библиотеку из интернета
главный шаблон Laravel
resources\views\index.blade.php
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://codegid.ru/default/js/jquery/jquery-1.7.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag.live-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/ui/1.12.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="app">
<my-app/>
</div>
<script src="./js/app.js"></script>
</body>
</html>Вывод UI модального окна для создания записи
routes\api.php
роутинг модуля в Laravel обращается
к контроллеру ElementsController
для получения записей из БД через метод index
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ElementsController;
вывести все записи таблицы через контроллер
Route::get('/all',[ElementsController::class, 'index']);