[Vue.js] 사용 방법

Vue.js 사용하는 방법

 

1. https://v2.ko.vuejs.org/v2/guide 

시작하기 — Vue.js

Vue.js 페이지 진입

2. 위 사진의 위치에 있는 스크립트 복사

 

html 파일 사이에 작성하여 Vue.js를 사용할 수 있다.

 

Vue 를 사용할 범위를 지정자로 지정해줘야 사용 가능하다.

Vue 를 사용하려면 script 영역에 

new Vue({}) 선언해야 한다.

 

Vue.js에서 값을 다루는 data 를 사용하려면

{{ 이름 }} 대괄호 두개 사이에 값이름을 입력하면 된다.

위의 사진에선 Vue data 안에 fortune이 "동쪽으로 가면 귀인을 만나요" 이 작성 되었기 때문에

웹페이지에서도 로딩될때도 동일하게 나타난다.

 

myName 안에는 "홍길동" 으로 작성되어 있기때문에 

p요소안에 홍길동 이 출력된다.

 

 

 

 

v-on:click="" 을 사용해서 함수를 작성하고 

Vue 객체 안에다가 methods 추가하여 

clicked, clicked2 함수를 생성한다.

clicked는 fortune의 값을 "남쪽으로 가도 귀인을 만나요" 로 바꾸는 것이고

cilcked는 myName 의 값을 "Rubber" 으로 바꾸는 것이다.

 

누르기 클릭시 오늘의 운세 텍스트가 변경됨.

 

 

내이름 바꾸기 클릭 시 myName 값이 변경됨.