Рубрика: Фреймворки

Рубрики
Vue хук mounted в компоненте

Пример динамической подгрузки постов

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

Динамическая подгрузка постов
mounted

хук mounted представляет собой обычную функцию.
Нам необходимо вызвать функцию fetchPosts для того чтобы посты подгрузились сразу при первом открытии приложения.

setTimeout
Динамическая задержка
для того чтобы видеть загрузку

isPostsLoading
модель
индикатор, которая оповещает что загрузка идёт

src\App

<template>
<div class="app">
<h1>Страница с постами</h1>
<my-button
 @click="showDialog"
 style="margin: 15px 0;" кнопка не должна прилипать к заголовку
>Создать пост</my-button>
<my-dialog v-model:show="dialogVisible">

<post-form
@create="createPost"
/>
</my-dialog>

<post-list 
:posts="posts"
@remove="removePost"
v-if="!isPostsLoading"
/>
<div v-else>Идет загрузка...</div>
<div>
</template>

<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import axios from "axios";
export default{
components:{
 PostList,PostForm,
}
data(){
return {
 posts:[],
 dialogVisible:false, 
 isPostsLoading:false,
}
}
methods:{
 createPost(post,second,third){
  this.posts.push(post);
  this.dialogVisible = false;
 }
 removePost(post) {
  this.posts = this.posts.filter(p => p.id !== post.id)
 },
 showDialog(){
  this.dialogVisible = true;
 },
 async fetchPosts(){
  try{
   this.isPostsLoading = true;
   setTimeout(async()=> {
   const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
   this.posts = responce.data;
   this.isPostsLoading = false;
},1000)
  } catch(e){
   alert('ошибка')
  }
 }
},
 mounted(){
  this.fetchPosts();
 }
}
</script>

<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.app{
 padding: 20px;
}
</style>
Рубрики
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>