Vue JS 2 Tutorial (三) Data & Methods

Data & Methods

创建组件ProductListOne

<template>

 <div id="product-list-one">

 <h2>Product List One</h2>

 <ul>

 <li v-for="product in products">

 <span class="name">{{ product.name }}</span>

 <span class="price">£{{ product.price }}</span>

 </li>

 </ul>

 </div>

</template>

  

<script>

export default {

 props: ['products'],

 data () {

 return {

  

 }

 }

}

</script>

  

<style scoped>

#product-list-one{

 background: #FFF8B1;

 box-shadow: 1px 2px 3px rgba(0,0,0,0.2);

 margin-bottom: 30px;

 padding: 10px 20px;

}

#product-list-one ul{

 padding: 0;

}

#product-list-one li{

 display: inline-block;

 margin-right: 10px;

 margin-top: 10px;

 padding: 20px;

 background: rgba(255,255,255,0.7);

}

.price{

 font-weight: bold;

 color: #E8800C;

}

</style>

组件导入及注册

import ProductListOne from './components/ProductListOne.vue'

import ProductListTwo from './components/ProductListTwo.vue'

  

export default {

 name: 'app',

 components: {

 'product-list-one': ProductListOne,

 'product-list-two': ProductListTwo

 },

 data () {

 return {

 products: [

 {name: 'Banana Skin', price: 20},

 {name: 'Shiny Star', price: 40},

 {name: 'Green Shells', price: 60},
 {name: 'Red Shells', price: 80}

 ]

 }

 }

}

组件使用

<template>

 <div id="app">

 <product-list-one v-bind:products="products"></product-list-one>

 <product-list-two v-bind:products="products"></product-list-two>

 </div>

</template>

运行效果