ksy90101/VueEx1.html

## VueEx1.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter06 - Ex2</title>
    <!-- Vue.js 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- Component를 안 쓴 v-for -->
    <div id="app">
        <div v-for="post in posts" :key="post.idx"> <!-- v-for 사용, key값 설정-->
            <h3>{{  post.title  }}</h3>
            <p>{{  post.description  }}</p>
        </div>
    </div>
    <script>
        let vm = new Vue({ // Vue 생성
            el: "#app",
            data: {
                posts: [ // posts라는 배열 생성
            {
                idx: 1,
                title: "Blog Post 1",
                description: "Lorem Inpum 1"
            },
            {
                idx: 2,
                title: "Blog Post 2",
                description: "Lorem Inpum 2"
            },
            {
                idx: 3,
                title: "Blog Post 3",
                description: "Lorem Inpum 3"
            }
            ]
        }
    });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter06 - Ex2</title>
	<!-- Vue.js 추가 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
	<!-- Component를 안 쓴 v-for -->
	<div id="app">
	<div v-for="post in posts" :key="post.idx"> <!-- v-for 사용, key값 설정-->
	<h3>{{ post.title }}</h3>
	<p>{{ post.description }}</p>
	</div>
	</div>
	<script>
	let vm = new Vue({ // Vue 생성
	el: "#app",
	data: {
	posts: [ // posts라는 배열 생성
	{
	idx: 1,
	title: "Blog Post 1",
	description: "Lorem Inpum 1"
	},
	{
	idx: 2,
	title: "Blog Post 2",
	description: "Lorem Inpum 2"
	},
	{
	idx: 3,
	title: "Blog Post 3",
	description: "Lorem Inpum 3"
	}
	]
	}
	});
	</script>
	</body>
	</html>