(22.05.23) Vue.js

2022.05.23

Vue(SFC: Single File Component 단일 파일 컴포넌트)

<template>
  <div @click="msga()">
    {{ msg }}
  </div>
</template>

<script>
export default {
  //export default 객체내부에 data속성 method정의
  // data: function () {return}
  data() {
    return {
      msg: 'Hello Vue'
    }
  },
  //this로 접근하며 this는 script 내부
  methods: {
    msga() {
      console.log(this.msg)
    }
  }
}
</script>

보간법

데이터바인딩(: 웹 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스.데이터 값이 변경될 때 데이터에 바인딩된 요소에 변경사항이 자동으로 반영)
데이터바인딩의 기본 형태 {{ }} 이중중괄호구문
이중괄호구문은 HTML 속성에 사용할 수 없기때문에 v-bind 디렉티브사용
반응형 데이터

v-once

한번만 렌더링
재렌더링될할때는 엘리먼트는 정적 컨텐츠로 처리되고 건너뜀

원시 html

v-html
vue는 문자열 기반 템플릿 엔진이 아니기 때문에 템플릿을 구성하는 데에 v-html 디렉티브를 사용할 수 없다는 점 유의
XSS에 취약하기때문에 백엔드쪽에서 주의해줘야하는부분

v-bind

v-bind:id 약어 => :id
v-bind뒤는 문자가 아니라 데이터

자바스크립트 표현식 사용

디렉티브

v- 로 시작하는 모든 구문은 디렉티브
v-if 참, 거짓

v-bind 약어

v-bind

:

:[key]

v-on 약어

v-on:click

@click

@[event]

Data 속성과 methods

data에 지정이 되있어야함
methods
반응형 데이터를 this로 참조할 수 있음!!

디바운싱과 쓰로틀링(뷰랑 상관없음.. 로대쉬 사용해라)

computed

계산된. 캐싱(데이터저장되있음. 반복사용에 최적화)
getter(읽기전용. 값을 얻어내는용도)
get과 set을 직접지정가능
data()는 값 얻음(getter), 값 지정(setter)

watch

watch 감시하다
특정데이터 감시할때 사용

클래스와 스타일 바인딩

클래스 추가제거를 정의할 수 있음. true, false
:style 'font-size' or fontSize 로 작성해주기