๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’ปWEB FrontEnd/ํ”„๋ ˆ์ž„์›Œํฌ Vue

Vue Componets

์กฐ์ฝ”๋งˆ 2020. 7. 2. 15:17

<Do it! Vue.js ์ž…๋ฌธ>์„ ๊ธฐ๋ณธ์œผ๋กœ ๋ฐฐ์šด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.

 

๋ชฉ์ฐจ

  • 1) Vue Componets
  • 2) ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก

 

Vue Componets

1) Vue Componets

  • ํ™”๋ฉด์˜ ์š”์†Œ๋“ค(๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ”, ํ…Œ์ด๋ธ”, ๋ฆฌ์ŠคํŠธ, input ๋ฐ•์Šค ๋“ฑ)์„ ์ž˜๊ฒŒ ์ชผ๊ฐœ์–ด ์ปดํฌ๋„ŒํŠธ๋กœ ๊ด€๋ฆฌํ•œ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ™”๋ฉด์„ ๋น ๋ฅด๊ฒŒ ๊ตฌ์กฐํ™”ํ•˜์—ฌ ์ผ๊ด„์ ์ธ ํŒจํ„ด์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ๊ด€๊ณ„(treeํ˜•ํƒœ)๋Š” ๋ทฐ์—์„œ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๋ฉฐ, ์›น ํŽ˜์ด์ง€ ํ™”๋ฉด์„ ์„ค๊ณ„ํ•  ๋•Œ๋„ ์ด์™€ ๊ฐ™์€ ๊ณจ๊ฒฉ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์„ค๊ณ„๋ฅผ ํ•ด์•ผ ํ•œ๋‹ค. 

 

 

2) ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก

  • ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์€ template์†์„ฑ์—์„œ ์‚ฌ์šฉํ•  HTML ์‚ฌ์šฉ์ž ์ •์˜ ํƒœ๊ทธ ์ด๋ฆ„์„ ์ž‘์„ฑํ•œ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ์—๋Š” ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ๊ฐ€ ์‹ค์ œ ํ™”๋ฉด์˜ HTML ์š”์†Œ๋กœ ๋ณ€ํ™˜๋  ๋•Œ ํ‘œ์‹œ๋  ์†์„ฑ๋“ค์„ ์ž‘์„ฑํ•˜๊ณ , ์ธ์Šคํ„ด์Šค ์˜ต์…˜ ์†์„ฑ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

- ์ „์—ญ ์ปดํฌ๋„ŒํŠธ

  • ์—ฌ๋Ÿฌ ์ธ์Šคํ„ด์Šค์—์„œ ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ๋•Œ๋งˆ๋‹ค ์ธ์Šคํ„ด์Šค์— components์†์„ฑ์œผ๋กœ ๋“ฑ๋กํ•  ํ•„์š”์—†์ด ํ•œ ๋ฒˆ ๋“ฑ๋กํ•˜๋ฉด ๋ชจ๋“  ์ธ์Šคํ„ด์Šค์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.
Vue.component('์ปดํฌ๋„ŒํŠธ์ด๋ฆ„', {
    //์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
});
<html>
  <head>
    <title>Vue Component Registration</title>
  </head>
  <body>
    <div id="app">
      <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
      <my-component></my-component>  //์ „์—ญ ์ปดํฌ๋„ŒํŠธ ํ‘œ์‹œ
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      //์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก
      Vue.component('my-component', {
        template: '<div>์ „์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค!</div>'
      });

      new Vue({
        el: '#app'
      });
    </script>
  </body>
</html>

 

- ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ

  • ํŠน์ • ์ธ์Šคํ„ด์Šค์—์„œ๋งŒ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๊ฐ–๋Š”๋‹ค.
  • ์ƒˆ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ๋•Œ๋งˆ๋‹ค ๋“ฑ๋กํ•ด ์ค˜์•ผ ํ•œ๋‹ค.
new Vue({
    components: {
        '์ปดํฌ๋„ŒํŠธ์ด๋ฆ„': ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
    }
});
<html>
  <head>
    <title>Vue Component Registration</title>
  </head>
  <body>
    <div id="app">
      <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
      <my-local-component></my-local-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      var cmp = {
        // ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
        template: '<div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค!</div>'
      };

      new Vue({
        el: '#app',
        components: {
          'my-local-component': cmp
        }
      });
    </script>
  </body>
</html>

 

 

 

 

 

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'๐Ÿ’ปWEB FrontEnd > ํ”„๋ ˆ์ž„์›Œํฌ Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Vue Router  (0) 2020.07.02
Vue Componets ํ†ต์‹   (0) 2020.07.02
Vue Instance  (0) 2020.07.01
Vue ์‹œ์ž‘ํ•˜๊ธฐ (+๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ค์ •)  (0) 2020.06.30
Vue.js๋ž€?  (0) 2020.06.30

'๐Ÿ’ปWEB FrontEnd/ํ”„๋ ˆ์ž„์›Œํฌ Vue' Related Articles

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