DEV Community

loading...
Cover image for Let's Create Anime App - Part 1

Let's Create Anime App - Part 1

yagmurmutluer9 profile image Yağmur ・2 min read

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

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',
  },
})
Enter fullscreen mode Exit fullscreen mode

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

This project will contain:

  • routers
  • firebase auth/database

Discussion (0)

pic
Editor guide