VUE44-63

最新推荐文章于 2024-07-25 20:57:16 发布

csdn_nevermore

最新推荐文章于 2024-07-25 20:57:16 发布

阅读量200

点赞数

文章标签： ue4 javascript vue.js

本文链接：https://blog.csdn.net/csdn_nevermore/article/details/128927040

版权

VUE44-63

ref组建通信
组件注意
动态组件
旧版slot
新版slot
插槽版抽屉
过渡效果
列表过渡
可复用过渡
生命周期-创建阶段
生命周期-更新阶段
生命周期-销毁
swiper使用
swiper组件

ref组建通信

<div id="box">
<input type="text" ref="mytext"/>
<button @click="handleAdd">add</button>
<child></child>
</div>
<script>
new Vue({
el:"#box",
methods:{
handleAdd(){
console.log(this.$refs)

})
</script>

组件注意

属性父组件传给你的属性，只有父组件可以重新传，但不允许子组件随意修改。
状态–组件内部的状态，可以随意修改
在这里插入图片描述

动态组件

<component is="list"></component>

<component:is="which"></component>

<footer>
<ul>
<li @click="which='home'">
首页
</li>
<li @click="which='list'">
列表
</li>
</footer>

旧版slot

<slot></slot>

插槽，
在这里插入图片描述

可以将组件中的child中的插入到插槽中
也可以对号入座式写法

新版slot

<child>
<template v-slot:a>
<div>1111111111</div>
</template>
</child>

插槽版抽屉

<div id="box">
<navbar >
<button @click="isShow=!isShow">click</button>
</navbar>
<sidebar v-show="isShow"></sidebar>
</div>
<script>
Vue.component("navbar",{
template:
<div>
nabbar- <slot></slot>
</div>
,
}）

过渡效果

<div id="box">
<button @click="isShow= !isShow">change</button>
<transition enter-active-class="kerwin-enter-actïve">
<div v-show="isShow">1111111111111111</div>
</transition>
</div>

列表过渡

在这里插入图片描述
<transition-group>不同于transition,它会以一个真实元素呈现：默认为一个<span>。你也可以
通过tag特性更换为其他元素。
提供唯一的key 属性值

可复用过渡

Vue.component("sidebar",{
props:["mode"],
template:
<transition :name="mode">
<ul style="background-color: yellow;width: 200px;height: 500px;
<1i>首页</1i>
<1i>钱包</1i>
<1i>设置</1i>
</ul>
</transition>
}）

可以不放在组件中

生命周期-创建阶段

只有第一次才会执行一次

生命周期-更新阶段

beforeUpdate(){
console.log("beforeupdate"，"更新之前，记录老的dom某些状态，比如滚动条
位置记录。）
}，
updated(){
console.log("updated",“更新完成，获取更新的后dom,才进行swiper工作的插
件"）
}

生命周期-销毁

beforeDestroy(){
console.log("beforeDestroy",“清除定时器，事件解绑,,,,")
}，
destroyed(){
console.1og("destroyed","清除定时器，事件解绑,,,,")
}
}）

swiper使用

swiper网址
引入

<div class="swiper">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
    <div class="swiper-wrapper">
       <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
            <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>从右边300px开始进入，时间600ms</p>
            </div>
            <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
            <div data-swiper-parallax-scale="0.15" >缩放变化</div>
        </div>
    </div>
</div>
<script language="javascript"> 
    var mySwiper = new Swiper('.swiper',{
            parallax : true,
    })
</script>

swiper组件

Vue.component("swiper",{
template:
<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>
<div class="swiper-pagination"></div>
</div,

```java
<body>
<div id="box">
<swiper v-if="datalist.length">
<swiper-item v-for="data in datalist" :key="data">
<img :src="data"/>
</swiper-item>
</swiper>
<!-- <swiper :key="datalist.length"></swiper> -->
</div>

mounted(){
new Swiper("Jkerwin", {
//direction:"vertical"，//垂直
//如果需要分页器
pagination: {
el: '.swiper-pagination',
}，
loop: true,
autoplay: {
delay: 2500,
disableonInteraction: false,
}
}）
}
｝)