Vue学习笔记-2

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)}
		}
	})

注意:
属性父组件传给子的属性,只有父组件可以重新传,不允许子组件随意更改
状态-组件内部的状态可以随意修改

严格来说,Vue子组件不能随便更改父组件传递过来的属性,但是可以通过props配合$emit改变父组件传入的值

//父组件
<my-input:warning.sync="warning"/>
//在父组件传入值时,需要有xxx.sync修饰符

//子组件
$emit('update:warning',val)
//子组件可以在$emit('update:xxxx',val),派发事件修改传入的值

渲染普通的HTML元素在Vue中是非常快速地,但有的时候你可能有一个组件,这个组件包含了大量静态内容.这种情况下,你可以在根元素上添加v-once attribute来确保这些内容只计算了一次,然后被缓存

动态组件

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

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

旧版slot

<div id="box">
	//当前组件或者节点在哪个模板中,就能访问哪个模板状态
	<child>
		<div slot="a">111111</div>
		<div slot="b">22222</div>
		<div slot="c">33333</div>
		<div>4444444444</div>
	</child>
</div>
<script>
	//单个插槽,<slot></slot>
	//具名插槽,<slot name="a"></slot>
	Vue.component("child",{
		template:`
			<div>
				child
				<slot name="a"></slot>
				<slot name="b"></slot>
				<slot name="c"></slot>
				<slot></slot>
			</div>
		`
	})
	new Vue({
		el:"#box"
	})

新版slot

<navbar>
	<template #left>
		<button>aaa</button>
	</template>
	<template>
		<i class="iconfont icon-all">字体图标</i>
	</template>
</navbar>

插槽版抽屉

<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>
		`
	}）
</script>

过渡效果

<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 name="kerwin" tar="ul" v-show="datalist".length>
	<li v-for="(item,index) in datalist" :key="item">
		{{item}}--{{index}}
		<button @click="handleDel(index)">del</button>
	</li>
</transition-group>

< transition-group>不同意transition,它会以一个真实元素呈现:默认为一个span,也可以通过tag特性更换为其他元素

可复用过渡

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

引用&使用

https://swiper.com.cn/

//引入
<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>

组件

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>
	`
})

<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,
	}
	}）
	}
｝)