Web Front-end/Vue.js

[Vue.js] 뷰 인스턴스(instance) 생성하기

ji.o.n.e 2020. 10. 27. 16:25

  • el 옵션

    • Vue가 실행될 HTML의 DOM 요소를 지정 (# --> id 지정, . --> 클래스 지정)

  • data 옵션

    • data Vue가 바라보는 data 객체를 지정 (직접 객체를 작성해도 되고 미리 선언된 객체변수를 작성해도 됨)

  • 코드 구현

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id = "app">
        {{name}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                name:'jione'
            }
        })
    </script>
  </body>
  </html>

  • 실행 화면

저작자표시 (새창열림)