sethdavis512/simple-vue-w-components.html

## simple-vue-w-components.html
<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Vue</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>

        <div id="app">
            <section class="section">
                <my-card
                    v-for="(card, idx) in cardList"
                    :title="card.title"
                    :text="card.text"
                    key="idx">
                </my-card>
            </section>
        </div>

        <script type="text/x-template" id="firstTemplate">
            <div class="first-template">
                <h3 class="title is-3">
                    {{ title }}
                </h3>
                <p>
                    {{ text }}
                </p>
            </div>
        </script>

        <script>

            Vue.component('myCard', {
                props: ['title', 'text'],
                template: '#firstTemplate'
            })

            new Vue({
                el: '#app',
                data: {
                    cardList: [
                        {
                            title: 'Title 1',
                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magnam nulla delectus nobis aliquid quo commodi numquam quam, assumenda culpa suscipit qui necessitatibus laboriosam, veritatis magni corrupti minima aspernatur explicabo.'
                        },
                        {
                            title: 'Title 2',
                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magnam nulla delectus nobis aliquid quo commodi numquam quam, assumenda culpa suscipit qui necessitatibus laboriosam, veritatis magni corrupti minima aspernatur explicabo.'
                        }
                    ]
                }
            })

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Welcome to Vue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
	<script src="https://unpkg.com/vue"></script>
	</head>
	<body>

	<div id="app">
	<section class="section">
	<my-card
	v-for="(card, idx) in cardList"
	:title="card.title"
	:text="card.text"
	key="idx">
	</my-card>
	</section>
	</div>

	<script type="text/x-template" id="firstTemplate">
	<div class="first-template">
	<h3 class="title is-3">
	{{ title }}
	</h3>
	<p>
	{{ text }}
	</p>
	</div>
	</script>

	<script>

	Vue.component('myCard', {
	props: ['title', 'text'],
	template: '#firstTemplate'
	})

	new Vue({
	el: '#app',
	data: {
	cardList: [
	{
	title: 'Title 1',
	text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magnam nulla delectus nobis aliquid quo commodi numquam quam, assumenda culpa suscipit qui necessitatibus laboriosam, veritatis magni corrupti minima aspernatur explicabo.'
	},
	{
	title: 'Title 2',
	text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magnam nulla delectus nobis aliquid quo commodi numquam quam, assumenda culpa suscipit qui necessitatibus laboriosam, veritatis magni corrupti minima aspernatur explicabo.'
	}
	]
	}
	})

	</script>
	</body>
	</html>