木心

毕竟几人真得鹿,不知终日梦为鱼

导航

vue学习-day03(动画,组件)

目录:

    1.品牌列表-从数据库获取列表
    2.品牌列表-完成添加功能
    3.品牌列表-完成删除功能
    4.品牌列表-全局配置数据接口的根域名
    5.品牌列表-全局配置emulateJSON选项
    6.动画-使用过渡类名实现动画
    7.动画-自定义v-前缀
    8.动画-使用第三方animate.css类库实现动画
    9.动画-钩子函数实现半场动画的介绍
    10.动画-使用transition-group元素实现列表动画
    11.动画-实现列表删除和删除时候的动画效果
    12.动画-transition-group中appear和tag属性的作用
    13.组件化和模块化的区别
    14.创建组件的3种方式(全局组件)
    15.创建私有(局部)组件---在Vue实例里面定义
    16.组件中的data
    17.组件切换-使用v-if和v-else结合flag进行切换
    18.组件切换-使用Vue提供的component元素实现组件切换

 

1.品牌列表-从数据库获取列表    <--返回目录

* 导入vue-resource.js
* 在vue实例的methods中写一个函数getAllList(), 使用ajax发送get请求,获取json数据
    - api接口:
        地址:
        作用描述:品牌数据列表
        请求方式:get
        传入api的参数:无
        返回数据格式:json
        返回数据格式样例:
            {
                status: 0,
                message: [{
                    id: 1,
                    name: "奥迪",
                    ctime: "2017-02-07T10: 32: 07.000Z"
                },
                {
                    id: 2,
                    name: "奔驰",
                    ctime: "2017-02-07T10: 32: 07.000Z"
                }]
            }
            
    - getAllList()函数里面的代码
        this.$http.get('url').then(result => {
            result = result.body;
            if(result.status === 0) {
                //成功了
                this.list = result.message;
            }else {
                //失败了
                alert('获取数据失败!');
            }
        });
        
* 在vue的created()生命周期函数中调用 this.getAllList();

 

2.品牌列表-完成添加功能    <--返回目录

* 在vue实例的methods中写一个函数add(), 使用ajax发送post请求,获取json数据
- api接口:
    地址:
    作用描述:添加品牌数据
    请求方式:post
    传入api的参数:name:"品牌名称"
    返回数据格式:json
    返回数据格式样例:
        {
            status:0,
            message: "添加成功"
        }

- add()函数里面的代码:
    this.$http.post("url",{name:this.name},{emulateJSON:true}).then(result => {
        if(result.body.status === 0){
            //添加成功,手动调用getAllList()方法,刷新列表
            this.getAllList();
        }else {
            alert('添加失败');
        }
    });

 

3.品牌列表-完成删除功能    <--返回目录

* 在vue实例的methods中写一个函数del(id), 使用ajax发送get请求,获取json数据
- api接口:
    地址:
    作用描述:删除品牌数据
    请求方式:get
    传入api的参数:id:传入品牌数据id
    返回数据格式:json
    返回数据格式样例:
        {
            status:0,
            message: "删除成功"
        }

- del(id)函数里面的代码:
    this.$http.get("url"+id).then(result => {
        if(result.body.status === 0){
            this.getAllList();
        }else {
            alert(result.body.message);
        }
    });

 

4.品牌列表-全局配置数据接口的根域名    <--返回目录

<script>
    Vue.http.options.root = "根路径http://vue.studyit.io/";
    //创建Vue的实例
</script>

  然后ajax的url必须使用相对路径,即前面没有'/'

 

5.品牌列表-全局配置emulateJSON选项    <--返回目录

//全局启用emulateJSON 选项
Vue.http.options.emulateJSON = true;

// 修改add()方法,删除{emulateJSON = true}
this.$http.post("url",{name:this.name}).then(result => {
    if(result.body.status === 0){
        //添加成功,手动调用getAllList()方法,刷新列表
        this.getAllList();
    }else {
        alert('添加失败');
    }
});

 

