组件
1. 组件
如效果图所示，每个产品展示，就是一个模板。 只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。这个模板，就是组件。
效果图：（文章最后有代码实现）
2. 局部组件
在 Vue对象里增加 components：
components:{
'product':{
template:'<div class="product">我要吃饭</div>'
}
}然后在视图里，通过如下方式就可以调用：<product></product>。
效果图：
代码：
<style>
.product{
width: 200px;
height: auto;
border: 1px solid salmon;
float: left;
text-align: center;
}
</style>
<!--局部组件-->
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
new Vue({
el:"#div1",
components:{
'product':{
template:'<div class="product">我要吃饭</div>'
}
}
})
</script>3. 全局组件
将组件单独定义成一部分。
代码:
<!--全局组件-->
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
Vue.component('product',{
template:'<div class="product">我要吃饭</div>',
})
new Vue({
el:"#div1",
})
</script>4.参数
像前面的例子，名称都是固定的，这样肯定不行，所以就要能够传递参数给组件。设置参数name, 并且在组件里使用这个name.
Vue.component('product', {
props:['name'],
template: '<div class="product" >{{name}}</div>'
}) 调用的时候，就当作是一个自定义属性传进去就可以了：
<product name="我要吃饭1"></product>
效果图：
代码：
<!--参数-->
<div id="div1">
<product name="我要吃饭1"></product>
<product name="我要吃饭2"></product>
<product name="我要吃饭3"></product>
</div>
<script>
Vue.component('product',{
props:['name'],
template: '<div class="product" >{{name}}</div>'
})
new Vue({
el:"#div1",
})
</script>5. 动态参数
所谓的动态参数，就是指组件内的参数可以和组件外的值关联起来.如效果所示，在组件外的input输入数据，就可以传递到组件内了。
效果图：
代码：
<!--动态参数-->
<div id="div1">
输个啥：<input v-model="name1" /><br>
<product v-bind:name="name1"></product>
</div>
<script>
Vue.component('product',{
props:['name'],
template: '<div class="product" >{{name}}</div>'
})
new Vue({
el:"#div1",
data:{
name1:"电话回访",
}
})
</script>6. 自定义事件
增加自定义事件和在一个Vue对象上增加 methods 是一样的做法。
比如：点击相应的div，次数加1。
效果图：
代码：
<!--自定义事件-->
<div id="div1">
<product name="我要吃饭1" time="1"></product>
<product name="我要吃饭2" time="2"></product>
<product name="我要吃饭3" time="3"></product>
</div>
<script>
Vue.component('product',{
props:['name','time'],
template:'<div class="product" @click="add">{{name}} 你已经吃了{{time}}次了！！',
methods:{
add:function(){
this.time++;
}
}
})
new Vue({
el:"#div1",
})
</script>7. 遍历json数组
效果图：
代码：
<!--遍历json数组-->
<div id="div1">
<product v-for="item in products" :product="item"></product>
</div>
<script>
Vue.component('product',{
props:['product'],
template:'<div class="product" @click="add">{{product.name}} 你已经走了{{product.time}}次了！！',
methods:{
add:function(){
this.product.time++;
}
}
})
new Vue({
el:"#div1",
data:{
products:[
{"name":"我独自走在郊外的小路上1","time":1},
{"name":"我独自走在郊外的小路上2","time":2},
{"name":"我独自走在郊外的小路上3","time":3},
]
}
})
</script>8. 最初的组件实现
效果图：
代码：
<style>
.product{
width: 250px;
height: auto;
cursor: pointer;
float: left;
border: 1px solid gainsboro;
margin: 10px;
}
.product:hover{
border: 1px solid firebrick;
}
.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
</style>
<div id="template" style="display: none;">
<div class="product" @click="add">
<div class="price">
¥ {{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale"> 月成交 {{product.sale}} 笔</div>
<div class="review"> 评价 {{product.review}} </div>
</div>
</div>
<div id="div1">
<product v-for="item in products" :product="item"></product>
</div>
<script>
var templatediv = $("#template").html();
console.log(templatediv);
Vue.component('product', {
props: ['product'],
template: templatediv,
methods: {
add: function() {
this.product.sale++;
}
}
})
new Vue({
el: "#div1",
data: {
products: [{
"name": "MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮",
"price": "889",
"sale": "18",
"review": "5"
},
{
"name": "宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包",
"price": "322",
"sale": "35",
"review": "12"
},
{
"name": "唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮",
"price": "523",
"sale": "29",
"review": "3"
},
]
}
})
</script>