<template><div><!-- appear自动加载动画 --><transition appear><h1 v-show="isShow">你好</h1></transition><!-- name为设置多个过渡动画取别名 --><transition name="app"><h1 v-show="isShow">今天学习过渡动画</h1></transition> <!-- <transition-group>需要添加key值 --><transition-group appear><h1 v-show="isShow" key="1">你好</h1><h1 v-show="isShow" key="2">今天学习过渡动画</h1></transition-group> --><button @click="func()">调取demo接口</button></div>
</template><script>
import 'animate.css';
import axios from 'axios'
export default {name:"MyDay07",data() {return {isShow:true,}},methods:{// xhr// ajax// axios// fetch// 写了await必须写async// 协议 域名 端口// 跨域 http://localhost:80 http://localhost:90// cors jsonp nginx 代理 解决跨域问题的几种方案func(){axios.get('http://10.11.136.77:8080/api/student').then((res)=>{console.log(res);},(err)=>{console.log(err);})}}
}
</script><style>
.v-enter-active{animation: move 3s linear;
}
.app-leave-active{animation: move 3s linear;
}
@keyframes move {0%{color:red;transform: translateX(0px);}100%{color:orange;transform: translateX(100px);}
}
</style>

import axios from "axios"
const http = axios.create({baseURL:"http://localhost:8080",timeout:10000
})
// 请求代理拦截
axios.interceptors.request.use(function (config){return config;
},function(error){return Promise.reject(error);
})
// 响应拦截
axios.interceptors.response.use(function (response) {return response;
},function (error) {return Promise.reject(error);
})
export default http;

import Vue from 'vue'
import Vuex from 'vuex'
import user from './ljp/user.js'
import set from './ljp/set.js'Vue.use(Vuex)const store = new Vuex.Store({//所有组件共享的数据state: {count:100,title:"大标题",list:[1,2,3,4,5,6,7,8,9]},//提供方法，操作state中的数据mutations: {funAddOne(state,value){state.count += value},funRedOne(state,value){state.count -= value},delayOne(state,value){state.count = value}},//处理异步，不是直接操作state，先commit mutationsactions: {changeOne(context,value){setTimeout(()=>{context.commit('delayOne',value)},1000)}},//类似于计算属性getters:{filter(state){return state.list.filter((item)=>{return item>5})}},modules:{user,set}
})export default store

<template><div id="app"><!-- 父组件 -- {{ $store.state.title }} -- {{ $store.state.count }}<!-- v-model拆分 --><!-- <Student :value="age" @input="age = $event.target.value"></Student> --><!-- <button @click="isShow=true">点击退出登录</button> --><!-- <BaseDialog :visible="isShow" @update:visible="isShow=$event" /> --><!-- 场景:封装弹框类的基础组件，visible属性 true显示false隐藏 --><Children :visible.sync = 'isShow' /> <Children />{{ name }} --><attr/><!-- provide & inject --><!-- <button @click="changeColor">修改颜色</button><button @click="changeName">修改姓名</button> --></div>
</template><script>
import Children from './components/Children.vue'
import attr from "./components/atter.vue"export default {name: 'App',data () {return{// selectId:"2",isShow:false// 普通数据类型不是响应式color:'pink',// 复杂数据类型是响应式info:{name:'ljep'},name:''}},components: {Children,attr},methods:{// changeColor(){//   this.color='red'// },// changeName(){//   this.info.name='lhb'// },},mounted() {this.name = this.$children[0].name},
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>