Vue（二）

ZiminLi

已于 2023-07-03 09:32:47 修改

阅读量196

点赞数

分类专栏：技术栈笔记文章标签： javascript 前端 vue.js

于 2023-02-08 23:16:25 首次发布

本文链接：https://blog.csdn.net/ziminli/article/details/128945107

版权

技术栈笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

Vue

十四、中央事件总线
十五、ref组件通信
十六、组件注意
十七、动态组件
十八、slot
- 旧：
- 新：
十九、过渡
二十、生命周期
二十一、swiper
二十二、Vue3组件写法

十四、中央事件总线

bus中央事件总线
订阅发布模式

bus.$on
bus.$emit

vuex状态管理

十五、ref组件通信

ref -绑定dom节点，拿到的就是 dom对象
ref -绑定组件，拿到的就是组件对象

十六、组件注意

属性 – 父组件传给你的属性，只有父组件可以重新传，但不允许子组件随意修改.
状态 --组件内部的状态，可以随意修改
v-once用在组件上有什么用
渲染普通的HTML元素在Vue中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加v-once attribute以确保这些内容只计算一次然后缓存起来。

十七、动态组件

有的时候，在不同组件之间进行动态切换是非常有用的可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现
<keep-alive></keep-alive>保留数据

十八、slot

插槽的意义：扩展组件能力，提高组件的复用性
混合父组件的内容与子组件自己的模板–>内容分发
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
注意 v-slot只能添加在<template>上，文本节点也可以当具名插槽内容插入

旧：

单个插槽， <slot></slot>
具名插槽 <slot name="a"></slot>
slot=‘插槽名’ slot-scope=“子组件传递过来的数据对象”

新：

<template #插槽名></template>

十九、过渡

1.过渡效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
单个元素过渡：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
多个元素过渡(设置key)
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue为了效率只会替换相同标签内部的内容。
mode:in-out ; out-in
多个组件过渡
列表过渡(设置key)
<transition-group>不同于 transition，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
提供唯一的 key 属性值

2.列表过渡

使用 <transition-group> 组件
特点：
不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
过渡模式不可用，因为我们不再相互切换特有的元素。
内部元素总是需要提供唯一的 key attribute 值。
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

3.可复用过渡

过渡可以通过 Vue 的组件系统实现复用
要创建一个可复用过渡组件，就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。

二十、生命周期

beforeCreate 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
created 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 [vm.$nextTick] 该钩子在服务器端渲染期间不被调用
beforeUpdate 在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
updated 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。
注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：该钩子在服务器端渲染期间不被调用

二十一、swiper

1.swiper使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/swiper/js/swiper.js"></script>
  <link rel="stylesheet" href="lib/swiper/css/swiper.css">

  <style>
    .kerwin {
      height: 500px;
    }
  </style>
</head>

<body>
  <header>导航</header>

  <div class="swiper-container kerwin">
    <div class="swiper-wrapper">
     
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
  
  <footer>底部内容</footer>

  <script>

    //swiper 初始化过早。（新版已解决）
    setTimeout(()=>{
      var list = ["aaaa","bbbbb","cccc"]
      var newlist = list.map(item=>`<div class="swiper-slide">${item}</div>`)

      // console.log(newlist.join(""))

      var owrapper = document.querySelector(".swiper-wrapper")
      owrapper.innerHTML = newlist.join('')


      //dom插入完之后， new swiper

      init()
    },2000)


    //初始化 swiper
    function init(){
      new Swiper(".kerwin", {
      // direction:"vertical", //垂直
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    })
    }
  </script>
</body>

</html>

2.vue-swiper

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/swiper/js/swiper.js"></script>
  <link rel="stylesheet" href="lib/swiper/css/swiper.css">
  <script src="lib/vue.js"></script>
  <style>
    /* img{} */
  </style>
</head>

<body>
  <div id="box">
    <header>导航-{{myname}}</header>

    <div class="swiper-container kerwin">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">111111111111</div>
        <div class="swiper-slide">222222222222</div>
        <div class="swiper-slide">3333333333</div> -->
        <div class="swiper-slide" v-for="data in datalist" :key="data">
          <img :src="data" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

    </div>

    <footer>底部内容</footer>
  </div>
  <script>
    //初始化 swiper --初始化过早

    var vm = new Vue({
      el: "#box",
      data: {
        datalist: [],
        myname:"kerwin"
      },
      mounted() {
        //ajax
        setTimeout(() => {
          this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
          ]
          //过早 

        }, 2000)
        //初始化过早
      },
      updated(){
        console.log(document.querySelectorAll(".swiper-slide").length)
          new Swiper(".kerwin", {
            // direction:"vertical", //垂直
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
            loop: true,
            autoplay: {
              delay: 2500,
              disableOnInteraction: false,
            }
          })

      }
    })
  </script>
</body>

</html>

问题：1.无法复用
2.如果当前页面状态不止一个，其他状态更新，update重新运行，new Swiper执行多次，出bug

3.swiper组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/swiper/js/swiper.js"></script>
  <link rel="stylesheet" href="lib/swiper/css/swiper.css">
  <script src="lib/vue.js"></script>
  <script src="./module/vueswiper.js"></script>
</head>
<body>
  <div id="box">
    <swiper v-if="datalist.length" :loop="false">
      <swiper-item v-for="data in datalist" :key="data">
        <img :src="data"/>
      </swiper-item>
    </swiper>

    <!-- <swiper :key="datalist.length"></swiper> -->
  </div>

  <script>

    new Vue({
      el:'#box',
      data:{
          datalist:[]
        
      },
      mounted(){
        setTimeout(()=>{
          this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
          ]
        },2000)
      }
    })
  </script>
</body>
</html>

Vue.component("swiperItem",{
    template:`
      <div class="swiper-slide">
        <slot></slot>
      </div>
    `
  })
  Vue.component("swiper",{
    props:{
        loop:{
            type:Boolean,
            default:true
        }
    },
    template:`
      <div class="swiper-container kerwin">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <div class="swiper-pagination"></div>
      </div>`,

    mounted(){
      // console.log("mounted")
      new Swiper(".kerwin", {
          // direction:"vertical", //垂直
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          loop: this.loop,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          }
        })
    },
    destroyed(){
      // console.log("destroy")

      //
    }
  })

二十二、Vue3组件写法

//生命周期替换
// beforeDestroy(){
//     console.log("beforedestory")
// },
// destroyed(){

// }

beforeUnmount(){

},
unmounted(){
                
}

vue2 (类，this)
vue3 类（>90% 一样）， hooks(函数式)

ZiminLi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录