VUE---学习进阶04

最新推荐文章于 2024-09-20 11:00:29 发布

置顶不断进阶学习者

最新推荐文章于 2024-09-20 11:00:29 发布

阅读量284

点赞数 1

分类专栏： VUE.js 文章标签： vue.js html5 css3

本文链接：https://blog.csdn.net/weixin_44857287/article/details/109061177

版权

VUE.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.动画

动画分为六个阶段：前三个是进入动画，后三个是离开动画
注意：所有要实现动画的标签，一定要放在transition中，可以给其设置name，将v改成name的值即可。

1.v-enter 动画进入
2.v-enter-active 动画执行过程
3.v-enter-to 动画进入完成

4.v-leave 动画离开的初始状态
5.v-leave-active 动画离开过程
6.v-leave 动画离开完成

 .v-enter {
        }
 .v-enter-active {
        }
.v-enter-to {
        }
 .v-leave {
        }
.v-leave-active {
        }
.v-leave-to {
        }

简单实例：点击切换，实现div的消失与出现

    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background: greenyellow;
        }

        .v-enter {
            opacity: 0;
        }

        .v-enter-active {
            transition: all 2s;
        }

        .v-enter-to {
            opacity: 1;
        }

        .v-leave {
            opacity: 1;
        }

        .v-leave-active {
            transition: all 2s;
        }

        .v-leave-to {
            opacity: 0;
        }


        /* 这是自定义的动画 */
        .aa-enter {
            opacity: 0;
            transform: scale(2);
        }

        .aa-enter-active {
            transition: all 2s;
        }

        .aa-enter-to {
            opacity: 1;
        }

        .aa-leave {
            opacity: 1;
        }

        .aa-leave-active {
            transition: all 2s;
        }

        .aa-leave-to {
            opacity: 0;
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div id='app'>
        <transition>
            <div class="box" v-show='show'></div>
        </transition>

        <transition name='aa'>
            <div class="box1" v-show='show'></div>
        </transition>
        <button @click='show=!show'>切换</button>
    </div>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            show: true,
        },
        methods: {
        },
    })
</script>

</html>

案例二：实现点击更换文字。
这里要注意：vue中动画，只要切换的元素是占位的，那么一般不建议设置离开动画。

    <style>
        
        .v-enter {
            opacity: 0;
        }

        .v-enter-active {
            transition: all 2s;
        }

        .v-enter-to {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click='show=!show'>切换</button>
        <transition>
            <div class="box" v-if='show'>　IMF总裁格奥尔基耶娃认为，全球经济正从危机深渊中恢复，所有国家现在都将踏上“漫长的攀行之路”，这将是一个艰难的过程，漫长、坎坷而充满不确定，且极易出现倒退。</div>
        </transition>
        <transition>
            <div class="box" v-if='!show'>　潮州之名，始于隋朝开皇十一年（591年），取“在潮之洲，潮水往复”之意。潮州是“潮文化”的发祥地。在全国135座历史文化名城中，潮州榜上有名。</div>
        </transition>   
    </div>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            show:true
        },
        methods: {
        },
    })
</script>

</html>

案例三：使用animate实现动画效果
关键代码：
animate__animated为animate库中的class名字

 <transition  enter-active-class ='animate__animated animate__shakeY'
                    leave-active-class = 'animate__animated animate__backOutRight'>
            <div class="box" v-show='show'></div>
        </transition>

全部代码：

  <link rel="stylesheet" href="./animate.css">
  <style>
      .box {
            width: 100px;
            height: 100px;
            background: red;
        }
  </style>
</head>

<body>
    <div id='app'>
        <!-- 引入animate.css -->
        <transition  enter-active-class ='animate__animated animate__shakeY'
                    leave-active-class = 'animate__animated animate__backOutRight'>
            <div class="box" v-show='show'></div>
        </transition>
        <button @click='show=!show'>切换</button>
    </div>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            show:true
        },
        methods: {
        },
    })
</script>

</html>

案例四：实现小球的移动，模拟美团
关键代码：
before-enter：固定用法
beforeEnter：方法名

<transition  @before-enter='beforeEnter'
                     @enter = 'enter'
                     @after-enter = 'afterEnter'>
            <div class="ball" v-show = 'show'></div>
        </transition>

注意下面内容：
el.offsetTop; // 目的是为了触发动画，如果不写，动画就不会执行，必须要写上。
done() //目的是为了触发afterEnter这个函数

 enter(el,done){
                el.offsetTop;//目的是为了触发动画，如果不写，动画就不会执行      
                el.style.transition = "all 2s ease";
                done()  //目的是为了触发afterEnter这个函数
            },

全部代码：
注意：el.style.transform = ‘translate(300px,500px)’;
这句话写在enter或者afterEnter中都可以。

    <style>
        .ball{
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click = 'show=!show'>开始</button>
        <transition  @before-enter='beforeEnter'
                     @enter = 'enter'
                     @after-enter = 'afterEnter'
        >
            <div class="ball" v-show = 'show'></div>
        </transition>
    </div>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            show:false,
        },
        methods: {
            // 动画进入之前
            // el 代表的就是你要操作的元素
            beforeEnter(el){
                el.style.transform = 'translate(0,0)'
            },
            enter(el,done){
                el.offsetTop;//目的是为了触发动画，如果不写，动画就不会执行      
                el.style.transition = "all 2s ease";
                done()  //目的是为了触发afterEnter这个函数
            },
            afterEnter(el){
                el.style.width = "50px"
                el.style.transform = 'translate(300px,500px)';
                this.show=!this.show  //最终是为了让小球隐藏起来
            }

        },
    })
</script>
</html>

2.组件

定义:可复用的vue实例
ps:filter,component有全局和局部定义两种方式

