애니메이션 앱을 만들자 - 1부

안녕하세요 여러분! 오늘 우리는 Jikan을 사용하여 vue 애니메이션 앱을 만들 것입니다.

깃허브 저장소: https://github.com/yagmurmutluer9/vue-anime-app
데모: https://vue-anime-app.netlify.app

내가 작성하거나 코딩하는 모든 것은 내 vue 여정을 학습하기 위한 것입니다. 그래서 배운 것을 씁니다. 새로운 것을 배우는 동안 이 앱을 개발하고 싶습니다. 즐기시기 바랍니다. =)

자식 구성 요소에 데이터를 전달하는 방법은 무엇입니까?

Component는 애플리케이션에서 사용하는 코드 조각입니다. 코드가 다른 위치에 나타나거나 우리가 작성하는 코드가 복잡해지면 구성 요소를 사용합니다.

응용 프로그램에서 Hello라는 구성 요소를 만들어 보겠습니다.

<template>

<p> Hello, {{ username }} </p>

</template>

<script>

export default {

props: ["username"]
}
</script>

App.vue에 Hello 컴포넌트를 추가해 봅시다.

<template>

<p> Hello, {{ username }} </p>
</template>

<script>

import Hello from './components/Hello.vue'
export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      username: "Yağmur"

    }
  },
</script>

상위 구성 요소에 데이터를 전달하는 방법은 무엇입니까?

Hello 구성 요소를 수정해 보겠습니다. input&button을 추가하여 사용자가 검색하고 제출할 때 기본 응용 프로그램에서 표시합니다.

v-model이라는 이름의 search로 입력을 전달하고 버튼을 클릭하면 Search 메소드가 상위 컴포넌트에 데이터를 전달합니다.

값을 전달할 때 해당 값에 태그 또는 여기에서 searchResult인 id를 제공합니다.

<template>

<p> Hello, {{ username }} </p>
<input type="text" placeholder="search something" v-model="search"> 
<button @click="Search"> submit </button>
</template>

<script>
export default {
    props: ["username"],
    data() {
        return{
            search: ''
        }
    },
    methods: {
        Search() { 
            this.$emit("search", this.search)

        }

    }

}
</script>

<template>
<Header/>
<Hello :username="username" @searchedResult="FetchedResult"/>
<p> {{ result }}</p>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      username: "Yağmur",
      result: ''

    }
  },
  methods: {
     FetchedResult(result) {
       this.result = result;
     }
  }
}
</script>

v-모델과 v-바인드의 차이점

V-model은 양방향 데이터 바인딩을 위한 것입니다. 입력을 변경할 때마다 데이터도 변경됩니다.

V-bind는 단방향 데이터 바인딩을 위한 것입니다. v-bind를 사용하여 원본 데이터를 변경할 수 없습니다.

둘의 차이점을 보여주는 예가 있습니다.

<div id="app">
  <input type="text" v-model="msg">
  <p>Data bound with v-model: {{ msg }}</p>
  <input type="text" v-bind="msg">
  <p> Data bound with v-bind {{msg}} </p>
</div>

new Vue({
  el: "#app",
  data: {
    msg: 'custom',
  },
})

2부에서는 v-for에 대해 설명하고 Firebase 인증으로 이동하겠습니다.

이 프로젝트에는 다음이 포함됩니다.

라우터

Firebase 인증/데이터베이스