Javascript Vue.js中的组件

我是一个有Java经验的bigenner程序员。现在我正在尝试使用Vue.JS框架学习JS。我得到了这段repetead代码，我想用一个Vue组件替换它们，每个实例都有不同的数据。 该代码表示移动电话的五个不同分区。我需要创建一个手机组件，并为每部手机传递一些参数。你能举个例子说明怎么做吗？理解Vue.js中组件的概念将非常有帮助。 提前谢谢

守则：

        <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>

iphonez

半透明电传机
5G就绪
汉德拉雷

iphoneg

臂章
斯卡姆项目
虚拟触摸

迷你iPhone

逆向设计
人脸识别
汉德拉雷

三星磨损

看起来很酷
感到热
Arm处理器

iDrink诺基亚

Smakin接口
钨酸盐
不再有冷静的援助

iphonez

半透明电传机
5G就绪
汉德拉雷

将成为：

<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>

{{phoneName}}

{{line}

然后在您的父组件中，您将像这样传递这些道具：

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

以及在数据属性中传递这些参数值的位置。我建议您阅读Vue教程之一

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