Vue学习记录，心得体会-2

最新推荐文章于 2024-06-14 16:18:14 发布

非忆

最新推荐文章于 2024-06-14 16:18:14 发布

阅读量3k

点赞数

本文链接：https://blog.youkuaiyun.com/Gurad233/article/details/80532350

版权

本文详细介绍了Vue的动画实现，包括vue-resource的全局配置、过渡类名的应用、第三方类库animation的整合、vue-router的使用，以及组件化开发的各种技巧，如创建组件、父子组件通信和路由动画等。同时，文中还展示了如何利用ref获取DOM元素和使用Vue-router进行动态路由匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-resource的全局配置

在每次使用vue-resource进行请求时，我们都要进行整个路由地址的书写，我们可以通过vue-resource的配置选项，来进行根域名的配置，配置根域名的好处就是，不用我们每次都要书写很长的路由地址，而且万一根域名更换之后，我们进行根域名的更换也是很方便的。

通过语法 Vue.http.options.root = '/root'; 来进行根域名的配置。

只要配置全局根域名之后，每次发送http请求时，请求的url路径应该以相对路径开头，前面不能带 / ，否则，不会启用路由拼接。

而在我们进行post请求时，总会启动配置选项{emulateJSON:true},来将ajax伪装为表单请求，我们也可以为这个配置进行全局的配置。

<body>
<div id="app">
    <input type="button" value="get" @click="getInfo">
    <input type="button" value="post" @click="postInfo">
    <input type="button" value="jsonp" @click="jsonpInfo">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    show=(data)=>{
        console.log(data);
    }
    //进行全局根域名配置
    Vue.http.options.root="http://127.0.0.1:8888/";
    //进行post伪装表单的全局配置
    Vue.http.options.emulateJSON=true;
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{
            getInfo(){
                this.$http.get("get")
                    .then((data)=>{
                        console.log(data);
                    },(err)=>{
                        console.log(err);
                    })
            },
            postInfo(){
                this.$http.post("post",{})
                    .then(data=>{
                        console.log(data);
                    },err=>{
                        console.log(err);
                    })
            },
            jsonpInfo(){
                this.$http.jsonp("jsonp?callback=show")
                    .then(function () {

                    },function () {

                    })
            }
        },
    })

</script>

</body>

使用过度类名来实现动画

在vue中，如果想制作动画效果，需要将想使用动画效果的dom元素用 transiton 元素进行包裹，如果transition中的元素被增加，删除，vue会自动检测元素是否应用了css的动画，是否有对应的钩子函数。

vue提供了6个过度类名，如果transition中的元素被添加或者删除，如果绑定了css动画，就会执行相应的动画。

v-enter :元素过度开始时的状态。

v-enter-active:元素在进入过度时，会执行这个类中定义好的动画，过度属性，过度时间，过度曲线。

v-enter-to:元素过度完成之后的状态

v-leave:元素开始离开时的状态

v-leave-active:元素正在离开时，会执行这个类中定义的动画。

v-leave-to:元素离开之后的状态

这里面的v-开头表示的是选中了一个没有name属性的transition元素，如果transiton元素有了一个name属性,名为active，那么就需要active-enter才可以规定它进入时的状态。

下面是代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .v-enter,
        .v-leave-to{
            transform: translateX(80px);
            opacity:0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="切换" @click="flag=!flag">
    <transition>
        <h3 v-if="flag">hello word</h3>
    </transition>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{}
    })
</script>
</body>

Vue中使用第三方类库animation实现动画

自定义动画还是麻烦的，我们可以使用第三方动画库，animation来帮助我们更好的实现一些动画效果。

但是在vue中我们如何去实现它呢？

首先我们需要在transition元素中加入属性，enter-active-class="animated animation动画库的规定动画效果类名" 来定义我们的入场动画，通过leave-active-class="animated animation动画库的规定动画效果类名",来实现动画效果.

<body>
<div id="app">
    <button @click="flag=!flag">切换</button>
    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <h3 v-if="flag">Animation</h3>
    </transition>
    <!--我们总是要在入场和出场动画类中加入一个animated，很是麻烦，其实我们也可以直接
    在子元素的类名中加速 animated ，而且我们还可以通过 :duration="时间" ,来控制
    动画入场和出场的时间，还可以使用:duration="{enter:"时间",leave:"时间"}"，来
    分别控制入场和出场的时间-->
    <transition enter-active-class="bounceIn" leave-active-class="bounceOut"
               :duration="{enter:300,leave:1000}">
        <h3 v-if="flag" class="animated">Animation</h3>
    </transition>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{

        }
    })
</script>
</body>

vue动画的钩子函数，来执行半场动画

我们使用vue的类动画时，动画总是一个循环，如果我们只想让一个小球只有飞走这一个动画效果，那么使用class动画就很难完成，所以我们要使用动画钩子函数来完成。

<body>
<div id="app">
    <button @click="flag=!flag">掉落</button>
    <!--首先在transition元素中调用钩子函数，当遇到什么事件，执行什么操作，首先
    动画的钩子函数分为八部分，常用的为六部分，
    before-enter 元素准备进入
    enter 元素进入过程中
    after-enter 元素进入完毕
    before-leave 元素准备离开
    leave 元素离开中
    after-leave 元素离开之后
    我们使用v-on 也就是@进行钩子函数的绑定
        -->
    <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
    >
        <div class="ball" v-if="flag">

        </div>
    </transition>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:false
        },
        methods:{
            /*当元素被创建时，vue察觉到了它绑定了js钩子函数，首先开始执行
            before-enter函数，先规定元素的位置，也是为了当元素进入完毕，重新进入时
            起始位置不变*/
            beforeEnter(el){
                el.style.transform="translate(0,0)";

            },
            /*在元素进入过程中，规定了元素要到达的位置，要执行的动画，
            还有offsetWidth这个属性，只有写出这个属性，动画才会执行
            * */
            /*第二个参数done，实际上代表了最后一个函数after-enter，当动画执行完毕之后
            * 我们显示的调用这个函数，是为了让动画更流畅的结束，如果不调用的话，可能会有卡顿
            * 之类的反应*/
            enter(el,done){
                el.offsetWidth;
                el.style.transform="translate(50px,200px)";
                el.style.transition="all 1s ease";
                done();

            },
            /*最后动画结束时，让元素消失，当重新调用时，动画又会从起始的位置执行*/
            afterEnter(el){
                this.flag=!this.flag;
            }

        }
    })
</script>
</body>

使用transition-group来实现v-for循环出的列表动画

在我们使用v-for循环出了列表时，想给列表中的元素设置动画，我们就需要在外部套用transition-group 元素，并且我们必须要给循环的元素设置 :key 属性。

然后，使用过度类名来添加动画，

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            width: 100%;
            border: 1px dashed red;
            list-style: none;
            margin: 5px;
        }
        li:hover{
            background-color: coral;
            transition: all 0.4s ease;
        }
        .v-enter,
        .v-leave-to
        {
            transform: translateY(30px);
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
&l

最低0.47元/天解锁文章