Vue로 영화검색사이트 예제만들기

Inseok Park·2022년 5월 16일
0
post-thumbnail

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script type="module" defer src="./main.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="title" v-on:keydown.enter="searchMovies(true)"/>
    <button v-on:click="searchMovies(true)">Search!</button>
    <ul>
      <li v-for="movie in movies">
        <img v-bind:src="movie.Poster" alt="" height="40">
        {{ movie.Title }}
      </li>
    </ul>
    <button v-if="movies.length" v-on:click="searchMovies()">More..</button>
  </div>
</body>
</html>

js (main.js)

// 컴포넌트
const App = {
  // 반응형 데이터 || 반응성을 가진 데이터
  data() {
    return {
      title:'',
      page: 1,
      movies: []
    }
  },
  methods: {
    async searchMovies(isFirst) {
      if (isFirst) {
        this.movies = []
        this.page = 1
      }
      let res = await fetch(`https://www.omdbapi.com/?apikey=제공키&s=${this.title}&page=${this.page}`)
      res = await res.json()
      console.log(res);
      const {Search, totalResults} = res // 구조분해할당
      this.movies.push(...Search)
      this.page +=1
    }
  }
}
Vue.createApp(App).mount('#app')

0개의 댓글