[Vue] 문법정리

{{데이터바인딩}}
JS데이터를 HTML에 꽂아넣는 문법

데이터바인딩 하는 이유 _ 이걸 왜, 언제쓰냐가 중요**
1. HTML에 하드코딩해놓으면 나중에 변경 어려움
(가변적인 데이터들은 변수화 해두면 좋음)
2. Vue의 실시간 자동 렌더링 기능을 쓰기위해

HTML속성도 데이터바인딩 가능
: 속성="데이터이름"

 

* 단방향 데이터 바인딩 _ 데이터 => UI(사용자 인터페이스) 

데이터가 변경되면 UI에 반영되지만 UI에서의 변경은 데이터에 반영되지 않는다. 따라서, 주로 데이터를 읽고 표시할 때 사용 ( v-text )

 

* 양방향 데이터 바인딩 _ 데이터 => UI(사용자 인터페이스) 

데이터의 변경은 UI에 반영되고, UI에서의 변경은 데이터에도 반영된다. 따라서, 사용자 입력을 받거나 사용자가 UI를 조작할 때 데이터와의 상호작용이 필요한 경우에 사용 ( v-model )

---

[ 디렉티브(Directive) ]

Vue.js에서 데이터 바인딩을 위해 사용하는 주요 문법 중 하나로,  템플릿에서 DOM 요소에 특별한 동작을 부여하는 명령어다.  'v- ' 형태로 HTML 태그의 속성으로 사용하며,  이를 통해 Vue.js에게 해당 요소에 특별한 동작을 수행하도록 지시.

 

v-bind 또는 :

엘리먼트의 속성에 데이터 값을 바인딩  ( v-bind:href )

<a v-bind:href="url">링크</a>

v-model

폼 입력 요소와 데이터를 양방향 바인딩, 사용자 입력과 데이터 간의 상호작용을 지원.

<input v-model="message">

v-for 

배열을 반복하면서 엘리먼트를 렌더링, 반복 작업을 위해 사용.

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

v-if, v-else-if, v-else

조건부로 엘리먼트를 표시하거나 숨김.

<div v-if="isVisible">이 엘리먼트가 표시됩니다.</div>
<div v-else>이 엘리먼트가 숨겨집니다.</div>

v-on 또는 @

이벤트 처리기를 등록하여 사용자 상호작용에 응답

<button v-on:click="change">클릭하세요</button>

v-pre

디렉티브를 무시하고 엘리먼트의 텍스트를 원래 그대로 표시, 주로 디버깅 목적

<p v-pre>{{ This won't be compiled: {{ message }} }}</p>

=> 브라우저에 '{{ message }}' 의 형태가 그대로 출력된다.

 

v-cloak

초기 렌더링 시간이 오래 걸리는 경우 플래시 현상을 방지하기 위해 사용, 스타일을 표시하는 데 사용

<div v-cloak>{{ message }}</div>

---

Vue의 HTML 반복문
<태그 v-for="작명 in 몇회">
(:key="작명"도 필요)

 

변수 작명 2개까지 가능
왼쪽변수는 array내의 데이터
오른쪽변수는 1씩 증가하는 정수

 

버튼을 눌렀을때 자바스크립트 실행
v-on:click=""  //  @click=""

마우스를 올렸을때 이벤트 실행
@mouseover = ""

 

함수
methods : { 함수(){} } 내부에 만들기
이 함수 내에서 데이터를 쓰려면 this.데이터명

 

이미지넣기
src/assets 폴더에 img파일 넣고
<img src="./assets/파일명.jpg"> 경로는 . / 부터

 

v-if="조건식"
조건식이 참일때만 HTML 보여줌

 

동적인 UI 만드는 법
0. HTML / CSS로 디자인해두기
1. UI의 현재 상태를 데이터로 저장해둠(T/F, 0/1)
(모달창이 지금 어떻게 보여야 하는지)
2. 데이터에 따라 UI가 어떻게 보일지 작성

 

import / export 문법 쓰는 법
1. export default 변수명
2. import 변수명 from 그파일경로

 

import / export 문법 쓰는 법2
1. export {변수1, 변수2}
2. import {변수1} from 경로

 

---

axios 

.get

.post

 

 axios
        .get("URL")
        .then((res) => {
        })
        .catch((err) => {
          }
        });

    axios({
          url: "",
          method: "post",
          params: { bno: this.detail.bno },
        })
          .then((res) => {
            alert("삭제결과값: " + res.data.result);
          })
          .catch((err) => {
            alert("에러발생" + err);
          });
      }