Vue(9) - 技术栈

html 复制代码

<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>

javascript 复制代码

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;

javascript 复制代码

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 mutations
    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

html 复制代码

<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>