Vue2_12

Vue2_12

1、消息订阅与发布

类似 $bus，需要一个包 pubsub-js

npm i pubsub-js

import pubSub from 'pubsub-js';

1.pubSub.subscribe

类似 $on

mounted(){
    // 发布一个消息('消息名', '使用消息时调用的函数')
    pubSub.subscribe('addP', (_, p)=>{
        // 要用箭头函数，因为PubSub的函数没有 this
        this.Ps.push(p)
    })
}

使用 _ 来站位，把第一个参数给顶掉，第一个参数是 消息名，就是刚刚写在上面的消息名

2.pubSub.publish

类似 $emit

methods:{
    addP(){
        // 订阅一个消息
        pubSub.publish('addP', this.P)
    }
}

3.区别

• 一个是外部的包，一个是 Vue 本身的玩意

2、编辑

比如我要在TodoList的每个事件后添加一个 "编辑"按钮，点了就可以编辑

<template>
    <span>
        <input type="text" 
            v-model="value" 
            v-show="edit"
            @keydown.enter="ok"
               回车和失去焦点时都可以使用，但是这样会调用两次，可以改但我懒惰了
            @blur="ok"
            ref="inp"
        >
        <span v-show="!edit">{{thing.thing}}</span>

        <button @click="$bus.$emit">删除</button>
        <button @click="change" v-show="!edit">编辑</button>
    </span>
</template>

<script>
export default {
    props:['thing',],
    data() {
        return {
            edit: false,
            value: this.thing.thing
        }
    },
    methods: {
        change(){
            this.edit = true

            // 这里不可以直接写，因为 Vue会在这个函数走完之后才解析模版
            // 解决1
            // 定时器会新排个队列
            // setTimeout(() => {
            //     this.$refs.inp.focus()
            // });
            // 解决2
            this.$nextTick(function(){ 
            	this.$refs.inp.focus()
            })
        },
        ok(){            
            // 或者获取 e 使用 e.target.value
            this.$bus.$emit('setThing', this.thing.id, this.value)
            this.edit = false
        }
    },
}
</script>

1.芝士点

1.1 @blur

在失去焦点时 调用事件

1.2 函数过完了才会解析模版

所以不能在函数里直接操作 新增加和新显示 的DOM

1.3 $nextTick

在下一次 DOM更新结束后调用

3、动画

Vue给动画建了一堆东西

1.transition标签

<transition>
    <!-- transition：Vue提供的标签 -->
    <h1 class="come" v-show="show">哈哈</h1>
</transition>

使用 v-show 来换动画

完整代码：

<template>
    <div>
        <button @click="show = !show">显示 / 隐藏</button>
        <transition>
            <!-- transition：Vue提供的标签 -->
            <!-- class们使用规定的名字，就可以直接切换 -->
            <h1 v-show="show">哈哈</h1>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: true,
        }
    },
}
</script>

<style scoped>
    h1{
        background: yellowgreen;
        transform: translate(withDirectives);
    }
    /*
        名字有要求：
           
    */
    .v-enter-active{
        animation: 1s come forwards ;
    }
    .v-leave-active{
        animation: 1s go forwards reverse;
    }

    @keyframes come {
        from{
            transform: translate(-110%);
        }
        to{
            transform: translate(0px);
        }
    }
    @keyframes go {
        from{
            transform: translate(-110%);
        }
        to{
            transform: translate(0px);
        }
    }
</style>>

2.名字要求_name属性

必须是标签选择器！！！

• **v-enter-active：**进入时激活
• **v-leave-active：**离开时激活

名字可以改，但是只能改那个 “v”。改变方法：在 transition 标签里设置一个 name 属性

<transition name="haha">
    <h1 v-show="show">哈哈</h1>
</transition>
...
<style scoped>
    .haha-enter-active{
        animation: 1s come forwards ;
    }
    .haha-leave-active{
        animation: 1s go forwards reverse;
    }
</style>>

用于多个需要动画的小伙子们

3.appear属性

一开始就使用进入的动画吗？

<transition name="haha" appear="true">
    <!-- 设置true就是 一开始就使用进入的动画-->
    <h1 v-show="show">哈哈</h1>
</transition>

但但是：会报错。因为这是给 appear属性 给了个字符串 “true”，给布尔值要加：（虽然也可以用）

<transition name="haha" :appear="true">

简写：

单写一个 appear

<transition name="haha" appear>

因为标签上的属性，值写的 false，页面上就会忽略它

<h1 v-show="show" style="false">哈哈</h1>
<!-- 页面上没有这个style -->

芝士捕虫

• blur

  html 失去焦点做的事 @blur=“a”