Vue js 데이터바인딩과 views vs components (2)
Vue js 데이터바인딩과 views vs components (2) — #vuejs데이터바인딩 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않는다고 뒤돌...
#vuejs데이터바인딩
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
views vs components
이전글을 통해서 만든 project파일로 들어가면 views와 components 파일을 볼 수 있다.
둘다 .vue파일이 들어가 화면을 구성하는 역할을 하는데 두개의 차이는 무엇일까?
정해진 정답은 없으나 파일의 역할이 구분된다.
views
- views에 들어가는 모든파일명은 name(사용자설정)View.vue 형태로 파일명을 지정해야한다. ex)DatabindingStringView.vue , helloView.vue
- router와 연결시킬 페이지를 구성할때 사용한다.
components
- 그 외는 모두 components에 넣는다.
- 주로 전체? 페이지에 해당하는 내용
html, javascript, css 파일을 한번에 관리하는 Vue js
| <template> <div> <h1> Hello</h1> </div></template><script>export default { }</script><style></style> |
|---|
html, javascript, css 관리
vue 파일을 살펴보자. vue js는 html js css를 한페이지에 편하게 관리 할 수 있다.
- template태그는 html코드를 작성하는 곳
- script태그는 js코드를 작성하는 곳
- style태그는 css코드를 작성하는 곳
html과 매우 비슷한 형태로 관리가 가능하여 개발할때 친숙함을 제공한다.
Vue js 데이터 바인딩
데이터 바인딩이란?(Data-Binding)
데이터 바인딩은 웹 화면(UI)에 표시하고자 하는 데이터(값)를 실제 데이터와 연결해주는 프로세스이다.
Vue js에서 데이터바인딩
vue js에서는 <script>안에 data객체를 만든 후 <template>안의 html파일로 바로 연결이 가능하다. 보통 이런 경우를 단방향 데이터 바인딩이라고 하는데, Vue는 양방향으로 데이터바인딩이 가능하다.
말로만 보면 어려우니 아래 코드를 보자.
데이터 바인딩 이해 - String(문자)
| <template> <div> <h1> {{ userName }}</h1> </div></template><script>export default { data() { return{ userName: "jword" } }}</script><style></style> |
|---|
script안에 data를 만들때 사용하는 코드이다. return안에 객체형태로 key:value로 데이터를 저장해둘 수 있다. script안에 저장된 데이터를 template(html)에서 바로 사용이 가능하다.
데이터 형태가 문자라 문자 형태로 데이터를 바인딩할때는 {{ 데이터(키값) }}을 사용한다. 아래 처럼 페이지에 변수가 바로 찍히는 것을 볼 수 있다.
