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 阅读(256) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

木心

导航

公告

vue学习-day03（动画，组件）