학원/VueJS

23_VueJS

행수쌤 2023. 4. 16. 16:08
728x90
반응형

준비(CDN import)

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue@3.2.36"></script>

v-model

      - 양방향 연결( <-> 단방향 연결 {{text}})

      - 입력창(input, select, textarea)에서만 가능

v-model.number="width"

v-bind

      - v-bind:html속성="상황"

<button v-bind:disabled="!agree">다음 단계로 이동</button>
<div class="row bar" v-bind:style="{'width':percent+'%'}"></div>
<span style="color: red" v-bind:hidden="len<100">100글자 이내로 작성하세요</span>
<input v-bind:type="isCheck? 'text':'password'"/>

//클래스 추가
v-bind:class="{이름:상황}"
v-bind:class="{'is-invalid':!data.isId}":class="{'is-valid':data.isId}"

//클래스 동적부여
pocketmonClass:{
  no:{
    "is-valid":false,
    "is-invalid":false,
  },
<input :class="pocketmonClass.no"/>

v-show

      - display를 none으로 조작함

v-if / v-else

      - 조건에 맞으면 태그를 새로 만들어버림

v-for

      - 데이터가 배열일 경우 반복하여 태그 생성 가능

      - v-for="사용될 이름 in 불러올 배열"

<div v-for="item in todoItems">{{item}}</div>
<div v-for="(item, index) in todoItems" v-bind:key="index">{{index}} - {{item}}</div>

v-on

      - event 실행

      - v-on:click="코드"  -> 클릭시 코드를 실행
      - v-on:click="함수이름"  -> 클릭 시 함수를 Vue가 호출하도록 위탁
      - v-on:click="함수호출()"  -> 클릭 시 함수를 내가 호출 구분 못하겠으면 주로 쓰면 됨

             이벤트 정보를 얻고 싶다면 v-on:click="plusOne($event)" 형태로 사용하면 됨

<button v-on:click="count++">+1</button>
<button v-on:click="plusOne">+1</button>
<button v-on:click="plusOne($event)">+1</button>
v-on:click.prevent="page=index+begin-1"  //기본 이벤트 방지
v-on:input.enter="" //엔터 키가 입력되면

@submit.prvent="메소드 이름" // form event 제어
sendData(e){
 e.target.submit()  //이벤트가 발생한 대상(e.target)을 submit으로 전송 지시
}

v-text

      - v-text="{{텍스트}}" 형태로 사용 시 렌더링 지연 예방 가능

v-html

      - 값을 html 형식으로 보여줌

 

배열

      - 배열에 추가 : this.todoItems.push("");
      - 배열에 제거(index부터 1개) : this.todoItems.splice(index, 1);

      - 전부 제거 : this.todoItems.splice(0);

 

한글입력

this.keyword = e.target.value;
또는
v-on:input="keyword=$event.target.value"

watch  영역

keyword의 이전상태와 변경 후 상태를 알 수 있음
  keyword(cur, old){
    console.log("before=", old, "after=", cur)
    this.loadList();
  }

스크롤 이벤트

전체 문서의 높이
    console.log(document.body.clientHeight);
현재 스크롤의 위치
    console.log(window.scrollY);
브라우저의 높이
    console.log(window.innerHeight);

const height = document.body.clientHeight - window.innerHeight;
const current = window.scrollY;
const percent = (current/height)*100;

제어스크립트 watch에서 객체의 내부 속성 감지하는 방법

"subject.period":function(){}	//단일한 key만 탐지

subject:{
  deep:true,
  handler:function(){},
}	//객체 전체 변화 탐지
728x90
반응형