01 transition
1.v-on:事件 可简写为 @事件名字;
2.选择标签.click() 自动触发click方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
</head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
/*fade-enter-active整个进入动画过程都存在*/
.fade-enter-active{
animation:enter 1s;
}
@keyframes enter {
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
.fade-leave-active{
animation: leave 1s;
}
@keyframes leave {
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
</style>
<body>
<div id="app">
<!-- v-on:事件名字简写 @事件名字-->
<button @click="change()" id="btn">切换</button>
<transition name="fade">
<p v-show="show"></p>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
// <!-- 选择标签.click() 自动触发click方法-->
setTimeout(()=>{
btn.click();
},10);
new Vue({
el:'#app',
data:{
show:true
},
methods:{
change(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
02 transition-class
enter-active-class=“类名” 该类在动画进入的时候存在
leave-active-class=“类名”
该类在动画离开的时候存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
</head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
/*fade-enter-active整个进入动画过程都存在*/
.enter{
animation:enter 1s;
}
@keyframes enter {
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
.leave{
animation: leave 1s;
}
@keyframes leave {
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
</style>
<body>
<div id="app">
<!-- v-on:事件名字简写 @事件名字-->
<button @click="change()" id="btn">切换</button>
<!-- enter-active-class="类名" 该类在动画进入的时候存在,leave-active-class="类名" 该类在动画离开的时候存在-->
<transition enter-active-class="enter" leave-active-class="leave">
<p v-show="show"></p>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
// <!-- 选择标签.click() 自动触发click方法-->
setTimeout(()=>{
btn.click();
},10);
new Vue({
el:'#app',
data:{
show:true
},
methods:{
change(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
03 animated-transition
1.引入文件: < link rel=“stylesheet” href=“css/animate.css”>
2.animate_animated必须写
3.animate_所要使用动画的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<link rel="stylesheet" href="css/animate.css">
</head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
</style>
<body>
<div id="app">
<!-- v-on:事件名字简写 @事件名字-->
<button @click="change()" id="btn">切换</button>
<!-- enter-active-class="类名" 该类在动画进入的时候存在,leave-active-class="类名" 该类在动画离开的时候存在-->
<!--animate__animated必须写 animate__所要使用动画的名字 -->
<!-- https://animate.style/ -->
<transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__zoomIn">
<p v-show="show"></p>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
// <!-- 选择标签.click() 自动触发click方法-->
setTimeout(()=>{
btn.click();
},10);
new Vue({
el:'#app',
data:{
show:true
},
methods:{
change(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
04 transition-group
1.一个transition内部有多个动画 使用transition-group 每一个标签都要有唯一的key值;
2.transition默认渲染成span标签,如果想要修改,用tag="所要渲染的标签"来修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<link rel="stylesheet" href="css/animate.css">
</head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
</style>
<body>
<div id="app">
<!-- v-on:事件名字简写 @事件名字-->
<button @click="change()" id="btn">切换</button>
<!-- enter-active-class="类名" 该类在动画进入的时候存在,leave-active-class="类名" 该类在动画离开的时候存在-->
<!--animate__animated必须写 animate__所要使用动画的名字 -->
<!-- 一个transition内部有多个动画 使用transition-group 每一个标签都要有一个唯一的key值-->
<!-- transition默认渲染成span标签,如果想要修改,用tag=“所要渲染的标签”修改-->
<transition-group enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__zoomIn">
<!-- v-bind:属性 => 简写:属性-->
<p v-show="show" :key="n" v-for="n in 6"></p>
</transition-group>
</div>
<script src="js/vue.js"></script>
<script>
// <!-- 选择标签.click() 自动触发click方法-->
setTimeout(()=>{
btn.click();
},10);
new Vue({
el:'#app',
data:{
show:true
},
methods:{
change(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
05 组件
1.使用占位符 不能和标签名一样,类似标签名,有语义;
2.定义组件,类似之前实例化对象;
3.定义模板,只能有唯一的根元素;
4.组件内部的数据是函数形式,return{};
5.挂载组件 k:v k代表的是占位符名字 v代表的是组件名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用占位符 不能和标签名一样,类似标签名,有语义-->
<!--vheader vHeader v-header-->
<div id="app">
<vheader></vheader>
<!-- <vaside></vaside>-->
</div>
<script src="js/vue.js"></script>
<script>
// <!-- 定义组件,类似之前实例化对象-->
var vheader = Vue.extend({
//定义模板 只能有唯一的根元素
template:'<div><h1>{{msg}}</h1><p>这是段落</p><button @click="add()">点击{{num}}</button></div>',
//组件内部的数据是函数的形式
data(){
return{
msg:'这是标题',
num:0
}
},
methods:{
add(){
this.num++
}
}
})
new Vue({
el:'#app',
//挂载组件
components:{
//k:v
//k代表的是占位符名字 v代表的是组件名字
vheader:vheader
}
})
</script>
</body>
</html>
06 组件定义第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用占位符 不能和标签名一样,类似标签名,有语义-->
<!--vheader vHeader v-header-->
<div id="app">
<vheader></vheader>
<!-- <vaside></vaside>-->
</div>
<script src="js/vue.js"></script>
<script>
// <!-- 定义组件,类似之前实例化对象-->
var vheader = Vue.extend({
//定义模板 只能有唯一的根元素
//添加了button
template:'<div><h1>{{msg}}</h1><p>这是段落</p><button @click="add()">点击{{num}}</button></div>',
//组件内部的数据是函数的形式
data(){
return{
msg:'这是标题',
num:0
}
},
//也是可以直接在这里写方法
methods:{
add(){
this.num++;
}
}
})
new Vue({
el:'#app',
//挂载组件
components:{
//k:v k代表的是占位符名字 v代表的是组件名字
vheader:vheader
}
})
</script>
</body>
</html>
07 组件定义第二种方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用占位符 不能和标签名一样,类似标签名,有语义-->
<!--vheader vHeader v-header-->
<div id="app">
<vheader></vheader>
<!-- <vaside></vaside>-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
//挂载组件
components:{
//k:v k代表的是占位符名字 v代表的是组件名字
//直接在组件名字里面写
vheader: {
template:'<h1>这是标题</h1>',
data(){
return{
msg:'hello Vue'
}
}
}
}
})
</script>
</body>
</html>
08 组件第三种定义方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用占位符 不能和标签名一样,类似标签名,有语义-->
<!--vheader vHeader v-header-->
<div id="app">
<vheader></vheader>
<!-- <vaside></vaside>-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
//挂载组件
components:{
//k:v k代表的是占位符名字 v代表的是组件名字
//直接在组件名字里面写
vheader: {
template:'<h1>这是标题</h1>',
data(){
return{
msg:'hello Vue'
}
}
}
}
})
</script>
</body>
</html>
09 slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用占位符 不能和标签名一样,类似标签名,有语义-->
<!--vheader vHeader v-header-->
<div id="app">
<!-- 占位符-->
<!-- slot插槽,在模板中保留位置,使用的时候可以扩展
模板中 <slot name="值"></slot>占位
在占位符中 <标签 slot="slot的name值"></标签>
-->
<modal>
<p slot="des">确定关闭嘛?</p>
<div slot="sure">asdfgbn</div>
</modal>
<br>
<modal>
<h1 slot="des">确定购买吗?</h1>
</modal>
</div>
<!--定义模板 只能有一个根元素 取id名 使用的时候template:"#id名"-->
<template id="modal">
<div>
<button>确认</button>
<slot name="sure"></slot>
<button>取消</button>
<slot name="des"></slot>
</div>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
//挂载组件
components:{
modal:{
template:'#modal'
}
}
})
</script>
</body>
</html>
10 动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.current{
background-color: mediumpurple;
}
</style>
<body>
<div id="app">
<button @click="change()">切换</button>
<!-- 动态组件 渲染的占位符是动态的,由msg的值决定 msg的值是什么,占位符就渲染成什么-->
<component :is="msg">{{msg}}</component>
<ul>
<li v-for="(item,index) in list" @click="change(item.msg,index)" :class="{current:index==num}">{{item.title}}</li>
</ul>
</div>
<!--第二种写法-->
<!--<template id="news">-->
<!-- <h1>这是新闻</h1>-->
<!--</template>-->
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'news',
num:0,
list:[
{
title:'新闻',
msg:'news'
},
{
title:'电影',
msg: 'movies'
}
]
},
components:{
news:{
template:'<h1>这是新闻</h1>'
//第二种写法,使用template占位符,id名
// template: '#news'
},
movies:{
template: '<h1>这是电影</h1>'
}
},
methods:{
//切换
// change(){
// if (this.msg=='news'){
// this.msg='movies';
// }else{
// this.msg='news';
// }
// }
//实现tab栏
change(a,b){
this.msg=a;
this.num=b;
}
}
})
</script>
</body>
</html>
11 动态组件-transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/animate.css">
</head>
<style>
.current{
background-color: mediumpurple;
}
</style>
<body>
<div id="app">
<button @click="change()">切换</button>
<!-- 动态组件-->
<!-- <component :is="msg">{{msg}}</component>-->
<!-- 动态组件 渲染的占位符是动态的,由msg的值决定 msg的值是什么,占位符就渲染成什么-->
<!-- mode设置动画进入离开的间隔-->
<!-- mode="out-in"上一个结束了下一个再开始,不会有两个动画都存在的现象了-->
<transition mode="out-in" enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
<component :is="msg"></component>
</transition>
</div>
<!--第二种写法-->
<!--<template id="news">-->
<!-- <h1>这是新闻</h1>-->
<!--</template>-->
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'news',
num:0,
list:[
{
title:'新闻',
msg:'news'
},
{
title:'电影',
msg: 'movies'
}
]
},
components:{
news:{
template:'<h1>这是新闻</h1>'
//第二种写法,使用template占位符,id名
// template: '#news'
},
movies:{
template: '<h1>这是电影</h1>'
}
},
methods:{
//切换
change(){
if (this.msg=='news'){
this.msg='movies';
}else{
this.msg='news';
}
}
}
})
</script>
</body>
</html>
12 组件嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<login></login>
</div>
<!--模板-->
<template id="login">
<div>
<h1>这是登录页面</h1>
<aaa></aaa>
</div>
</template>
<template id="aaa">
<h1>这是aaa页面{{msg}}</h1>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
components:{
login:{
template:'#login',
components: {
aaa:{
template:'#aaa',
data(){
return{
msg:'AAA'
}
}
}
}
}
}
})
</script>
</body>
</html>
13 父组件传参给子组件
正常情况下,父子组件不能通信
父组件的值传递给子组件
1.在占位符中 :a=“msg” a子组件接收的数据 msg父组件数据;
2.在子组件中定义props属性接收a , props:[‘a’,‘父组件传递的数据’];
3.子组件中可以直接使用a 不建议直接修改a;
4.如果想要修改a 定义一个中间变量c 书写a的监听函数 this.c=this.a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>这是父组件{{msg}}</h2>
<button @click="change()">修改</button>
<vheader :a="msg"></vheader>
</div>
<template id="vheader">
<div>
<!-- 子组件自己的修改 -->
<button @click="change()">修改</button>
<h2>这是子组件{{a}}...{{c}}</h2>
</div>
</template>
<script src="js/vue.js"></script>
<script>
// 子组件
var vheader={
template:'#vheader',
props:['a'],
data(){
return{
c:this.a
}
},
watch:{
a(){
this.c=this.a
// console.log(this.c);
// 打印:00这是父组件数据fff
}
},
methods:{
change(){
this.c=this.c+'z'
// console.log(this.c);
// 这是父组件数据zzz
}
}
}
new Vue({
el:'#app',
data:{
msg:'00这是父组件数据'
},
methods:{
change(){
this.msg=this.msg+'f'
}
},
components:{
vheader:vheader
}
})
</script>
</body>
</html>
14 父组件传参给子组件
这里是把传的值从基本数据类型改成了对象型:
1.基本数据类型在内存中以值的形式存在,对象在内存中以地址得形式存在;
2.内存中,栈中存放基本数据类型和对象地址,堆中存放的是对象的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 正常情况下,父子组件不能通信 -->
<!--
父组件的值传递给子组件
1.在占位符中 :a="msg" a子组件接收的数据 msg父组件数据
2.在子组件中定义props属性接收a。 props:['a','父组件传递的数据']
3.子组件中可以直接使用a 。不建议直接修改a
4.如果想要修改a 定义一个中间变量 c 书写a的监听函数 this.c=this.a
-->
<div id="app">
<h2>这是父组件{{msg}}</h2>
<button @click="change()">修改</button>
<vheader :a="msg"></vheader>
</div>
<template id="vheader">
<div>
<button @click="change()">修改</button>
<h2>这是子组件{{a}}{{c}}</h2>
</div>
</template>
<script src="js/vue.js"></script>
<script>
var vheader={
template:'#vheader',
props:['a'],
data(){
return{
c:this.a
}
},
//将msg改成对象形式,此时可以不用监听 此时可以实现双向修改
watch:{
// a(){
// this.c=this.a
// }
},
methods:{
change(){
// 如果直接修改a,可以。但是警告类型问题。不建议直接修改a
// this.a=this.a+'m'
this.c.n=this.c.n+'z'
}
}
}
new Vue({
el:'#app',
data:{
msg:{
n:'这是父组件数据'
}
},
methods:{
change(){
this.msg.n=this.msg.n+'f'
}
},
components:{
vheader:vheader
}
})
// 基本数据类型在内存中以值的形式存在 对象在内存中以地址的形式存在
// 内存中 栈中存放基本数据类型和对象的地址 堆中存放的是对象的数据
var a=10;
// 把a的值赋值给了b
b=a;
a=100;
console.log(b);
var stu={
name:'zs'
}
// 把stu的地址赋值给了stu1
var stu1=stu;
stu1.name='ls';
console.log(stu.name)
</script>
</body>
</html>
15 子组件传参给父组件
子组件发送数据给父组件:
1、在子组件中定义方法 方法内部书写 this.$emit(‘事件名’,所要发送的数据);
2、在子组件中,执行刚刚书写的方法
3、在占位符(父组件)中 @事件名=“父组件接收数据的方法名字,不带括号”
4、在父组件中,定义接收数据方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
子组件发送数据给父组件
1、在子组件中定义方法 方法内部书写 this.$emit('事件名',所要发送的数据);
2、在子组件中,执行刚刚书写的方法
3、在占位符(父组件)中 @事件名="父组件接收数据的方法名字,不带括号"
4、在父组件中,定义接收数据方法。
-->
<div id="app">
<h2>这是父组件</h2>
<button @click="change()">修改{{msg}}</button>
<!-- send事件,子组件传参的时候,执行 -->
<!-- 3.@事件名="父组件接收参数的方法名"-->
<vheader @send="get"></vheader>
</div>
<template id="vheader">
<div>
<button @click="change()">修改</button>
<h2>这是子组件</h2>
<!-- 2.执行子组件方法-->
{{fn1()}}
</div>
</template>
<script src="js/vue.js"></script>
<script>
var vheader={
template:'#vheader',
data(){
return{
n:'这是子组件的数据',
a1:'hello vue'
}
},
methods:{
fn1(){
//1.this.$emit()
this.$emit('send',this.n,this.a1)
},
change(){
this.n=this.n+'z'
}
}
}
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
change(){
},
//4.定义刚才父组件接收数据的方法
get(n,a1){
// n代表接收过来的数据
console.log(n,a1)
this.msg=n;
}
},
components:{
vheader:vheader
}
})
</script>
</body>
</html>