Vue.js 中的组件

Question

我是一名具有一定 Java 经验的 bigenner 程序员。现在我正在尝试使用 Vue.js 框架来学习 JS。我得到了这些重复的代码，我想用一个 Vue 组件替换它们，每个实例都有不同的数据。 该代码代表移动电话的五个不同 div。我需要创建一个手机组件并为每个手机传递一些参数。你能举例说明如何做到这一点吗？理解 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>

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>

会变成：

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

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

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