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) 编辑 收藏 举报