단순 코드 기록/Vue

Vue_이미지 출력

일일일코_장민기 2024. 3. 6. 09:51
728x90
App.vue
<template>
  <div>
    <BookList/>
  </div>
</template>

<script>
import BookList from './components/BookList.vue';

export default{                                     
  name: 'App',
  components: {
    BookList,
  }
}

</script>

<style>

h1{
  color: blue;
}

</style>
BookList.vue
<template>
  <div>
    <ul>
      <li>
        <img src="../assets/images/a.jpg">위험한 식탁<br>
      </li>
      <li>
        <img src="../assets/images/b.jpg">공부의 비결<br>
      </li>
      <li>
        <img src="../assets/images/c.jpg">오메르타<br>
      </li>
      <li>
        <img src="../assets/images/d.jpg">행복한 여행<br>
      </li>
      <li>
        <img src="../assets/images/e.jpg">해커스 토익<br>
      </li>
      <li>
        <img src="../assets/images/f.jpg">도로 안내서<br>
      </li>
    </ul>    
</div>
</template>

<script>
export default {
  name:"BookList"
}
</script>

<style>


</style>

'단순 코드 기록 > Vue' 카테고리의 다른 글

Vue_function_Basic  (0) 2024.03.06
Vue_디폴트  (0) 2024.03.06
Vue_파싱  (0) 2024.03.06
Vue_kebab  (0) 2024.03.06
Vue_기본문법  (0) 2024.03.05