Рубрики
Laravel Vue Путь

Абсолютный путь для Vue.js в Laravel

файл webpack.mix.js в корне проекта

const mix = require('laravel-mix');

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '': path.resolve(__dirname, 'resources/js')
    },
  },
});

любой файл, связанный с vue

../Project/resources/js/dir1/dir2/file.js
import { file1 } from '/dir1/dir2/file1';
../Project/resources/js/dir1/dir2/file2.vue
import { file2 } from '/dir1/dir2/file2.vue';
Рубрики
Vue компонент Vue компонент.script Vue компонент.template.getters

Getters в компоненте Template

Vuex позволяет использовать Getters в компоненте Template или «геттеры» в хранилище. Можете считать их вычисляемыми свойствами хранилища. Как и вычисляемые свойства, результаты геттера кэшируются, на основе его зависимостей и пересчитываются только при изменении одной из зависимостей.

Getters — это функции, которые повторно вычисляются при изменении переменной в модуле

Getters в компоненте Template во Vue.js
Vue.js
Рубрики
Vue директива Vue основы

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

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

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

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

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

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

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

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

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

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

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

Регистрация компонента может проводится двумя видами во Vue.js

1. Глобальная
регистрация компонента

  • явная регистрация
    До сих пор мы создавали компоненты с помощью Vue.component
  • не явная регистрация

2. Локальная
регистрация компонента

Глобальная регистрация часто не идеальна. Например, если вы используете систему сборки, такую как Webpack, глобальная регистрация всех компонентов означает, что даже если вы прекратите использовать компонент, то он всё равно будет включён в вашу сборку приложения. Это излишне увеличит количество JavaScript, который должны будут загрузить ваши пользователи.

В таких случаях вы можете определить свои компоненты как обычные объекты JavaScript

регистрация компонента во Vue.js
Vue.js
Рубрики
Vue директива Vue основы

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

directives

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

Помимо встроенных директив (таких как v-model и v-show), Vue.js позволяет использовать ваши собственные. При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.

собственная директива во Vue.js
Vue.js
Рубрики
Vue project Vue основы Vue3 логика

Mixins

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

Примеси — это гибкий инструмент повторного использования кода в компонентах Vue. Объект примеси может содержать любые опции компонентов. При использовании компонентом примеси, все опции примеси «подмешиваются» к собственным опциям компонента.

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

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

Composition API

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

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

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

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

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

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

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

npm install vuex@next --save
Глобальное состояние приложения во Vue.js
Vue.js