Vue.js中的组件

Question

I am a bigenner programmer with some experience in Java. Now I am trying to learn JS with Vue.js framework. I got these piece of repetead code and I want to replace them with a Vue component with different data for each single instance. The code represents five different div's for mobile phones. I need to create a mobile phone component and pass some parameters for each phone. Could you show an example of how to do this? It would be really helpful to understand the concept of the components in Vue.js. Thanks in advance.

The code:

        <div class="phone">
      <img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/iphone-8-concept-8-3-470x310@2x.jpg">
      <section>
        <h2>iPhone Z</h2>
        <ul>
          <li>Semitransparent telefon</li>
          <li>5G ready</li>
          <li>Handhållare</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="200">
    </div>
    <div class="phone">
      <img src="https://images.techhive.com/images/idge/imported/imageapi/2015/01/14/17/011011-iphoney5-2-100546391-gallery.idge.jpg">
      <section>
        <h2>iPhone G</h2>
        <ul>
          <li>Armbandstelefon</li>
          <li>Projicerad skärm</li>
          <li>Virtual touch</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="250">
    </div>
    <div class="phone">
      <img src="http://www.newsmobile.in/wp-content/uploads/2017/06/iPhone1.jpg">
      <section>
        <h2>iPhone Mini</h2>
        <ul>
          <li>Retrodesign</li>
          <li>Face recognition</li>
          <li>Handhållare</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="110">
    </div>
    <div class="phone">
      <img src="http://cdn.images.express.co.uk/img/dynamic/59/590x/secondary/update-samsung-gear-s3-android-wear-google-801981.jpg">
      <section>
        <h2>Samsung Wear</h2>
        <ul>
          <li>Look cool</li>
          <li>Feel hot</li>
          <li>Arm-processor</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="200">
    </div>
    <div class="phone">
      <img src="http://thefoxisblack.com/blogimages//samsung-display-centric-world.jpg">
      <section>
        <h2>iDrink Nokia</h2>
        <ul>
          <li>Smakinterface</li>
          <li>Tungstyrd</li>
          <li>No more cool-aid</li>
        </ul>
      </section>
      <input type="radio" name="phone" value="100">
    </div>
  </div>
</div>

Answer 1

<div class="phone">
  <img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/iphone-8-concept-8-3-470x310@2x.jpg">
  <section>
    <h2>iPhone Z</h2>
    <ul>
      <li>Semitransparent telefon</li>
      <li>5G ready</li>
      <li>Handhållare</li>
    </ul>
  </section>
  <input type="radio" name="phone" value="200">
</div>

Would become:

<div class="phone">
  <img :src="imageSource">
  <section>
    <h2>{{phoneName}}</h2>
    <ul>
      <li v-for="line in description">{{line}}</li>
    </ul>
  </section>
  <input type="radio" name="phone" :value="phoneValue">
</div>

Then in your parent component you would pass those props like so:

<phone-template 
    v-for="phone in phoneList"
    :imageSource="phone.src"
    :phoneName="phone.name"
    :description="phone.description"
    :phoneValue="phone.value"
/>