vue
一、键盘修饰符
二、vue生命周期
三、vue-resource 、axios实现请求
1、vue-resource发起get请求
2、使用async与await实现异步请求
3、vue-resource发起post 与 jsonp请求
4、axios发起请求
四、品牌列表完善
1、展示品牌列表
2、Bootstrap 3 插件
3、添加数据
4、配置axios请求的根路径
5、抽离成单独文件
6、删除数据
五、动画
1、自写样式
效果：
2、使用Animate.css动画类库
3、动画- 钩子函数
4、列表动画
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.5.9.js"></script>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
line-height: 30px;
border: 1px dashed #ccc;
margin: 5px;
font-size: 12px;
padding-left: 10px;
width: 500px;
cursor: pointer;
}
li:hover {
background-color: orange;
box-shadow: 0 0 7px gray;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(200px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
.v-move { /* 让元素被改变定位的时候，有一个缓动的效果 */
transition: all 0.5s ease;
}
.v-leave-active { /* 表示要被删除的那个元素， 让即将被移除的元素，脱离标准流，这样，后面的元素就能渐渐的浮动上来了 */
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
Id：<input type="text" v-model="id">
Name：<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
</div>
<transition-group tag="ul">
<li v-for="(item, i) in list" :key="item.id" @click="remove(i)">{{ item.id }} ------ {{ item.name }}</li>
</transition-group>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: '高峻俊' },
{ id: 2, name: '付哥哥' },
{ id: 3, name: '玉姐姐' },
{ id: 4, name: '彬哥哥' }
],
id: '',
name: ''
},
methods: {
remove(i) {
this.list.splice(i, 1)
},
add(){
const p = { id: this.id, name: this.name }
this.list.unshift(p)
this.id = this.name = ''
}
}
});
</script>
</body>
</html>
5、name属性（多个动画）
效果：
代码 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.5.9.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.4s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateY(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="Toggle" @click="flag=!flag">
<transition>
<h3 v-show="flag">111111111</h3>
</transition>
<hr>
<input type="button" value="Toggle2" @click="flag2=!flag2">
<transition name="fade">
<h3 v-show="flag2">22222222</h3>
</transition>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false,
flag2: false
},
methods: {}
});
</script>
</body>
</html>