vue中配置全局变量、动画、组件

最新推荐文章于 2024-07-29 20:07:29 发布

原创最新推荐文章于 2024-07-29 20:07:29 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue中配置全局变量、实现动画效果以及组件的多种定义方式，包括在components中定义和在vue实例中定义组件。同时，探讨了组件的切换方法，如通过v-if/v-else和标签切换，并讨论了组件的动画切换效果。

1、配置全局变量

				1.配置全局的根域名

Vue.http.options.root='根访问路径'

				2.配置全局的emulateJSON（ajax返回数据为json）

Vue.http.options.emulateJSON=true

2、动画

	使用标签<transition></transition>来显示动画的内容
    使用钩子函数实现半场动画
    使用标签<transition-group></transition-group>来实现列表动画
            使用.v-move和.v-leave-active配合使用能够实现列表的后续效果
            给标签添加appear实现入场的动画效果，添加tag属性来指定渲染后的标签为ul,默认为span

<style type="text/css">
        .v-enter,
        .v-leave-to{
            transform: translateX(150px);
            transition: opacity 0.5s;
        }
        
        .v-enter-to,
        .v-leave{
            transition: all 0.8s ease;
        }
        
        
        .my-enter,
        .my-leave-to{
            transform: translateX(150px);
            transition: opacity 0.5s;
        }
        
        .my-enter-to,
        .my-leave{    
            transition: all 0.8s ease;    
        }
        
    </style>
    <body>
        <div id="app">
            <input type="button" value="切换" @click="toggle">
            <transition>
                <p v-if="flag">{{msg}}</p>
            </transition>
            <hr>
            <!-- 使用自定义前缀来定义动画的样式 -->
            <input type="button" value="切换" @click="toggle2">
            <transition name="my">
                <p v-if="flag2">{{msg}}</p>
            </transition>
            <hr>
            <!-- 使用第三方样式并使用duration来设定动画入场和离场 的时间 -->
            <!-- <input type="button" value="切换" @click="toggle3">
            <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="2000">
                  <h3 v-if="flag3">这是一个H3</h3>
            </transition> -->
            
            <!-- 使用第三方样式并使用duration来  分别设定动画入场和离场的时间 -->
            <input type="button" value="切换" @click="toggle3">
            <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:400,leave:600}">
                  <h3 v-if="flag3" class="animated">这是一个H3</h3>
            </transition>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'动画的内容',
                flag:true,
                flag2:true,
                flag3:true
            },
            methods:{
                toggle(){
                    this.flag = !this.flag;
                    
                },
                toggle2(){
                    this.flag2 = !this.flag2;
                    
                },
                toggle3(){
                    this.flag3 = !this.flag3;
                    
                }
            }
        
        })
        
    </script>

			*使用钩子函数实现半场动画*

<style type="text/css">
        #boll{
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: red;
        }
    </style>
    <body>
        
        <div id="app">
            <input type="button" value="快到碗里来" @click="flag=!flag">
            <transition
            @before-enter="before_enter"
            @enter="entering"
            @after-enter="enter_after">
                <div id="boll" v-show="flag"></div>
            </transition>
            
        </div>
        
    
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                before_enter(el){
                    el.style.transform = "translate(0, 0)"
                },
                entering(el,done){
                     // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
                      // 可以认为 el.offsetWidth 会强制动画刷新
                      el.offsetWidth
                      // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
                      el.style.transform = "translate(150px, 450px)"
                      el.style.transition = 'all 0.5s ease'
                      // 这里的 done， 起始就是 enter_after 这个函数，也就是说：done 是enter_after函数的引用
                      done();
                },
                enter_after(el){
                      this.flag = !this.flag
                    
                }
                
            }
            
        })
    </script>

<style type="text/css">
        li{
            border:1px dashed lightsteelblue;
            font-weight: 30px;
            font-size: 14px;
            line-height: 40px;
            padding-left: 10px;
            width: 100%;
            list-style: none;
        }
        li:hover {
              background-color: pink;
              transition: all 0.8s ease;
        }
        
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }
        /* 入场的动画效果 */
        .v-move{
            transition: all 0.7s ease;
        }
        .v-leave-active{
            position: absolute;
        }


    </style>
    <body>
        <div id="app">
            id:<input type="text" id="" v-model:value="id" />
            name:<input type="text" id="" v-model:value="name" />
            <input type="button" value="添加" @click="add">
            <!-- appear属性为添加入场的动画，tag属性将渲染的标签为ul，默认是span -->
            <transition-group appear tag="ul">
                <li v-for="(user,i) in arr" @click="del(i)" :key="user.id">{{user.id}}======={{user.name}}</li>
            </transition-group>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                id:null,
                name:null,
                arr:[
                    {id:1,name:'小明'},
                    {id:2,name:'小华'},
                    {id:3,name:'小李'},
                    {id:4,name:'小红'},
                    {id:5,name:'小美'}
                ]
            },
            methods:{
                del(id){
                    this.arr.splice(id,1);
                },
                add(){
                    this.arr.push({id:this.id,name:this.name});
                    this.id = this.name = null;
                }
            }
        })
    </script>

3、组件

1.定义组件的方式1：

<mycom></mycom>  

  var componetm = Vue.extend({
            template:'<h2>定义组件的方式1</h2>'
        });
        Vue.component('mycom',componetm);

2.定义组件的方式2：

Vue.component('mycomponent2',{
            template:'<div><h4>定义组件的方式2</h4><span>hello</span></div>'
        })

3.定义组件的方式3：

<template id="template1">
            
            <div>
                <p>定义组建的方式3</p>
            </div>
  </template>



Vue.component('mycomponent3',{
            template:'#template1'
        })

在components中定义组件：
在vue实例中定义:
Components:{

                        组件名：{

                                        template：‘模板代码’
                            }

                }
    
    组件中的data数据必须为一个方法且方法的返回值为对象，与vue实例中的data数据不同

<body>
        <div id="app">
            <mycomponent></mycomponent>
        </div>
    </body>
    <script type="text/javascript">
        
        Vue.component('mycomponent',{
            template:'<h3>定义一个私有的组件</h3>',
            /* 组建的data必须为一个方法，且方法的返回值必须为对象 */
            data:function(){
                return {msg:'hello，world'}
            }
            
        })
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
    </script>

组件的切换方式1：
使用v-if和v-else来改变flag的值进行切换

<body>
        <div id="app">
            <input type="button" value="登录" @click="flag=true">
            <input type="button" value="注册" @click="flag=false">
            <div v-if="flag">
                登录的页面
            </div>
            <div v-else="flag">
                注册的页面
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
            }
        })
    </script>