2.1局部使用

js代码中，components和data是并列的。
components中的template ：有且只能有一个根节点，即所有东西要放在一个div中
命名规范：
1.驼峰命名方式，需要把大写字母换成通过连字符链接 eg:vStudentInfo —> v-student-info App
2.如果是以大写字母开头则不需要转换
3.不能使用HTML标签当做组件名 a b c nav header

components:{
            vOne:{
                template:'<div>hello</div>'
            },
            vTwo:{
                template:'<p>我是two组件</p>'
            },
            a1:{
                template:'<h3>我是h3</h3>'
            }
        }

标签名称的设置不能使用标签，因为编译器不知道标签是你定义的还是默认的。
vOne在使用中是要 v-one
使用：

<div id='app'>
        {{msg}}
        <v-one></v-one>
        <v-two></v-two>
        <div></div>
        <a1></a1>
        <v-three></v-three>
    </div>

2.2全局使用

vThree相当于标签

Vue.component('vThree',{
     template:'<div>hello11111</div>'
})

2.3template与data的使用

2.3.1template的使用

template ：有且只能有一个根节点
另外在vue中也有template，也可以使用
template后可以写id，在template中定义id，代码如下
定义：

    <template id="one">
        <div>
            <h2>我是h2</h2>
            <div class="div1">我是h2de div</div>
            <p>我是p标签的内容{{inner}}</p>
            <input type="text" v-model='name'>
            <button @click = 'change("懒洋洋")'>点击修改name</button>
        </div>
    </template>

调用

 template:'#one',

全部代码：

    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id='app'>
      {{msg}}
        <v-one></v-one>
        <v-one></v-one>
        <v-one></v-one>   
    </div>
    <template id="one">
        <div>
            <h2>我是h2</h2>
            <div class="div1">我是h2de div</div>
            <p>我是p标签的内容{{inner}}</p>
            <input type="text" v-model='name'>
            <button @click = 'change("懒洋洋")'>点击修改name</button>
        </div>
    </template>
</body>
<!-- <script src='./vue.js'></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg:'外层盒子'
        },
        methods: {
        },    
        components:{
            vOne:{
                // template ：有且只能有一个根节点
                template:'#one',
                filters:{         
               },
                
                data(){
                    return {
                        inner:'我是one组件的data',
                        name:'喜洋洋'
                    }
                   
                },
                methods: {
                    change(name){
                        this.name=name;
                    }
                },
            },
        }
    })
</script>
</html>

2.3.2data的使用

在组件中使用数据需要注意:
数据的返回方式必须是函数，目的是为了防止数据相互影响
data的修改会只修改一个值，不会全部修改。原因：这里的data使用的是方法进行返回出来的，每次调用都会执行一次，每次的data会不影响。

data(){
    return {
        inner:'我是one组件的data',
        name:'喜洋洋'
    }
},

2.3.3components的嵌套

注意：嵌套关系是只有父子关系和非父子关系，子组件只能嵌套在父组件的模板中
嵌套代码：

在js中写 
components:{
            vOne:{
                template:'#one',
                components:{
                    vTwo:{
                        template:'#two',
                        components:{
                            vThree:{
                                template:'#three'
                            }
                        }
                    }
                }
            }
        }

在页面中的嵌套关系: 
<body>
    <div id='app'>
        <v-one></v-one>
    </div>
    <template id="one">
        <div class="box">
            <h2>this is one</h2>
            <v-two></v-two>
        </div>
    </template>
    <template id="two">
        <div class="box">
            <h2>this is two</h2>
            <v-three></v-three>
        </div>
    </template>
    <template id="three">
        <div class="box">
            <h2>this is three</h2>
        </div>
    </template>
</body>

嵌套的实例：
效果图：
嵌套实例

全部代码：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /* viewport width 视口的宽度 */
            width: 100vw;
            height: 100vh;
            display: flex;
            /* 垂直方向 */
            flex-direction: column;
        }
        .headerbox{
            height: 60px;
            background: yellow;
        }
        .footerbox{
            height: 100px;
            background: tomato;
        }
        .mainbox{   
         /* 分配剩余空间  */
            flex: 1;
            background: pink;
            display: flex;
        }
        .leftbox{
            width: 150px;
            background: turquoise;
        }
    </style>
</head>

<body>
    <div id='app' class="box">
        <v-header></v-header>
        <v-main></v-main>
        <v-footer></v-footer>
    </div>
    <template id="header">
        <div class="headerbox">
            this is  header
        </div>
    </template>
    <template id="main">
        <div class="mainbox">
            <v-left></v-left>
            <v-right></v-right>
        </div>
    </template>
    <template id="footer">
        <div class="footerbox">
            this is  footer
        </div>
    </template>
    <template id="left">
        <div class="leftbox">
            this is  left
        </div>
    </template>
    <template id="right">
        <div class="rightbox">
            this is  right
        </div>
    </template>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
        },
        components:{
            vHeader:{
                template:'#header',
            },
            vMain:{
                template:'#main',
                components:{
                    vLeft:{
                        template:'#left'
                    },
                    vRight:{
                        template:'#right'
                    }
                }
            },
            vFooter:{
                template:'#footer'
            }
        }
    })
</script>
</html>

3.Vue脚手架

安装：
1.安装webpack

cnpm i wepback -g

2.安装脚手架vue-cli

cnpm i vue-cli -g

3.创建项目

vue init webpack demo (注意名字不能带大写)

4.启动项目

cd demo
npm run dev    启动后去localhost:8080访问

生成后的全部文件及说明：
src中的main.js为入口文件
在这里插入图片描述
Vue脚手架后续内容请参考VUE—学习进阶05

不断进阶学习者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录