Vue_v-bind

App.vue

<template>
    <div>
        <!-- v-bind로 function 연결 -->
        <HelloWorld
            v-bind:username="x"
            v-bind:age="y"
        />
        
        <hr>
        <!-- v-bind로 function의 js와 연결 -->
        <!-- v-bind가 없으면 js에서 넘어온 function값을 인식하지 못함 -->
        <HelloWorld
            username="p.username"
            v-bind:age="p.age"
        />

        <hr>
        <!-- v-bind로 function의 js와 연결 -->
        <!-- v-bind로 attributeName=username과 연결 -->
        <HelloWorld
            v-bind:[attributeName]="p.username"
            v-bind:age="p.age"
        />
        <hr>
        <!-- 머스테치와 function의 연결 -->
        {{ x }}<br>
        {{ y }}<br>
        {{ p }} <br>
        {{ p.username }}<br> 
        {{ p.age }} 
           
    </div>
  </template>
  
  <script>
  import HelloWorld from './components/HelloWorld.vue'
  import { Person } from './components/Person';
  export default {
        components: {
            HelloWorld
        },
        // data: function(){
        // return {
        //     x:"홍길동", 
        //     y:"100",
        //     p: new Person("aaa", 20)
        //     }
        // }
        data: () => {       //람다식
            return {
                x:"홍길동", 
                y:"100",
                p: new Person("aaa", 20),
                attributeName: "username"
            }
        }
}
  </script>
  <style>
  </style>

 

람다식
data: () => [{] 함수 내부 [}]

v-bind를 사용하지 않으면 function의 변수임을 인식할 수 없다.