๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/Vue

Component

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2022. 6. 5.
๋ฐ˜์‘ํ˜•

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

<!DOCTYPE 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/dist/vue.js"></script>
  <script>
    Vue.component('my-component', {
      template: '<div>์ „์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค!</div>'
    })

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

 

 

 

 

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

<!DOCTYPE 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/dist/vue.js"></script>
  <script>
    var cmp = {
      template: '<div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค!</div>'
    }

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

 

 

์ฆ‰,

<div id="app">
  <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
  <my-local-component></my-local-component>
</div>

=

<div id="app">
  <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
  <div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค!</div>
</div>

๋‘˜์ด ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

'JavaScript > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ปดํฌ๋„ŒํŠธ ๊ฐ„ ํ†ต์‹ ๊ณผ ์œ ํšจ ๋ฒ”์œ„  (0) 2022.06.05
์ธ์Šคํ„ด์Šค ์œ ํšจ ๋ฒ”์œ„์™€ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ, ์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๊ด€๊ณ„  (0) 2022.06.05
Vue Instance Lifecycle  (0) 2022.06.05
vue ๊ณต๋ถ€  (0) 2022.05.15
[Vue.js] <style scoped>  (0) 2022.01.04

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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