Месяц: Ноябрь 2021

Рубрики
Vue компонент Vue Mixins Vue3 логика

Структура Mixins в Vue

  • Структура примеси файла
    mixins/ИмяМексина.js
export default {
 props:{prop1},
 data(){},
 methods:{},
 computed:{},
 watch:{},
...
}
  • Использование примеси в компоненте
    На примере обращение к пропсу prop1
<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
 mixins:[ИмяМексина],
}
</script>
Mixins во Vue.js
Vue.js
Рубрики
Vue декомпозиция Composition Api Vue3 логика

Composition API (setup) в компоненте

setup
функция принимает параметры props

ref
функция используется для того чтобы переменная стала реактивной, которая параметром принимает значение

Всё что мы вернём функции setup будет доступно в шаблоне компонента <template>

<template>
<div>{{myvar}}</div>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(Значение);
  return {myvar};
 }
}
</script>

Состав
Динамически изменить переменную
Value

  • создаём стрелочную функцию, в которой внутри тела изменяем значение переменной, обращаясь к полю value
  • отметим возвращение функции addmyvar из setup для доступа в шаблоне компонента
    (привязка к button прослушивание события click)
<template>
<div>{{myvar}}</div>
<button @click="addmyvar">add</button>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(0);
  const addmyvar = () =>{
    myvar.value+=1;
  }
  return {myvar,addmyvar };
 }
}
</script>
Рубрики
Fragments "CSS" CSS

«Примеры стилей»

  • элемент «высота»
//высота по родительскому элементу
height: inherit;
  • элемент «вертикальное расположение»
//размещение элемента по вертикали (вверх)
vertical-align: top;
//размещение элемента по середине
vertical-align: middle;
  • элемент «рамка»
//рамка контейнера
border: 1px solid black;
  • элемент «Mouse»
//при наведении на элемент появляется курсор
cursor: pointer;
Рубрики
CSS CSS основы

Синтаксис

//синтаксис id
#211018104515 {code} error
#211018104515_id {code} error
#211018104515-id {code} error
#id-211018104515 {code} successfully
//синтаксис 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