Vue框架——基本知识点+示例（3）

最新推荐文章于 2022-08-08 16:32:05 发布

Whuiry

最新推荐文章于 2022-08-08 16:32:05 发布

阅读量343

点赞数

分类专栏： Vue框架前端

本文链接：https://blog.csdn.net/Whuiry/article/details/107903147

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue框架

7 篇文章 0 订阅

订阅专栏

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>

Whuiry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架——基本知识点+示例（3）

01 transition1.v-on：事件可简写为 @事件名字；2.选择标签.click() 自动触发click方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transition</title></head><style> p{ width: 100px;
复制链接

扫一扫

专栏目录