๐Ÿ“• Language/Vue

[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 14.์ปดํฌ๋„ŒํŠธ ํ†ต์‹  (์ƒํ•˜์œ„ ๊ฐ„)

a n u e 2022. 5. 2. 00:08
                      โ”Œ> ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ  โ”
์ด๋ฒคํŠธ ๋ฐœ์ƒโ””  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ <โ”˜ props ์ „๋‹ฌ

์ƒ์œ„์—์„œ ํ•˜์œ„๋กœ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋‚ด๋ ค์คŒ, ํ”„๋กญ์Šค ์†์„ฑ
 - ๋ฐ์ดํ„ฐ(Props ์†์„ฑ)๋Š” ๋Š˜ ์œ„์—์„œ ์•„๋ž˜๋กœ ๋‚ด๋ ค์˜จ๋‹ค
ํ•˜์œ„์—์„œ ์ƒ์œ„๋กœ๋Š” ์ด๋ฒคํŠธ(Event)๋ฅผ ์˜ฌ๋ ค์คŒ, ์ด๋ฒคํŠธ ๋ฐœ์ƒ

Props ์†์„ฑ

<app-header v-bind:ํ”„๋กญ์Šค ์†์„ฑ ์ด๋ฆ„="์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ ์ด๋ฆ„"></app-header>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--
            <app-header v-bind:ํ”„๋กญ์Šค ์†์„ฑ ์ด๋ฆ„="์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ ์ด๋ฆ„"></app-header>
        -->
        <app-header v-bind:propsdata="message"></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template : '<h1>Header</h1>' ,
            props : ['propsdata']
        }

        new Vue({
                el : '#app' ,
                components : {
                    'app-header' : appHeader
                },
                data : {
                    /**
                     ์ด data ์†์„ฑ์„ Root ์ปดํ† ๋„ŒํŠธ์—์„œ
                     app Header ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด
                     Props ์‚ฌ์šฉํ•œ๋‹ค.
                     */
                    message : 'hi'
                }
            })
    </script>
</body>
</html>

๊ฒฐ๊ณผ

 

์ตœ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์ธ Root์—๋งŒ ์žˆ์—ˆ๋˜ data message 'hi'

 

app-header ์ปดํฌ๋„ŒํŠธ์—๋„ 'hi'๊ฐ€ ์ƒ๊น€. data๋ฅผ ์œ„์—์„œ ์•„๋ž˜ ๋ฐฉํ–ฅ์œผ๋กœ ๋‚ด๋ ค์ค€ ๊ฒƒ

VS Code
shitf + alt = ์—ด ๋ณต์‚ฌ
ctrl + shitf + K = ์—ด ์‚ญ์ œ
alt + ๋ฐฉํ–ฅํ‚ค = ์—ด ์ด๋™

 

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vue-components

'๐Ÿ“• Language > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 15.props ์‹ค์Šต  (0) 2022.05.02
[Vue] vue.component์™€ export default๋ฐฉ์‹์˜ ์ฐจ์ด  (0) 2022.05.02
[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 13.์ปดํฌ๋„ŒํŠธ์™€ ์ธ์Šคํ„ด์Šค์™€์˜ ๊ด€๊ณ„  (0) 2022.05.01
[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 12.์ง€์—ญ ์ปดํฌ๋„ŒํŠธ  (0) 2022.05.01
[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 11. ์ปดํฌ๋„ŒํŠธ ์†Œ๊ฐœ/์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก ๋ฐ ์‹ค์Šต  (0) 2022.05.01

'๐Ÿ“• Language/Vue'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 14.์ปดํฌ๋„ŒํŠธ ํ†ต์‹  (์ƒํ•˜์œ„ ๊ฐ„)

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”