插槽
<body>
<div id="app">
<my-component>
<a href="##">百度</a>
</my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
var myvue = new Vue({
el:"#app",
components:{
"my-component":{
template:"<div><slot></slot><slot></slot><slot></slot></div>"
}
}
})
</script>
<my-component>
<a href="##">百度</a>
</my-component>
创建组件
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
Vue.component("my-component",{
data:function(){
return{
itemList:["首页","新闻列表","时事要闻"]
}
},
template:"<ul><li v-for='item in itemList'>{{item}}</li></ul>"
})
new Vue({
el:"#app"
})
</script>
</body>
单元素动画
<style>
.bounce-enter-active{
animation: animate-in .5s;
}
.bounce-leave-active{
animation: animate-in .5s reverse;
}
@keyframes animate-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
<body>
<div id="app">
<button @click="show=!show">动画</button>
<transition name="bounce">
<p v-show="show">动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果动画效果</p>
</transition>
</div>
</body>
<script src="./vue.js"></script>
<script>
var myvue = new Vue({
el:"#app",
data: {
show:true
},
})
</script>
购物车
<!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>
<link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
<style>
.cart-title{
font-size: 18px;
text-align: center;
font-weight: bold;
padding-top: 30px;
padding-bottom: 30px;
}
.goods{
height: 150px;
}
.num{
border-top:1px solid #eee;
}
.num > div{
text-align: center;
}
.rowtype{
padding-bottom: 20px;
}
.rowtype > div{
text-align: center;
}
.row > div > span {
display: block;
height: 150px;
line-height: 150px;
text-align: center;
margin: 0 auto;
}
.row input{
width: 35%;
height: 20%;
text-align: center;
}
.total{
text-align: right;
font-weight: bold;
font-size: 20px;
padding-right: 60px;
}
</style>
</head>
<body>
<div class="container-fluid" id="app">
<div class="cart-title">购物车</div>
<div class="row rowtype">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">商品</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">单价</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">数量</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">总价</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">操作</div>
</div>
<div class="row num" v-for="(item,index) in goodsList">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img src="psb.jpeg" class="goods">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<span class="singleprice">
<input type="text" name="singleprice" v-model="item.singleprice">
</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<span class="count">
<input type="text" name="count" v-model="item.count">
</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="total">
{{item.singleprice * item.count}}
</span>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<span class="manager">
<a href="##" @click = "delteitem(index)">删除</a>
</span>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 total">
总价:{{totalPrice}}
</div>
</div>
</div>
<script src="./vue.js"></script>
<script>
var myvue = new Vue({
el:"#app",
data:{
goodsList:[
{
singleprice:20,
count:5
},
{
singleprice:10,
count:6
},
]
},
methods: {
delteitem:function(index){
this.goodsList.splice(index,1)
}
},
computed: {
totalPrice:function(){
var total = 0;
for(var i = 0;i < this.goodsList.length;i++){
total += this.goodsList[i].singleprice*this.goodsList[i].count;
}
return total;
}
},
})
</script>
</body>
</html>