6.动画-使用过渡类名实现动画    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
        /*自定义样式,来控制元素动画样式*/
        .v-enter, .v-leave-to {
            opacity: 0;
            transform:translate(150px);
        }
        .v-enter-active,  /*入场动画的时间段*/
        .v-leave-active {  /*离场动画的时间段*/
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="toggle">
        <!-- 使用transition标签,将需要动画的元素包裹起来 -->
        <transition>
            <h3 v-if="flag">这是一个h3标签</h3>
        </transition>
    </div>
    <script type="text/javascript"> 
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
                toggle: function() {
                    this.flag = ! this.flag;
                }
            }    
        });
    </script>
</body>
</html>

 

7.动画-自定义v-前缀    <--返回目录

/*自定义样式,来控制元素动画样式*/
.my-enter, .my-leave-to {
    opacity: 0;
    transform:translateY(150px);
}
.my-enter-active,  /*入场动画的时间段*/
.my-leave-active {  /*离场动画的时间段*/
    transition: all 0.4s ease;
}

<!-- 使用transition标签,将需要动画的元素包裹起来 -->
<!--  name="my"为自定义的前缀 -->
<transition name="my">
    <h3 v-if="flag">这是一个h3标签</h3>
</transition>

 

8.动画-使用第三方animate.css类库实现动画    <--返回目录

// 百度animate.css进入官网https://daneden.github.io/animate.css
// 先使用link标签引入animate.css
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
    <h3 v-if="flag">这是一个h3标签</h3>
</transition><transition enter-active-class="bounceIn" leave-active-class="bounceOut">
    <h3 v-if="flag" class="animated">这是一个h3标签</h3>
</transition>

// 统一设置入场时间和离场时间为400ms
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400">
    <h3 v-if="flag" class="animated">这是一个h3标签</h3>
</transition>

// 分开设置
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
    <h3 v-if="flag" class="animated">这是一个h3标签</h3>
</transition>

 

9.动画-钩子函数实现半场动画的介绍    <--返回目录
    // 动画案例:钩子函数实现小球半场动画

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
        div.ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">
        <transition @befor-enter="beforEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script type="text/javascript"> 
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                beforEnter(el) {
                    el.style.transform = "translate(0, 0)";
                },
                enter (el, done) {
                    el.offsetWidth;
                    el.style.transform = "translate(200px, 500px)"
                    el.style.transition = 'all 1s ease';
                    done(); // done就是afterEnter函数的引用
                },
                afterEnter(el) {
                    this.flag = !this.flag;
                }
            }    
        });
    </script>
</body>
</html>

 

10.动画-使用transition-group元素实现列表动画    <--返回目录
    // 在实现列表过渡的时候,如果需要过渡的元素,是通过v-for循环渲染出来的,不能使用transiton包裹,需要使用transition-group
    <transition-group>
        <li v-for="item in list" :key="item.id">{{item.id}}--{{item.name}}</li>
    </transition-group>

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
        /*自定义样式,来控制元素动画样式*/
        .my-enter, .my-leave-to {
            opacity: 0;
            transform:translateY(150px);
        }
        .my-enter-active,  /*入场动画的时间段*/
        .my-leave-active {  /*离场动画的时间段*/
            transition: all 0.4s ease;
        }
        li:hover {
            background-color: hotpink;
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        id:<input type="text" v-model="id"><br/>
        name:<input type="text" v-model="name"><br/>
        <input type="button" value="添加" @click="add">
        <ul>
            <transition-group name="my">
                <li v-for="item in list" :key="item.id">{{item.id}}--{{item.name}}</li>
            </transition-group>
        </ul>
    </div>
    <script type="text/javascript"> 
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [{id:1,name:'张三'},{id:2,name:'李四'}]
            },
            methods: {
                add() {
                    this.list.push({id:this.id,name:this.name});
                    this.id = '';
                    this.name = '';
                }
            }    
        });
    </script>
</body>
</html>

 

11.动画-实现列表删除和删除时候的动画效果    <--返回目录
12.动画-transition-group中appear和tag属性的作用    <--返回目录

  // 在标签transition-group中添加appear属性就可以实现列表的入场动画
  // transition-group默认别渲染为一个span元素,tag="ul"指定transition-group被渲染为一个ul元素

