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

[Vue.js] ์„ ์–ธ ์ˆœ์„œ

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 10. 25.
๋ฐ˜์‘ํ˜•

index.js

Vue.component('todo-item', {
  template: '<li>ํ• ์ผ ํ•ญ๋ชฉ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.</li>'
})

var app = new Vue({  // ์œ„์— Vue.component๋ž‘ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ํ™”๋ฉด์— ์ถœ๋ ฅ์ด ์•ˆ๋œ๋‹ค!
  el: '#app'
})

 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <todo-item></todo-item>
            <todo-item></todo-item>
        </ol>
    </div>
    
    <script src="index.js"></script>
</body>
</html>

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€