< template>
< div>
< transition appear >
< h1 v-show = " isShow" > 你好</ h1>
</ transition>
< transition name = " app" >
< h1 v-show = " isShow" > 今天学习过渡动画</ h1>
</ transition>
< 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 : {
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 ]
} ,
mutations : {
funAddOne ( state, value ) {
state. count += value
} ,
funRedOne ( state, value ) {
state. count -= value
} ,
delayOne ( state, value ) {
state. count = value
}
} ,
actions : {
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拆分 -- >
< Children :visible.sync = ' isShow' />
< Children />
{{ name }} -->
< attr/>
</ div>
</ template>
< script>
import Children from './components/Children.vue'
import attr from "./components/atter.vue"
export default {
name : 'App' ,
data ( ) {
return {
isShow : false
color : 'pink' ,
info : {
name : 'ljep'
} ,
name : ''
}
} ,
components : {
Children,
attr
} ,
methods : {
} ,
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>