vue #2 / 220125

aro9515·2022년 1월 25일
0

vue.js_part2

목록 보기
3/4

Join.vue

  1. setup 동작 (데이터생성)
    : 필요한 모든것을 준비함. 제일 먼저
  2. v-model 연결된 부분 동작 (연동)
  3. reactive는 object가 되어야함
    : const state = reactive({userid:'aaa'});
    3-1. High Level
    : 값만을 (Sting)만을 사용할때
    : 가볍게 쓸수있다. 깊이있는 컨트롤이 어렵다 ( 포커스이동 안됨 )
    3-2. string으로 만들어 넣으면 출력은 되는데 입력은 감지가 안됨
    : object가 아니면 변화감지를 못한다.
  4. ref는 오브젝트 X
    4-1. Low Level
    : const userid = ref('www') => 'www'의 값은 의미가 없어짐
    = const userid = (object HTMLInputElement)
    = const userid = (<input type="text" ref="userid" v-model="state.userid" />)
  5. focus 사용 할때
    5-1. ref 걸어준다
    : <input type="text" ref="userid" v-model="state.userid" />
    = v-model이 걸린 state.userid의 값은 일단 의미를 잃는다.
    5-2. setup에 ref를 정의한다
    : const userid = ref('www')
    = ref의 값인 'www'도 의미를 잃는다.
    5-3. focus() 사용
    : userid.value.focus();
    = ref가 걸린 태그(<input type="text" ref="userid" v-model="state.userid" />)의 value 부분에 focus를 준다.

Board.vue

+ BoardContent.vue

  1. 번호 클릭시 이동
    1-1. 클릭이벤트 생성
    : <td @click="handleBoardContent(tmp.no)">{{tmp.no}}</td>
    1-2. Router import
    : import { useRouter } from 'vue-router';
    : const router = useRouter();
    1-3. 클릭이벤트 메소드
    : name:"BoardContent" 라는 페이지로 이동하는데
    : query:{no:no} query는 저런 모양으로 던짐
 const handleBoardContent = (no) => {
            console.log(no);
            // 127.0.0.1:3000/boardcontent?no=2
            router.push({name:"BoardContent", query:{no:no}});
        }

BoardContent.vue

  1. query를 받기위한 route 설정
    : router 아님 route
    1-1. import { useRoute } from 'vue-router';
    1-2. const route = useRoute();
  2. query 받기
const state = reactive({
            no : route.query.no
        })
  1. http://localhost:8080/#/boardcontent?no=2
    : 이런 형태의 주소로 페이지가 넘어감
profile
The best

0개의 댓글