看程序学Vue.js 10- VUE.JS 中使用组件举例

步骤 1 : 组件是什么
每个产品展示，就是一个模板。 只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。

这个模板，就是组件。

步骤 2 : 局部组件

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>
 
<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
  
<script>
new Vue({
  el: '#div1',
  components:{
      'product':{
          template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
      }
  }
})
</script>

步骤 3 : 全局组件

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>
 
<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
  
<script>
Vue.component('product', {
      template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
    })
 
new Vue({
  el: '#div1'
})
</script>

步骤 4 : 参数

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>
 
<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>
  
<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })
 
new Vue({
  el: '#div1'
})
</script>

步骤 5 : 动态参数

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>
 
<div id="div1">
    组件外的值：<input v-model="outName" ><br>
    <product v-bind:name="outName"></product>
</div>
  
<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })
 
new Vue({
  el: '#div1',
  data:{
      outName:'产品名称'
  }
})
</script>

步骤 6 : 自定义事件

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>
 
<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包" sale="20" ></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮" sale="30" ></product>
</div>
 
<script>
Vue.component('product', {
      props:['name','sale'],
      template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
      methods:{
          increaseSale:function(){
              this.sale++
          }
      }
    })
 
new Vue({
  el: '#div1'
})
</script>

步骤 7 : 遍历 json 数组

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>
 
<div id="div1">
    <product v-for="item in products" v-bind:product="item"></product>
</div>
 
<script>
Vue.component('product', {
      props:['product'],
      template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
      methods:{
          increaseSale:function(){
              this.product.sale++
          }
      }
    })
 
new Vue({
  el: '#div1',
  data:{
      products:[
                {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
                {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
                {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
                ]
  }
})
</script>

步骤 8 : 最开始效果步骤里的代码

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
div.product:hover{
  border:1px solid #c40000;
   
}
div.price{
  color:#c40000; 
  font-weight:bold;
  font-size:1.2em;
  margin:10px;
}
div.productName{
  color:gray;
  font-size:0.8em;
  margin:10px;
}
div.sale{
  float:left; 
  width:100px;
  border:1px solid lightgray;
  border-width:1px 0px 0px 0px;
  color:gray;
  font-size:0.8em;
  padding-left:10px;
}
div.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="tempalate" style="display:none">
    <div class="product" v-on:click="increaseSales">
        <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" v-bind:product="item"></product>
</div>
  
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
    props: ['product'],
    template: tempalateDiv,
      methods: {
            increaseSales: function () {
                this.product.sale = parseInt(this.product.sale);
              this.product.sale += 1
              this.$emit('increment')
            }
          }
 
}
 
Vue.component('product', templateObject)
 
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>