<!-- <ul> -->
    <!-- 在标签transition-group中添加appear属性就可以实现列表的入场动画 -->
    <!-- tag="ul"指定transition-group被渲染为一个ul元素 -->
    <transition-group name="my" appear tag="ul">
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}--{{item.name}}</li>
    </transition-group>
<!-- </ul> -->

 

13.组件化和模块化的区别    <--返回目录
    * 什么是vue组件:组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来需要什么功能,
      就调用对应的组件即可。
    * 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的功能单一
    * 组件化:是从UI界面的角度进行划分的,前端组件化,可以方便UI组件的重用

 

14.创建组件的3种方式(全局组件)    <--返回目录

  方式1:

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 第三步:使用组件。直接以标签的方式使用组件,驼峰名称myCom1还原为my-com1 -->
        <my-com1></my-com1>
    </div>
    <script type="text/javascript">  
        //第一步:使用Vue.extend来创建全局Vue组件的模板
        var com1 = Vue.extend({
            template: '<h3>这是使用Vue.extend创建的组件</h3>'//通过template属性,指定组件要展示的HTML结构
        });
        //第二步:使用Vue.component('自定义的组件的名称',创建出来的组件模板对象); 创建组件
        Vue.component('myCom1',com1);

        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }    
        });
    </script>
</body>
</html>

 

  方式2:

Vue.component('myCom2',{
    template: '<h3>这是使用第二种方式创建的组件</h3>'
});

 

  方式3:

<template id="tempId"> 
    <div>
        <h3>这是使用第三种方式创建的组件</h3>
    </div>
</template>

<script type="text/javascript">  
    //创建组件的第三种方式
    Vue.component('myCom3',{
        template: '#tempId'
    });
</script>

 

15.创建私有(局部)组件---在Vue实例里面定义    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用组件:直接以标签的方式使用组件,驼峰名称myCom3还原为my-com3 -->
        <my-com4></my-com4>
        <my-com5></my-com5>
    </div>

    <template id="tempId"> 
        <div>
            <h3>创建私有的组件2</h3>
        </div>
    </template>

    <script type="text/javascript">  
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            components: {
                myCom4: {
                    template: '<h1>创建使用的组件1</h1>'
                },
                myCom5: {
                    template: '#tempId'
                }
            }    
        });
    </script>
</body>
</html>

 

16.组件中的data    <--返回目录

// 组件中data必须是一个函数,该函数必须返回一个对象
Vue.component('mycon1',{
    template: '<h3>这是个全局组件---{{msg}}',
    data: function() {
        return {
            msg: '这是组件里面定义的数据'
        }
    }
});

  为什么组件的data必须是一个function?

 

17.组件切换-使用v-if和v-else结合flag进行切换    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="登录" @click="flag=true">
        <input type="button" value="注册" @click="flag=false">
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>

    <script type="text/javascript">  
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
            },
            components: {
                login: {
                    template: '<h3>登录组件</h3>'
                },
                register: {
                    template: '<h3>注册组件</h3>'
                }
            }    
        });
    </script>
</body>
</html>

 

18.组件切换-使用Vue提供的component元素实现组件切换    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 导入vue的包 -->
    <script type="text/javascript" src="vue2.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style type="text/css">
        div {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <component :is="comName"></component>
    </div>

    <script type="text/javascript">  
        //创建一个vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login'
            },
            methods: {
            },
            components: {
                login: {
                    template: '<h3>登录组件</h3>'
                },
                register: {
                    template: '<h3>注册组件</h3>'
                }
            }    
        });
    </script>
</body>
</html>

 

19.组件切换---添加动画    <--返回目录

/*自定义样式,来控制元素动画样式*/
.my-enter, .my-leave-to {
    opacity: 0;
    transform:translateX(150px);
}
.my-enter-active,  /*入场动画的时间段*/
.my-leave-active {  /*离场动画的时间段*/
    transition: all 0.4s ease;
}

<!-- 通过mode属性,设置组件切换时的模式,out-in表示上一个组件离场动画后,新组件才开始入场动画-->
<transition name="my" mode="out-in">
    <component :is="comName"></component>
</transition

posted on 2019-07-14 14:12  wenbin_ouyang  阅读(258)  评论(0编辑  收藏  举报