Vue框架——基本知识点+示例（3）
01 transition
1.v-on：事件 可简写为 @事件名字；
2.选择标签.click() 自动触发click方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transitiontitle>
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">
<button @click="change()" id="btn">切换button>
<transition name="fade">
<p v-show="show">p>
transition>
div>
<script src="js/vue.js">script>
<script>
//
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=“类名”
该类在动画离开的时候存在
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transitiontitle>
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">
<button @click="change()" id="btn">切换button>
<transition enter-active-class="enter" leave-active-class="leave">
<p v-show="show">p>
transition>
div>
<script src="js/vue.js">script>
<script>
//
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_所要使用动画的名字
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transitiontitle>
<link rel="stylesheet" href="css/animate.css">
head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
style>
<body>
<div id="app">
<button @click="change()" id="btn">切换button>
<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>
//
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="所要渲染的标签"来修改
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transitiontitle>
<link rel="stylesheet" href="css/animate.css">
head>
<style>
p{
width: 100px;
height: 100px;
background-color: lime;
}
style>
<body>
<div id="app">
<button @click="change()" id="btn">切换button>
<transition-group enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__zoomIn">
<p v-show="show" :key="n" v-for="n in 6">p>
transition-group>
div>
<script src="js/vue.js">script>
<script>
//
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代表的是组件名字
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<vheader>vheader>
div>
<script src="js/vue.js">script>
<script>
//
var vheader = Vue.extend({
//定义模板 只能有唯一的根元素
template:'{{msg}}
这是段落
',
//组件内部的数据是函数的形式
data(){
return{
msg:'这是标题',
num:0
}
},
methods:{
add(){
this.num++
}
}
})
new Vue({
el:'#app',
//挂载组件
components:{
//k:v
//k代表的是占位符名字 v代表的是组件名字
vheader:vheader
}
})
script>
body>
html>
06 组件定义第二种方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<vheader>vheader>
div>
<script src="js/vue.js">script>
<script>
//
var vheader = Vue.extend({
//定义模板 只能有唯一的根元素
//添加了button
template:'{{msg}}
这是段落
',
//组件内部的数据是函数的形式
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<vheader>vheader>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
//挂载组件
components:{
//k:v k代表的是占位符名字 v代表的是组件名字
//直接在组件名字里面写
vheader: {
template:'这是标题
',
data(){
return{
msg:'hello Vue'
}
}
}
}
})
script>
body>
html>
08 组件第三种定义方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<vheader>vheader>
div>
<script src="js/vue.js">script>
<script>
new Vue({
el:'#app',
//挂载组件
components:{
//k:v k代表的是占位符名字 v代表的是组件名字
//直接在组件名字里面写
vheader: {
template:'这是标题
',
data(){
return{
msg:'hello Vue'
}
}
}
}
})
script>
body>
html>
09 slot
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<modal>
<p slot="des">确定关闭嘛？p>
<div slot="sure">asdfgbndiv>
modal>
<br>
<modal>
<h1 slot="des">确定购买吗？h1>
modal>
div>
<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 动态组件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
.current{
background-color: mediumpurple;
}
style>
<body>
<div id="app">
<button @click="change()">切换button>
<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>
<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:'这是新闻
'
//第二种写法,使用template占位符，id名
// template: '#news'
},
movies:{
template: '这是电影
'
}
},
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/animate.css">
head>
<style>
.current{
background-color: mediumpurple;
}
style>
<body>
<div id="app">
<button @click="change()">切换button>
<transition mode="out-in" enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
<component :is="msg">component>
transition>
div>
<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:'这是新闻
'
//第二种写法,使用template占位符，id名
// template: '#news'
},
movies:{
template: '这是电影
'
}
},
methods:{
//切换
change(){
if (this.msg=='news'){
this.msg='movies';
}else{
this.msg='news';
}
}
}
})
script>
body>
html>
12 组件嵌套
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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.内存中，栈中存放基本数据类型和对象地址，堆中存放的是对象的数据
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
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
}
},
//将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、在父组件中，定义接收数据方法。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>这是父组件h2>
<button @click="change()">修改{{msg}}button>
<vheader @send="get">vheader>
div>
<template id="vheader">
<div>
<button @click="change()">修改button>
<h2>这是子组件h2>
{{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>