Рубрика: Vue.js

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

— похожий
Angular, React

— плюсы
реактивность данных (обновлять данные на лету)

Рубрики
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

концепция

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

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

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

  • декомпозиция
  • логические куски держать рядом (библиотеки)
  • добавляет некую особенность реактивности
Рубрики
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 основы Vue.js Vue3 логика

Глобальное состояние приложения

Вынесение логики из компонентов в отдельный модуль, подключив его глобально

Установка VueX в терминале

npm install vuex@next --save
Рубрики
JQuery 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>