할머니의 콤퓨타 도전기

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

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>

  • 실행 화면

저작자표시

'Web Front-end > Vue.js' 카테고리의 다른 글

[Vue.js] 데이터 양방향 바인딩 (Data Two Way Binding - v-model)  (0) 2020.10.28
[Vue.js] 이벤트 (Events)  (0) 2020.10.27
[Vue.js] 데이터 바인딩 (Data Binding)  (0) 2020.10.27
[Vue.js] 뷰 데이터 (data) 와 메소드 (methods)  (0) 2020.10.27
Vue.js 기본  (0) 2020.10.26
'Web Front-end/Vue.js' Related Articles more
Comments