Рубрика: Book

контент по изучению программирования по порядку

Рубрики
Vue директива Vue основы

Директива v-slot

Директива v-slot была представлена как новый единый синтаксис в версии 2.6.0

Предназначен для именованных слотов и слотов с ограниченной областью видимости.

Он заменяет атрибуты slot и slot-scope, которые в настоящий момент объявлены устаревшими, но _не_ удалены и документированы здесь. Обоснование введения нового синтаксиса описано в этом RFC.

Получаем более читабельный код, особенно, если имеем дело с вложенными слотами, когда действительно трудно понять что к чему.

можно использовать только для компонентов и тегов template, но не в чистых HTML-тегах.

директива v-slot во Vue.js
Vue.js
Рубрики
Vue компоненты Vue.js

Компонент Tabs

Компонент Tabs регистрируется глобально не явно выводи универсальные вкладки через props

универсальный компонент Tabs во Vue.js
Vue.js

tabs
массив объектов, содержит обязательно свойство name

comp
динамический компонент, который передаётся через props и используется в атрибуте :is абстрактного компонента component отсека template

resources\js\components\UI\Tabs.vue

<template>
<div>
<ul><li v-for="(tab, n) in tabs"><a :href="`#${n}`">{{tab.name}}</a></li></ul>
<!--в динамический компонент передаются данные--> 
<div v-for="(tab, index) in tabs" :id="`${index}`" title=""><component :data="tab" :is="comp"/></div>
</div>
</template>
<script>
export default{
    name:'Tabs',
    props:{
        //массив табов [{имя,контент},...]
        tabs:{type:Array,required:true},

        //динамическое имя компонента
        comp:{type:String,required:true},
    },
    mounted(){$(this.$el).tabs()},
}
</script>

какой-то компонент использует компонент Tabs

<template>
//имя любого зарегистрированного компонента
//value массив объектов содержит свойства name и data
<Tabs :comp="mycomponent" :tabs="value"/>
</template>
Рубрики
Vue компонент Vue основы

Структура секции Script в компоненте

Отсек script содержит логику компонента, которую можно вынести в Mixins для переиспользования в других компонентах.

<script>
export default{
name: 'full-name',//имя компонента для секции template
components:{...},
data:()=>{return object},
props:{...},
methods:{...},
hook(){...},
}
</script>
Рубрики
Laravel+Vue3 project Vue компонент Vue основы

Регистрация Компонента

Два вида регистрации

1. Глобальная

  • явная
  • не явная

2. Локальная

Рубрики
Vue директива Vue основы

Собственные Директивы

directives

Кастомная Директива представляет обычный объект, которая строится особым образом и имеют жизненный цикл. Происходит вынесение функции в отдельную директиву для того, чтобы переиспользовать в шаблоне любого компонента, где понадобится выполнение этой функции

Рубрики
Vue project Vue основы Vue3 логика

Mixins

Миксины или примеси

происходит слияние переиспользуемого объекта с компонентом

Мы можем заметить что у некоторых компонентов есть некие моменты одинаковые и мы можем их вынести в отдельный файл для переиспользования компонентам

<script>
data(){
methods:{}
computed:{}
watch:{}
...
</script>
Рубрики
Vue project Vue основы Vue3 логика

Composition API

концепция

позволяет решить проблемы
когда компонент сильно разрастается

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

позволяет совершать

  • декомпозиция
  • логические куски держать рядом (библиотеки)
  • добавляет некую особенность реактивности
Рубрики
CSS CSS основы

Базовые свойства

//размещение элемента по вертикали (вверх)
vertical-align: top;
//размещение элемента по середине
vertical-align: middle;
//рамка контейнера
border: 1px solid black;
//при наведении на элемент появляется курсор
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+Vue3 routes Роут

Примеры Route

Синтаксис Route

$uri

хост\api\путь

$callback

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

routes\api.php

get роут получает информацию от сервера
Route::get($uri, $callback);
post роут отправляет информацию на сервер для хранения
Route::post($uri, $callback);