CodeGidexport default {
props:{prop1},
data(){},
methods:{},
computed:{},
watch:{},
...
}<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
mixins:[ИмяМексина],
}
</script>
v-if директива if
bool выражение,которое возвращает true или false
если возвращает false, тогда тег удаляется
если возвращает true, тогда тег добавляется
<тег v-if="bool"/>v-else директива else
если директива v-if возвращает false, тогда тег добавляется
если директива v-if возвращает true, тогда тег удаляется
<тег v-else/>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-ов мы делаем какие-то сайт эффекты например получаем какие то данные из сервера, вызывем мутации и сохраняем эти данные в состоянии.
beforeCreate
хук
он вызывается в тот момент, когда компонент ещё не был создан. На этом этапе инициализируются события и инициализируется жизненный цикл. Сам хук является достаточно редким кейсом в использовании.
cretaed
хук
в этот момент в компонент добавляются различные инъекции и реактивность. В этом хуке можно делать какую то дефолтную реализацию, проверять какие то условия
Отрабатывает рендер функция
beforeMount
хук
отрабатывает до того, когда компонент монтируется в дерево
mounted
хук
отрабатывает, когда компонент полностью монтирован в дерево. Он часто используемый. Его мы можем использовать для запросов на сервер. Компонент монтировался, запрос сделали и сразу какие то данные отрисовали.
После того как компонент монтировали, в нём могут изменяться какие то данные. Соответственно компонент будет перерендереваться. Для того чтобы отслеживать эти обновления есть два хука.
beforeUpdate
хук
отрабатывает перед обновлением
update
хук
отрабатывает после
компонент демонтируется
делается очистка.
отписываемся от каких то событий, очищаем stor
Директива v-if или отрисовка по условию
вывести надпись, когда список например постов пустой
Если условие в v-if не выполняется, то элемент полностью удаляется из DOM дерева.
если эта директива true, то блок, на котором прикреплена директива мы будем видеть (posts.length>0).
В обратной ситуации выведем какую то надпись
если не выполнилась v-if
может сколько угодно быть. Так же создаётся условие и по цепочке проверяется до тех пор, пока какое то из условий не будет равняться true. И всю эту цепочку можно закончить директивой v-else.
Если значение false, то блок получает стиль display:none.
Элемент просто скрывается, но в DOM дереве он всё ещё находится.