Vue.js(2)

Vue의 기본 형식

    const app = new Vue({
        el: '#root',
        data: {
            liked: false,
        },
        methods: {
            onClickButton() {
                this.liked = true;
            },
        },
    });

data에 접근하는 방법

1. {{}}로 그냥 나타낼때 html에서
2. div v-if="first" 처럼 태그안에 나타낼때
3. methods안에서 this.first라고 접근할때
   또한 {{}}안에다가 javascrpit식을 사용할수가있다

v-model

e.preventDefault를 넣는 이유는 싱글페이지를 사용하는 Vue.js의 새로고침을막기위해서사용

parseInt()는 Int로 형변환 만들어준다

vue.js에서는 ref라는것으로 이름을 지어준다. this.$refs.answer이렇게 적으면 부르는것이 가능하다. ref를 사용할때에는 직접 입력하는것은 하지않은다. 대부분은 data를 연동시켜서 만들어야하는것이다

Vue app 안에 el, data, methods는 항상 지켜져야하며, data 중심적으로 사고해야한다 또한 this는 data를 의마하므로 this.liked는 data의 값에 접근하기위한 방법이다

npm init를 사용하면 package.json을 만들어준다
package.json은 내가 남의 소스 즉 가져와서 사용하는 소스가 무엇인지
메모하기위하여서 사용하는데, npm init으로 package.json을 자동으로 만들어줄수있다.

npm vue
이 명령어를 이용하여 vue를 설치

npm i webpack webpack-cli -D
이것을 통해서 webpack을 설치한다 -D는 개발할때 이 webpack과 cli를 사용하겠다라는것
-D는 배포할때 사용하지 않겠다는 의미이다.

component부분이 .vue부분

webpack이 main.js, NumberBaseball.vue, NumberBaseball.html를 
dist/app.js로 하나로 합쳐주었다.