vue一周小结(6)

一.提供自定义事件

例：

btn(){
            this.$emit("wq",this.userName);
            this.$emit("zpj",this.age);
            this.$emit("ch",this.ids);
            this.$emit("yxh",this.ids);
            this.$emit("click",this.ids);
            this.$emit("zml",this.schoolNum);
        },

二.  解除绑定自定义事件

例：

 removeBtn(){
            // 解除绑定一种写法单个
            // this.$off("zml");
            // 解除绑定二种写法多个
            // this.$off(["zml","wq"]);
            // 解除绑定三种写法所有
            this.$off();

三. 提供全局事件

例：

  methods:{
        btn(){
            // this.$bus用于兄弟通信，隔代通信
            this.$bus.$emit("wq",this.userName)
            this.$bus.age = 18;
            // 消息发布，用于兄弟通信，隔代通信
            pubsub.publish("demo",this.userName)
        },
    },

四. day06

<template>
  <div>
    <h1>我是day06组件</h1>
  </div>
</template>

<script>
import pubsub from "pubsub-js"
export default {
    name:"MyDay06",
    data() {
        return {

        }
    },
    methods:{
        func2(a,b){
            console.log(222222222);
            console.log(a);
            console.log(b);
        }
    },
    mounted(){
        this.$bus.$on("wq",(a)=>{
            console.log(11111111111);
            console.log(a);
            console.log(this.$bus);
            console.log(this.$bus.age);
        })
        // 消息订阅
        this.pubId = pubsub.subscribe("demo",this.func2)
    },
    beforeDestroy(){
        // 取消全局事件
        this.$bus.$off("wq");
        // 取消订阅
        pubsub.unsubscribe(this.pubId);
    }
}
</script>

<style>

</style>

 五.改变进入的组件

<template>
    <div>
        <h1>我是day07</h1>
        <keep-alive>
            <MyDay07S v-if="str"/>
            <MyDay07SS v-else/>
        </keep-alive>
        <button @click="btn()">改变进入的组件</button>
        <hr>
        <!-- <button @click="func1()">点击</button> -->
        <button @click="sum()">显示/隐藏</button>
        <!-- name=""可以代替v-(样式)，设置单个动画时提供别名 -->
        <!-- <transition name="app" appear="true">
            <h1 v-show="isShow">你好</h1>
        </transition> -->
        <!-- <transition-group name="app" appear>
            <h1 v-show="isShow" key="1">你好</h1>
            <h1 v-show="isShow" key="2">我是hello woild</h1>
        </transition-group> -->
        <transition-group appear 
            name="animate__animated"
            enter-active-class="animate__flipOutX"
            leave-active-class="animate__flipOutY"
            class="animate__flipOutX"
        >
            <!-- <h1 v-show="isShow" class="animate__animated animate__bounceInDown animate__rubberBand" key="1">11111111111111</h1> -->
            <h1 v-show="isShow" key="2">22222222222222</h1>
            <h1 v-show="isShow" key="3">3333333333333</h1>

        </transition-group>
    </div>
    
</template>

<script>
import MyDay07S from './day07s.vue'
import MyDay07SS from './day07ss.vue'
import "animate.css"
export default {
    name:'MyDay07',
    data() {
        return {
            str:true,
            isShow:true
        }
    },
    components:{
        MyDay07S,
        MyDay07SS,
    },
    // this.$nextTick 用于调取接口，类似于延时器
    // this.$nextTick与setTimeout区别
    // this.$nextTick先执行
    // -----------------
    // keep-alive用于缓存组件，优化性能
    methods:{
        sum(){
            this.isShow=!this.isShow
        },
        btn(){
            this.str = !this.str;
        },
        func1(){
            setTimeout(()=>{
                console.log(4444444444);
            },0)
            console.log(111111111111);
            this.$nextTick(()=>{
                console.log(22222222);
            })
            console.log(333333333);
        }
    },
}
</script>

<style>
.h1{
    background-color: aqua;
}
.v-enter{
    animation: zht1 10s linear;
}
.app-enter-active{
    animation: zht2 1s linear;
}
.v-enter-to{
    animation: zht3 1s linear;
}
.v-leave{
    animation: zht1 0.5s linear reverse;
}
.app-leave-active{
    animation: zht2 0.5s linear reverse;
}
.v-leave-to{
    animation: zht3 0.5s linear reverse;
}
@keyframes zht1{
    0%{
        transform: translateX(0);
        color: red;
    }
    100%{
        transform: translateX(100px);
        color: red;
    }
}
@keyframes zht2{
    0%{
        transform: translateX(100px);
        color: red;

    }
    100%{
        transform: translateX(200px);
        color: orange;
    }
}
@keyframes zht3{
    0%{
        transform: translateX(200px);
        color: orange;
    }
    100%{
        transform: translateX(300px);
        color: green;
    }
}
</style>

六. 调取接口的方式和解决跨域

<template>
  <div>
    <h1>我是day08组件</h1>
    <button @click="fun">调取第一个服务数据</button>
    <button @click="fun1">调取第二个服务数据</button>

  </div>
</template>
<script>
import axios from 'axios'
export default {
    name:"MyDay08",
    data() {
        return {
            
        }
    },
    // ajax axios调取接口的方式
    // 代理(proxy)，cors(node),JSONP(jq),nginx(java) 解决跨域
    methods:{
        fun(){
            // http://localhost:8080/stutend
            // http://127.0.0.1:8080/stutend
            // axios.get('http://localhost:8080/stutend').then(
            //     (res)=>{
            //         console.log('stutend成功'+res.data);
            //     },
            //     (error)=>{
            //         console.log('失败'+error.message);
            //     }
            // )
            // ----------------------
            axios.get('http://localhost:8080/api1/stutend').then(
                (res)=>{
                    console.log('stutend成功'+res.data);
                },
                (error)=>{
                    console.log('失败'+error.message);
                }
            )
        },
        fun1(){
            axios.get('http://localhost:8080/api2/school').then(
                (res)=>{
                    console.log('成功'+res.data);
                },
                (error)=>{
                    console.log('失败'+error.message);
                }
            )
        }
    }
}
</script>

<style>

</style>