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>