vue编程

一、vue中的动画

<transition></transition>
//多个需要加入key值
<transition-group></transition-group>

//进场起点
.v-enter-active{}
//离场起点
.v-leave-active{}

集成第三方动画

npm install animate.css

import 'animate.css'

<button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group name="animate_animated animate animate_bounce" appear enter-active-class="animate_swing"
      leave-active-class="animate_backOutUp">
      <h1 v-show="!isShow" key="1">你好啊</h1>
      <h1 v-show="isShow" key="2">hhh</h1>
    </transition-group>

二、vue网络请求

1、axios网络请求

axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        (response) => {
          console.log("请求成功了", response.data.items)
          //请求成功后更新list数据
          this.$bus.$emit("UpdateListData", {
            isLoading: false,
            errMsg: "",
            users: response.data.items,
          })
        },
        (error) => {
          console.log("请求失败了", error.message)
          this.$bus.$emit("UpdateListData", {
            isLoading: false,
            errMsg: error,
            users: [],
          })
        }
      )

2、vue-resource请求插件

npm i vue-resource

import vueResource from 'vue-resource'
Vue.use(vueResource)

this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        (response) => {
          console.log("请求成功了", response.data.items)
          //请求成功后更新list数据
          this.$bus.$emit("UpdateListData", {
            isLoading: false,
            errMsg: "",
            users: response.data.items,
          })
        },
        (error) => {
          console.log("请求失败了", error.message)
          this.$bus.$emit("UpdateListData", {
            isLoading: false,
            errMsg: error,
            users: [],
          })
        }
      )

三、vue插槽

1、默认插槽

<slot></slot>

父组件
<div class="category">
    <h3>{{ title }}分类</h3>
    <!-- 定义一个插槽，等着组件使用者进行填充 -->
    <slot></slot>
  </div>


子组件
<category title="美食" :listData="foods">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
    </category>
    <category title="游戏" :listData="games">
      <ul>
        <li v-for="(game, index) in games" :key="index">{{ game }}</li>
      </ul>
    </category>

2、具名插槽

具有名字的插槽

v-slot只能写在template中

<div slot="footer"></div>

 <template v-slot:footer></template>

3、作用域插槽

子组件中写数据，在父组件中使用

作用域插槽是一个带绑定数据的插槽

子组件

 <slot :games="games"></slot>

父组件

<zi>
      <!-- 解构赋值 -->
      <template scope="{games}">
        <ul>
          <li v-for="(game, index) in games" :key="index">{{ game }}</li>
        </ul>
      </template>
    </zi>