Vue-js 기본적인 사용법-1
Front-End/Vue-js 2020. 4. 27. 14:00Vue-js 기본적인 사용법
1. JavaScript에서 new를 사용해 Vue라는 생성자를 만들고, data나 methods등을 정의한다.
2. jsp쪽에서 JavaScript단에서 정의한 컴포넌트를 가져와서 사용한다.
ㄴ 2-1. if문은 v-if, else문은 v-else, v-model은 data의 키값으로 values를 가져와서 출력할 수 있음,
ㄴ 2-2. data에서 정의한 키에 해당하는 값을 가져올 때에는 {{msg}} 같이 키값에 중괄호를 두번쳐서 가져올 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <html> <head> <title>Vuejs</title> </head> <body> <!-- 태그 값 id는 한곳에서만 사용가능하고, class는 여러곳에 사용이 가능하다.--> <!-- 데이터 바인딩이 쉽고, 데이터가 변경되었을때 바로 알 수 있다. --> <!--버튼을 클릭하면 Hide와 Show로 번갈아가면서 변경되면서 문자가 출력되고, 사라지는것을 반복한다. --> <div id="vue-app"> <div> <input type = "text" v-model = "msg"> <!-- 버튼을 클릭하면 Vue 인스턴스의 button_handler 메소드로 매핑이 되어서, msg_active값이 true면 false로, false면 true로 변경되게 된다. --> <button @click="button_handler"> <span v-if = "msg_active">Hide</span> <span v-else>Show</span> </button> </div> <div v-if="msg_active"> <!-- 중괄호 안에 다시 중괄호를 쓰고, 아래 생성자에 있는 데이터의 키값을 쓰면 그 안에 있는 값이 담겨서 나온다. --> {{msg}} </div> </div> <!-- cndjs홈페이지에서 vuejs를 연결시킴 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script> <script> //vue라는 생성자를 만들고 어느영역에 있는 컴포넌트를 사용할 것인지를 정한다. new Vue({ 'el' : '#vue-app', 'data' : { 'msg' : 'vue.js', 'msg_active' : true }, methods:{ button_handler: function(){ //바인딩을 할때 this를 앞에 써주어야 매핑된다. this.msg_active=!this.msg_active; } } }); </script> </body> </html> | cs |
실행결과 (Hide & Show)
출처
'Front-End > Vue-js' 카테고리의 다른 글
| Vue-js로 list 사용해보기 (0) | 2020.03.27 |
|---|---|
| Vue-js 기본 (0) | 2020.03.27 |