vue
vue는 동적인 데이터만 관리를 해주면 화면단을 자동으로 바꿔준다.
vue는 data 안의 오브젝트 형식에 데이터를 담아 바인딩하는 구조를 가지고 있다.
const app = new Vue();
app이란 이름으로 vue의 인스턴스를 생성한다.
생성 후에 vue 안의 기능들을 사용할 수 있다.
el
vue가 관여할 작업 영역이 어디인지 명시해주는 역할을 한다.
data
data 안에 object 형식으로 값을 담아 해당 컴포넌트에서 관리해야 할 변수들을 가지고 있다.
methods
methods는 해당 변수들에 관한 함수들이나 vue가 관리하는 영역의 함수들을 관리한다.
----------
el, data, methods는 고정 이름으로 변경이 불가함.
data 키 안의 liked는 변수명으로 원하는 네이밍 가능.
----------
v:if, v:else
vue에서의 if, else 문의 스코프, 즉 영향범위는 형제 태그이면서 인접해야 한다.
v-on:click="함수명" && v-on:click="함수명();" 둘 다 사용가능
(vue 안에서 JS 문법 사용가능)
vue는 data 안의 오브젝트 형식에 데이터를 담아 바인딩하는 구조를 가지고 있다.
위의 코드에서는 first와 second의 타입을 int형으로 선언했지만 데이터를 뷰단에 반환하게 되면
자동적으로 toString()을 사용한 것처럼 선언한 그대로 전달하게 된다.
vue에선 변수를 바인딩 받을 때 {{dataName}} 처럼 사용한다
(react 스테이트에선 {dataName} )
기존 JSP나 html에선 input 태그의 양방향 데이터 바인딩을 위해 value = "" 라는 속성을 사용했다.
하지만 vue에선 v-model = "" 을 사용해 양방향 바인딩 속성을 줄 수 있다.
vue에서 특정 태그에 대한 접근이 필요할 땐, ref="" 를 사용해 접근할 수 있다.
vue는 ref 에 설정된 이름으로 해당 태그를 관리할 수 있다.
(ref 남용은 안하는게 좋다.)
해당 작업 영역에서의 ref 관리 방법이다.
$refs.이름
----------
e.preventDefault();
a태그 작동 시 새로고침 막기나 form submit 제출로 인한 새로고침을 막는 용도로 사용
해당 submit 부분에 .prevent를 줘야한다고 GPT에서 말하지만 빼도 같은 동작을 함
'vue' 카테고리의 다른 글
| VUE.js vue3 기초 설치부터 기본 문법 (0) | 2024.08.27 |
|---|
