Simple Vue!

Simple Vue!

nodejs를 설치해서 npm을 사용할 수 있게 되었으면

터미널에 npm install -g vue-cli 를 입력하여 vue-cli를 global로 설치

터미널에서 뷰 프로젝트를 설치하고 싶은 곳으로 이동 후

vue init simple firstVue 기본 뷰파일 생성

아래와 같이 나오면 성공

<script>
    var app = new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
        docsURL: 'http://vuejs.org/guide/',
        discordURL: 'https://chat.vuejs.org',
        forumURL: 'http://forum.vuejs.org/'
      },
      methods: {
        humanizeURL: function (url) {
          return url
            .replace(/^https?:\/\//, '')
            .replace(/\/$/, '')
        }
      }
    })
  </script>

위의 코드가 뷰의 가장 심플한 형태이다.

el은 vue가 적용될 element를 가리키며 data와 methods의 구조는 vue에 정의된 형태이며 data를 다른명칭으로 변경하면 오류가 발생한다.

html 네에서 data를 사용할 경우 {{ greeting }} 와 같이 사용하게 되는데 

data.greeting와 같이 사용하지 않는 것으로 보아 vue의 기본 구조라는 것을 알 수 있다.

아래는 크롬 개발자 도구에서 app.greeting의 텍스트를 변경하여 화면에 동적으로 바인딩이 되는 것을 테스트해본 것이다.

특이한 것은 위에서는 app.data.greeting으로 코드가 짜져있지만 실제 데이터 모델은 app.greeting으로 구성되어 있다는 것이다.

simple vue 끝!!