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
vue学习-day03（动画，组件）的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- 38.VUE学习之-全局组件和局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Vue学习之todolist组件拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习系列(二)——组件详解
前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...
- Vue学习之动画小结（六）
一.Vue中实现动画的方式:https://cn.vuejs.org/v2/guide/transitions.html Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括 ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- Vue 学习笔记之 —— 组件（踩了个坑）
最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...
- vue学习记录⑤（组件通信-父与子）
今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...
- Vue学习之不同组件之间的消息传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- unable to compile class for jsp解决方案
今天遇到了一个错误,纠结了两天,百度很多经验,结果都不太起效.通过比较自己之前不报错的项目,发现以下解决方案. 报错: 解决方案: 1.先将jar 包复制到lib目录下. 2.将lib目录下的jar包 ...
- nginx+keepalived（双主）
一.环境 nginx1 192.168.40.211 nginx2 192.168.40.132 vip1 192.168.40.223 主为keep1,从为keep2 vip2 ...
- 教你用 Netty 实现一个简单的 RPC！
众所周知,dubbo 底层使用了 Netty 作为网络通讯框架,而 Netty 的高性能我们之前也分析过源码,对他也算还是比较了解了. 今天我们就自己用 Netty 实现一个简单的 RPC 框架. 1 ...
- 洛谷 P1809 过河问题 题解
题面 这道题是一道贪心+DP的好题: 首先排序是一定要干的事情. 然后我们分情况处理: 1.如果剩一个人,让最小的回来接他 2.如果剩两个人,让最小的回来接,剩下的那两个人(即最大的两个人)过去,让次 ...
- 这才是最完美SSD：性能满血发挥 万里挑一
固态硬盘同质化日益严重,不同品牌的固态盘想要一决高下就只有靠品牌口碑与做工硬实力了. 最近影驰对他们的ONE系列固态硬盘产品进行了一波更新,推出了多种容量的ONE PCIe M.2 SSD,今天我们就 ...
- 【ESXI6.0】 ESXI6.0安装时无法安装网卡驱动的解决方法及将网卡驱动加载进ISO
http://blog.163.com/xifanliang@yeah/blog/static/115078488201571584321787/ 若安装时提示如下图所示 之后安装无法完成,会提示没有 ...
- CSS布局方式
1.内边距 padding <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- Listview.Finditem()函数用法
查找LISTVIEW控件中指定的字符串. Private Sub ListView2_Click() On Error GoTo ONERROR Dim strFindMe As String ...
- HDU5840 Problem This world need more Zhu 分块 树剖
给一颗n个点的有点权的树,有m个询问,对于每个询问u,v,k,首先将点u到点v的最短路径上的所有点按顺序编号,u的编号为1,求树链上所有点的新编号cnt满足cnt%k==0的点的权值的最大值.n,m, ...
- php扩展安装，指定新的openssl
1 自己从源码编译一个新的openssl 下载源码下来解压到 /mnt/soft/openssl-1.0.2m (openssl 安装到) ./config -h /usr/bin/perl ./Co ...