Let's Create Anime App - Part 1

#vue #api #webdev

Hi everyone! Today we'll create an vue anime app using Jikan

github repo: https://github.com/yagmurmutluer9/vue-anime-app
demo: https://vue-anime-app.netlify.app

Everything i write or code is for the learning of my vue journey. So I write what I learn. I want to develop this app while I'm learning new stuff. I hope you enjoy. =)

How to pass data to a child component?

Component is a piece of code that we use in our application. If the code will appear at different places or the code that we write getting complicated then we use components.

Let's create an component called Hello in our application.

<template>

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

</template>

<script>

export default {

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

Let's add Hello component into App.vue.

<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>

How to pass data to a parent component?

Let's modify our Hello component. We add input&button so when user search and submit it we display it from our main application.

We pass input with v-model named search and when button clicked Search method pass data to parent component.

When we passing a value we giving that value a tag or an id which is searchedResult in here.

<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>

Differences between v-model and v-bind

V-model is for two-way data binding. Whenever we chage input then our data will change too.

V-bind is for one-way data binding. We can't change original data using v-bind.

There's an example shows difference between two.

<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',
  },
})

In part two I'll explain v-for then we'll move to firebase auth.

This project will contain: