As a beginner programmer with experience in Java, I am now diving into learning JS with the Vue.js framework. I have some repetitive code representing five different divs for mobile phones and I want to replace them with a Vue component that can be customized with different data for each instance. This would help me grasp the concept of components in Vue.js better. Could someone provide an example of how to create a mobile phone component in Vue.js and pass parameters for each phone? It would greatly aid my understanding.
The current code displays div elements for five different mobile phones:
<div class="phone">
<img src="https://www.technobuffalo.com/wp-content/uploads/2017/02/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92fbe2fafdfcf7bfaabff1fdfcf1f7e2e6bfaabfa1bfa6a5a2eaa1a3a2d2a0eabcf8e2f5">[email protected]</a>">
<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>