[Vue.js] 기초 개념 정리 - data(), Data 처리

🗂 목차

[Vue.js] 기초 개념 정리 - 기본 환경 구성

[Vue.js] 기초 개념 정리 - Vue Router

[Vue.js] 기초 개념 정리 - Vue LifeCycle Hook

[Vue.js] 기초 개념 정리 - data(), Data 처리

[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문

 

 

 

🐱 Git Hub 주소 : https://github.com/junyharang-FrontEnd-coding-study/vue.js-study

📖 참고 자료 : https://www.youtube.com/watch?v=sqH0u8wN4Rs

 

 

 

🚀 data() 함수란?

Vue.js에서 가장 중요한 부분은 Data를 Handling하고, Data를 Bindding하고, Data를 Get하는 것이에요.
이걸 할 수 있게 해주는 것이 바로 data() 함수랍니다!

 

data()

 

먼저 data라는 함수를 정의하고, return문에 내용을 적어 주는 것이에요.

Home.vue

 

위와 같이 return문에 객체 Key와 Value를 입력 해주고, html code 부분에 해당 Data가 출력 되었으면 하는 곳에 {{}} 이렇게 중괄호를 두 개를 포갠 뒤 객체 Key 이름을 적어주면 되는 것이에요.

 

위와 같이 입력을 하게 되면 웹 페이지 내에 `Welcom to JunyHarang 주니하랑의 Vue.js 공부`가 출력이 되고,
{{title2}} 라고 하게 되면 `Welcom to JunyHarang 나만의 웹 사이트 만들기!가 출력이 되는 것이에요.

위의 방식은 Text 방식으로 Data를 Bindding한 방식이고, 이용자가 입력하는 Data를 받아오는 방법은 아래와 같은 것이에요.

<input type="text" value="abc" />

먼저 위와 같이 html Code를 짜게 되면 input Box에 `abc`라는 문자가 보이게 될 것이에요.
Vue.js에서는 value 대신 아래와 같이 사용하는 것이에요.

<input type="text" v-model="" />

 

 

위와 같이 하게 되면 input Box에 `주니하랑`이 보이게 되는 것이에요.

이 방식은 One-way 방식이 아니고, Two-way 방식인데, One-way Bindding 방식은 단방향으로 Data를 넣어주면 끝나는 것이고, Two-way Bindding는 Data를 넣어주고 끝나는 것이 아니고, 이용자가 Data를 넣게 되면 data() 안에 inpu1에 해당 Data Value가 입력되는 방식인 것이에요.

 

위의 사진과 같이 button Tag를 만든 것이에요. 아 참! htm에서 button의 Event 이름은 onclick이지만, Vue.js에서는 @click이라고 해줘야 하는 것이에요.

Vue.js는 모든 함수를 methods: {} 안에 정의해야 하는 것이에요. 그래서 getData() 라는 함수를 methods에다가 넣었고, 경고창을 띄우게 하는데, data() 안에 있는 input1 (this.input1)의 값을 가져오게 한 것이에요.

 

 

input Box에 입력 Data를 경고창에서 그대로 가져오는 것을 확인할 수 있는 것이에요.

 

 

이번에는 setData라는 함수를 만들고, 그것을 처리할 수 있는 button을 만들어 준 것이에요.
위와 같이 set Button을 클릭하게 되면 input1에 값을 12345로 바꿔줄 수 있는 것이에요.

 

반응형

 

바로 이 상태에서 `set` Button을 클릭하게 되면 아래와 같이 변하는 것을 확인 할 수 있어요!