CodeGid<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>
<script>
export default{
data(){
return {
ИмяОбъекта: Значение
}
}
}
</script><script>
export default{
props:{
ИмяПропса:{
type:Array,
requered:true,
}
}
}
</script>this.$store.dispatch(‘ИмяЭкшена‘);
this.$store.dispatch(‘ИмяМодуля/ИмяЭкшена‘);
хук 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 devtools
плагин в браузере хроме
в настройках ставим
F12 и открываем вкладку Vue
Эта директива парсится
в момент наступления события ИмяСобытия
сокращенная запись использования
@: ИмяСобытия=<<ИмяФункции>>
<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>