Vue_파싱

App.vue

<template>
    <div>
      <HelloWorld
          username="Hong"
          v-bind:age="20"
          my-address="seoul"
          v-bind:isMarried="false"
          v-bind:phones="[111, 1111, 2222]"
          v-bind:author="{
              name:'aaa',
              company:'google.com'
          }"
      />
  
    </div>
  </template>
  
  <script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
      components: {
          HelloWorld
      }
  }
  </script>
  
  <style>
  
  </style>

HelloWorld.vue

<template>
  <div> 
    {{ username }}<br>
    {{ age }}<br>
    {{ myAddress }}<br>
    {{ isMarried }}<br>
    {{ phones }}<br>
    {{ phones[0] }}<br>
    {{ phones[1] }}<br>
    {{ phones[2] }}<br>
    {{ author }}<br>
    {{ author.name }}<br>
    {{ author.company }}<br>

  </div>
</template>

<script>
export default {
    props: {
        username:String,
        age:Number,
        myAddress:String,
        isMarried:Boolean,
        phones:Array,
        author:Object,
    }

}
</script>

<style>

</style>