Vue_function_Basic

App.vue

<template>
    <div>
        <HelloWorld
          username="Hong"
          v-bind:age="20"
          my-address="seoul"
      />
      <hr>
      {{ x }}<br>
      {{ y }}<br>
      {{ z }}<br>
      {{ k }}<br>
      {{ k.aa }}<br>
      {{ k.bb }}<br>
      <hr>
      {{ p }}      
    </div>
  </template>
  
  <script>
  import HelloWorld from './components/HelloWorld.vue'
  import { Person } from './components/Person';
  export default {
        components: {
            HelloWorld
        },
    data: function(){
        return {
            x:"홍길동", 
            y:"100",
            z:[10, 20, 30],
            k:{aa:'hong', bb:30},
            p: new Person("aaa", 20)
        }
    }
}


  </script>
  
  <style>
  
  </style>

 

Person.js

 

export class Person{
  
    constructor(username, age){
        this.username = username;
        this.age = age;
    }

    getUsername(){
        return this.username;
    }

    getAge(){
        return this.age;
    }


}

 

HelloWorld.vue

 

<template>
  <div> 
    {{ username }}<br>
    {{ age }}<br>
    {{ myAddress }}<br>

  </div>
</template>

<script>
export default {
  props: {
        username:String,
        age:{
          type:Number,
          default:100
        },
        myAddress:{
          type:String,
          default:"경기"
        } 
    }
}
</script>

<style>

</style>