728x90
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>
'단순 코드 기록 > Vue' 카테고리의 다른 글
Vue_function_Basic (0) | 2024.03.06 |
---|---|
Vue_디폴트 (0) | 2024.03.06 |
Vue_kebab (0) | 2024.03.06 |
Vue_이미지 출력 (0) | 2024.03.06 |
Vue_기본문법 (0) | 2024.03.05 |