Vue.js - Components

by wistcc

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
    <h2>Chicken Out</h2>
    <h4>Ingredients of authentic Los Pollos Hermanos chicken</h4>
    <ul>
      <list-component v-for="ingredient in ingredients" v-bind:text="ingredient">
      </list-component>
    </ul>
    <img src="https://i1.wp.com/files.hungryforever.com/wp-content/uploads/2016/04/01235948/Chicken3.jpg?fit=720%2C540" />
</div>

CSS

ul {
    position: absolute;
    color: lightgreen;
    font-size: x-large;
}

JavaScript

Vue.component('list-component', {
  props: ['text'],
  template: '<li>{{ text }}</li>'
});

var app = new Vue({
  el: '#app',
  data: {
    ingredients: [
    	'1 Chicken cut into pieces',
			'600 ml Buttermilk',
			'2 tbsp Salt',
			'1 tsp black pepper',
			'2 eggs',
			'1/4 cup Sriracha',
			'2 cups flour',
			'1 tbsp Salt',
			'1 tsp black pepper',
			'1/2 tsp cayenne pepper',
			'1 tso ground sage',
			'1/2 tsp smoked paprika',
			'1/2 tsp ground coriander',
			'2/2 tsp garlic powder',
			'Oil for deep frying',
    ],
  }
})