Месяц: Апрель 2022

Рубрики
Vue.js

Отладка Vue в браузере

  • Автор записи Автор: bo52
  • Дата записи 17.04.2022

Отладка Vue.js

Vue.js devtools
плагин в браузере хроме

в настройках ставим

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

Открытие плагина

F12 и открываем вкладку Vue

  • мы можем отследить дерево компонентов
  • мы можем отследить модели у компонента, которую можем изменить
Рубрики
Vue директива Vue.js

Vue директива v-on

  • Автор записи Автор: bo52
  • Дата записи 17.04.2022
  • структура использования директивы в теге как атрибут
    v-on: ИмяСобытия=<<ИмяФункции>>

Эта директива парсится
в момент наступления события ИмяСобытия

сокращенная запись использования
@: ИмяСобытия=<<ИмяФункции>>

  • Использование директивы v-on в компоненте
    повесить слушатель события и связать с кнопками
<template>
<div>
<button v-on:click="addLike">Likes</button>
<button v-on:click="addDislike">Dislikes</button>
</div>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>

<script>
export default{

data(){return {likes: 0,dislikes: 5}}
methods:{ 
 addLike(){this.likes +=1;}
 addDislike(){this.dislikes +=1;}
}
</script>

<style>
</style>
Рубрики
Vue Mixins Vue.js

Примеры Vue Mixins

  • Автор записи Автор: bo52
  • Дата записи 17.04.2022

mydialog
компонент модальное окно

у него есть props show и в зависимости от этого пропса данное окно видимое или не видимое
есть функция, которая изменяет значение этого атрибута, например делает emit

  • использование для компонента
    List
    кастомный выпадающийся список
  • создание мексина
    может быть видим или не видим.
    есть функция, которая значение это меняет
    mixins\toggleMixin.js
export default{
 props:{
  show:{type:Boolean,default:false}
 },
 methods:{
   hideDialog(){
     this.$emit('update:show',false);
   }
 },
}
  • вызов миксина (пропса)
    в каком то компоненте в проекте
<template>
{{show}}
</template>
<script>
import toggleMixin from './mixins/toggleMixin';
export default {
 mixins:[toggleMixin],
}
</script>
Рубрики
Vue hook

Использование Hook в компоненте Vue

  • Автор записи Автор: bo52
  • Дата записи 16.04.2022
  • Создание Hook файла по структуре
    hooks\ИмяХука.js
//импортирование модификатора по созданию переменных
//и/или лайвсак методы 
//в хук функции
import {ref,onMounted,onCreated,computed,watch} from 'vue';
export function ИмяХука(Стат.Параметры){
//тело функции хука
//lat ИмяПеременной=ref(Значение) 
//реактивные переменные, где 
//изменение переменной через value
//использование лайвсак методы
//onMounted(параметр);
//onCreated(параметр);
//computed(параметр);
//watch(параметр);
//return {ИмяПеременной,...};
}
  • Вызываем хук в компоненте в script и template
<template>
<div v-model="ИмяПеременной"></div>
</template>

<script>
export default{
setup(props){
  //объект возвращает хук
  const {ИмяПеременной,...} = ИмяХука(Параметр);
  ....
  return {ИмяПеременной,...};
}
}
</script>
Рубрики
Vue store

Модульность Store

  • Автор записи Автор: bo52
  • Дата записи 14.04.2022
  • создание модуля store
    resources\Store\dir\ИМЯ_МОДУЛЯ.js 
export const ИМЯ_МОДУЛЯ = {
 state:()=>({
  //переменная: Значение,
 }),
 getters: {
  //функция_считает(state,getters){...return}
 },
 mutations: {
  //функция(state,параметры){...}
 },
 actions: {
  //функция({state,commit,}){...}
 }
}
  • регистрация store модуля в главном store модуле
    resources\Store.js 
import {createStore} from "vuex";
import {имя_модуля} from "./store/dir/имя_модуля";

export default createStore(
...
  modules:{
    ...
    ИМЯ_МОДУЛЯ:имя_модуля
  }
})
  • обращение к объекту из модуля
    в компоненте в секции template
{{ $store.Секция.ИМЯ_МОДУЛЯ.ИмяВСекции}}