Рубрики
CSS CSS основы

Основы.CSS «объявление id и class»

  • синтаксис id
    • id #211018104515 {code} error
    • #211018104515_id {code} error
    • #211018104515-id {code} error
    • #id-211018104515 {code} successfully
  • синтаксис class
    • class .211018104515 {code} successfully
    • .211018104515-click {code} successfully
    • .click-211018104515 {code} successfully
Рубрики
Laravel Laravel основы Роут Роуты для Laravel проекта

Laravel Route с примерами

В Laravel Route с примерами представляют простейшие маршруты принимают URI (путь) и функцию-замыкание, предоставляя очень простой и выразительный метод определения маршрутор.

Все маршруты определены в файлах маршрутов, которые расположены в каталоге routes. Эти файлы автоматически загружаются фреймворком.

В файле routes/web.php определены маршруты для вашего web-интерфейса. Эти маршруты входят в группу посредников web, которые обеспечивают такие возможности, как состояние сессии и CSRF-защита. Маршруты из файла routes/api.php не поддерживают состояния и входят в группу посредников api.

Для большинства приложений сначала определяются маршруты в файле routes/web.php.

Синтаксис Laravel Route

$uri

хост\api\путь

$callback

роут вызывает колбэк-функцию или обратный вызов
функция, переданная в другую функцию в качестве аргумента, которая затем вызывается по завершению какого-либо действия.

routes\api.php

get роут получает информацию от сервера
Route::get($uri, $callback);
post роут отправляет информацию на сервер для хранения
Route::post($uri, $callback);
примеры Route в Laravel
Routes
Рубрики
Vue директива Vue основы Vue.js

Условная Директива

v-if

v-if директива if
bool выражение,которое возвращает true или false
если возвращает false, тогда тег удаляется
если возвращает true, тогда тег добавляется
<тег v-if="bool"/>

v-else

v-else директива else
если директива v-if возвращает false, тогда тег добавляется
если директива v-if возвращает true, тогда тег удаляется
<тег v-else/>
Рубрики
Vue project Vue store Vue основы Vue.js Vue3 логика

Структура Store

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-ов мы делаем какие-то сайт эффекты например получаем какие то данные из сервера, вызывем мутации и сохраняем эти данные в состоянии.

Глобальное состояние приложения во Vue.js
Vue.js
Рубрики
Laravel+Vue3 project Vue компоненты Vue.js

Vue Окно в движении

JQuery

включить библиотеку из интернета
главный шаблон 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>