Vue-js 기본
Front-End/Vue-js 2020. 3. 27. 11:15Vue js는 new Vue로 인스턴스를 만들어 사용하고,
외부에서 사용할 데이터는 데이터메소드에 정의해서 사용,
사용자 입력값을 받는 태그에는 v-model이라는 attribute를 사용해서 Vue 인스턴스의 데이터와 연결해서 사용할 수 있습니다.
Vue 인스턴스의 데이터를 출력할때는 중괄호 두개를 사용해서 데이터를 출력하면 됩니다.
ex) {{userId}}, {{userPassword}}
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 | <!DOCTYPE html> <html lang = "ko"> <head...> <title>Insert title here</title> <body> <div id="app"> <!-- vuejs에서 제공하는 v-model이라는 attribute로 변수명을 지정해주면 자동으로 input 태그의 v-model값과 input태그의 값이 동기화 됩니다.--> //태그에 v-model을 사용해서 Vue 인스턴스의 data()와 연결해서 사용 <input type = "text" id = "user_id" v-model="userId" onchange="userIdChanged(this)"> <input type = "password" id = "user_password" v-model="userPassword"> <button type = "button">login</button> <br /> //Vue 인스턴스의 데이터를 출력할때는 중괄호 두개를 사용해서 데이터를 출력하면 됨. id : <span id="user_id_text">{{userId}}</span> <br /> password : {{userPassword}} </div> //Vue 라이브러리 사용 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //Vue 인스턴스를 생성 new Vue({ el: '#app', data() { return { userId:'', userPassword:'' } } }) //var과 let의 다른점은 let은 변수의 재선언이 불가하고, 재할당은 가능하다. //function에서 아이디와 비밀번호를 받아서 출력하는 대신 위쪽에 있는 Vue에서 data()로 값을 받아서 출력할 수도 있다. function userIdChanged(obj){ document.getElementById('user_id_text').innerText = obj.value; } </script> </body> </html> | cs |
출처
https://www.youtube.com/watch?v=kYo6FXCVjAI&list=PLwawSyI26pfuGsEzp7AzP_TJVhSdwFuwh&index=2
'Front-End > Vue-js' 카테고리의 다른 글
| Vue-js 기본적인 사용법-1 (0) | 2020.04.27 |
|---|---|
| Vue-js로 list 사용해보기 (0) | 2020.03.27 |