1.0
Vue 3.0
Vue 프로젝트:
- vue CLI 를 설치해야한다 / npm i -g @vue/cli
- (npx) vue create "프로젝트 폴더"
- Vue3 Default 선택
Fragment
- vue2 ➜ vue 3 넘어오면서 Fragment 태그가 필요 없어짐 ( 쓸모없는 div태그로 감싸주지 않아도 됨)
Vue 상에서 변수 사용
- setup() 안에다가 데이터를 작성한다.
- 변수 사용시에는 setup return 에 변수를 호출해준다.
Vue 상에서 함수 사용
- setup() 안에다가 함수를 작성하면된다.
- 데이터와 마찬가지로 함수를 반환해준다. ( 호출 X )
export default{
setup(){
const 사용할함수 = () => {
return "[]";
};
return {
사용할함수,
}
}
export default{
setup(){
const 사용할변수 = 'name';
const 사용할함수 = (name) => {
return name;
};
return {
사용할함수,
사용할변수,
}
}
- 파라미터는 template 태그 내에서 함수안에 작성해주면 됨.
이벤트
- 프론트단에서는 이벤트를 많이 다룸. esp) 버튼 연결
- Vue에서 이벤트 연결은 v-on:click='' 을 사용함
- 이때 v-on은 생략 가능
@click="함수"
<button
v-on:click="사용할함수"
Click me
</button>
<button
:click="사용할함수"
Click me
</button>
- 이때 함수를 이용해서 setup내의 변수 데이터 변화시 출력이 안됨 바뀌질 않음.
- vue 상에서 화면상 출력은 ref를 이용해야함.
(함수로 데이터 변경시 정상적으로 바뀜 )
export default{
setup(){
let A = 'A';
const aToB= () => {
A = 'B'
console.log(A)
};
return {
A,
aToB,
}
}
ref 와 reactive
- 일반 변수를 함수를 이용해서 데이터 변화를 주어도
- 화면(view)상에서는 출력상 변화가 없음
( 데이터는 바뀜 log 확인 가능
- Vue.js 에서는 ref기능을 통해 데이터의 변화를 화면에서도 출력 시켜줄 수 있음.
import { ref } from 'vue'
export default{
setup(){
let A = ref('A');
const aToB= () => {
A = 'B'
console.log(A)
};
return {
A,
aToB,
}
}
- 이때 , ref안의 데이터를 변경시에는 .value 를 붙여줘야함
import { ref } from 'vue'
A.value = 'B'
- reactive 하다고 함 ( 데이터의 변화가 template에서도 동일하게 작동)
- ref 안에서는 배열,객체,문자열,숫자 다 가능하다.
- ref값 변경시에는 변경시 .value를 붙여줘야 한다.
- 배열과 객체는 reactive 를 이용하면 .value를 안붙여도 됨.
import { reactive } from 'vue'
const A = reactive({ id : 1 });
A.id = 2
i.e) ref를 쓸 땐 .value // 객체나 배열은 reactive 사용 가능 사용시 value 노 필요.
데이터 바인딩
- 뷰에서 데이터와 태그의 value를 연결 시키는 작업(데이터 바인딩) 은
- v-bind="변수명" 을 사용하면 된다.
- v-bind는 생략가능
:type="type" :value="name"
- v-bind는 태그의 속성도 변화가능 하다 ⬆️