Рубрики
Vue Mixins Vue компонент 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 директива 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
Рубрики
Vue project Vue.js Жизнь компонента Vue

Разновидности хуков в Vue

beforeCreate
хук
он вызывается в тот момент, когда компонент ещё не был создан. На этом этапе инициализируются события и инициализируется жизненный цикл. Сам хук является достаточно редким кейсом в использовании.

cretaed
хук
в этот момент в компонент добавляются различные инъекции и реактивность. В этом хуке можно делать какую то дефолтную реализацию, проверять какие то условия

Отрабатывает рендер функция

beforeMount
хук
отрабатывает до того, когда компонент монтируется в дерево

mounted
хук
отрабатывает, когда компонент полностью монтирован в дерево. Он часто используемый. Его мы можем использовать для запросов на сервер. Компонент монтировался, запрос сделали и сразу какие то данные отрисовали.

После того как компонент монтировали, в нём могут изменяться какие то данные. Соответственно компонент будет перерендереваться. Для того чтобы отслеживать эти обновления есть два хука.

beforeUpdate
хук
отрабатывает перед обновлением

update
хук
отрабатывает после

компонент демонтируется
делается очистка.
отписываемся от каких то событий, очищаем stor

Рубрики
Var директива v-if Vue директива Vue.js

Директива «Отрисовка по условию» в Vue

Директива v-if или отрисовка по условию
вывести надпись, когда список например постов пустой

Если условие в v-if не выполняется, то элемент полностью удаляется из DOM дерева.

v-if
директива условие

если эта директива true, то блок, на котором прикреплена директива мы будем видеть (posts.length>0).
В обратной ситуации выведем какую то надпись

v-else
директива исключения

если не выполнилась v-if

v-else-if
директива исключения с условием

может сколько угодно быть. Так же создаётся условие и по цепочке проверяется до тех пор, пока какое то из условий не будет равняться true. И всю эту цепочку можно закончить директивой v-else.

v-show
директива похожая v-if

Если значение false, то блок получает стиль display:none.
Элемент просто скрывается, но в DOM дереве он всё ещё находится.

директива v-if во Vue.js
Vue.js