[Vue3] 1.0

1.0 Vue 3.0

Vue 프로젝트:

1. vue CLI 를 설치해야한다 / npm i -g @vue/cli
2. (npx) vue create "프로젝트 폴더"
3. 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) // B
    };
    return {
      A,
      aToB,
    }
  }

ref 와 reactive

• 일반 변수를 함수를 이용해서 데이터 변화를 주어도
• 화면(view)상에서는 출력상 변화가 없음
  ( 데이터는 바뀜 log 확인 가능
• Vue.js 에서는 ref기능을 통해 데이터의 변화를 화면에서도 출력 시켜줄 수 있음.
• import { ref } from 'vue'

export default{
  setup(){
    // let A = 'A';
    let A = ref('A');
    // 출력시킬 데이터를 ref로 감싸준다.
    const aToB= () => {
      A = 'B'
      console.log(A) // B
    };
    return {
      A,
      aToB,
    }
  }

• 이때 , ref안의 데이터를 변경시에는 .value 를 붙여줘야함
• import { ref } from 'vue'

// export default{
//  setup(){
//    let A = ref('A');
//    const aToB= () => {
      A.value = 'B'
//      console.log(A) // B
//    };
//    return {
//      A,
//     aToB,
//    }
//  }

• 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는 태그의 속성도 변화가능 하다 ⬆️