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 ...
随机推荐
- CF1187E Tree Painting【换根dp】
题目传送门 题意 一棵$N$个节点的树,初始时所有的节点都是白色,第一次可以选择任意一个把它涂成黑色.接下来,只能把与黑色节点原来相连的白色节点涂成黑色(涂成黑色的点视为被删去,与其它节点不相连).每 ...
- vue ----》实现打印功能
1.安装打印相关依赖 cnpm install vue-print-nb --save 2.安装后,在main.js文件中引入 import Print from 'vue-print-nb' Vue ...
- v-if 和v-show的区别
在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的 ...
- xmake从入门到精通9：交叉编译详解
xmake是一个基于Lua的轻量级现代化c/c 的项目构建工具,主要特点是:语法简单易上手,提供更加可读的项目维护,实现跨平台行为一致的构建体验. 除了win, linux, macOS平台,以及an ...
- docker安装详解
系统要求 64位操作系统 Linux kernel大于等于3.10 CentOS 7以及以上版本 yum安装 移除旧版本docker信息 # yum -y remove docker docker-c ...
- MySQL -2- 体系结构--随笔小记
简介与安装NoSQLRDBMS版本安装方式二进制安装,源码安装体系结构CS模型TCP/IPsocketmysql master thread 实例mysqld 的程序构成连接层 协议.验证.链接线程S ...
- <<C++ Primer>> 第四章 表达式
术语表 第 4 章 表达式 算术转换(arithmetic conversion): 从一种算术类型转换成另一种算术类型.在二元运算符的上下文中,为了保留精度,算术转换通常把较小的类型转换成较大的类型 ...
- linux：文件/目录权限设置
一.权限修改命令: chmod [OPTION]... MODE[,MODE]... FILE...二.文件/目录MODE指定方式: 1).八进制(r=4,w=2,x=1) [root@pin ...
- PostGIS 爆管分析之找出上游阀门（优化版）
说明 前面描述过利用postgis查找上游阀门的原理,以及代码,其实当初写完就发现又很大的优化空间,但一直没有时间去做. 最近遇到一个情况,处理60w+条管网数据时,效率太慢了,于是腾时间优化了一版. ...
- kibana报[FORBIDDEN/12/index read-only / allow delete (api)]错误
一.错误描述 1.在kibana,dev中pose数据,报[FORBIDDEN/12/index read-only / allow delete (api)]错误. 尝试过网上的说的方法一:在kib ...