Vue.js] Vue를 시작해보자

회사에서 내준 과제 백엔드 로직을 어느 정도 다 짜 놓고 웹상에서 구현된다고 하길래

 

원래 쓰던 JSP는 요새 잘 안쓴다고 하기도 하고, intelli J에서도 기본적인 지원을 하지 않아 다른 뷰를 찾기 시작했다.

 

 

인터넷에서 핫한 FE 프레임워크인 Vue.js를 찾다보니 생각보다 만만해서 시작하게 됐다.

 

일단 이전에 제이쿼리에서 사용하던 문법? 메서드 등 상당히 비슷한 점이 많았고, 

 

백엔드에 비해 FE는 결과 반영이 바로바로 눈에 보여서 되게 재밌는 거 같다.

 

잡소리 집어치우고 바로 시작해보자

---

Vscode를 켜고 느낌표 엔터를 쳐줘서 기본적인 html의 템플릿을 완성시킨다.

 

그다음 제이쿼리를 사용할 때처럼 cdn을 걸어준다.

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

이렇게 CDN을 걸어주면 간단한 프로 토타 입용 vue를 제작할 수 있는 환경이 마련된다.

 

기본적으로 vue는 json형태와 같이 컴포넌트들을 사용한다.

 

Vue를 사용하기 위해 인스턴스를 생성해보자

먼저 #app을 영역으로 지정해주고, 해당 영역에 Vue 컴포넌트들을 사용할 것이다.

 

그리고 body안에 아래와 같이 적어보자.

 <script>
            new Vue({
                el: '#app',
                data: {
                    variable: 'Component Makes Big One'
                }
            })
</script>

대충 위 사진과 같이 적어질 텐데, 대충 설명하면

 

new Vue로 인스턴스를 생성하고 안에 요소들을 넣는다.

일단 el:'#app'은 id가 app인 곳에 엘리먼트들이 동작함을 의미한다.

 

그리고 data는 key : value 형식으로 일종의 변수 선언이다.

 

저 데이터를 간단하게 렌더링 해보자

정말 데이터가 간단하게 로드되었다.

 

게다가 vue의 혁신적인 점은 HTML의 속성 값에도 저런 데이터를 손쉽게 바인딩할 수 있다.

 

input타입이 text인 곳에 데이터를 바인딩해보자

위 사진은 일부로 2개를 적어줬다.

다른 점은 v-bind:value="변수"

:value="변수"인데 

v-bind는 생략이 가능하고 :으로 대체할 수 있다.

실행 결과

 

 

일단 value에 데이터를 위 과정과 같이 바인딩할  수 있고, 이제 메서드를 알아보자

 

 

data:{}에 , 찍고 methods를 추가하자. 그렇다면 이와 같은 형태가 된다.

 <script>
        new Vue({
            el: '#app',
            data: {
                variable: 'Component Makes Big One이 인풋 텍스트에 바인딩됨',
                var2: 'v-bind는 생략이 가능하고 :으로 대체함',
                num: 0
            },
            methods: {
                plus() {
                    this.num++;
                }
            }
        })
    </script>

그다음 메서드를 바인딩할 버튼을 만들자.

 

{{num}} <br>
        <button @click="plus">증감</button>

methods 안에 plus()라는 메서드를 보면 this.num으로 data의 num에 접근이 가능하고 클릭 이벤트 바인딩은 

v-on:click

@click  

아까 변수 바인딩처럼 두 가지 버전으로 사용 가능하다.

그런 다음 실행하고 버튼을 클릭하게 되면 값이 즉각 바뀐다.

 

 

 

 

 

이상 간단한 이벤트와 바인딩에 대해 알아봤고 나머지는 추후에 업로드하기로 한다.