[Vue.js] 자주 사용하는 지령 요약[초보자]

입문

Vue.js를 터치하기 시작했기 때문에 자주 사용하는 지령을 정리했습니다.
※ HTML 측면의 표식은 샘플로만 기재됩니다.
공식 문서는 여기 있습니다.

환경

- OS: macOS Catalina 10.15.1
- Vue.js: 2.6.10

각 명령의 의미 및 사용 예

1.v-bind 데이터 바인딩

공식 문서

[의미]

데이터 귀속을 만듭니다.
JavaScript 데이터를 HTML의 레이블과 연결합니다.

[사용 예]

<a v-bind:href="url">Click here</a>

<a :href="url">Click here</a>

단축형이 준비되어 있으며 보통 아래쪽 표기를 사용한다.
또한 아래 라벨과 협업하는 활용 사례가 많다.

href

src

id

class

checked

2. v-on 이벤트 발화

공식 문서

[의미]

HTML 레이블과 연관되어 이벤트 발생 시 지정된 JavaScript를 실행합니다.

[사용 예]

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

하나의 예시에서 단추를 눌렀을 때 변수 counter 를 p 라벨에 추가합니다.

<div id="example-1">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

단축계를 준비했는데, 통상적으로 @click처럼 사용한다.
다른 활용의 폭이 넓어 다양한 수식부적이 준비되어 있다.
자세한 내용은 공식 문서를 참조하십시오.

3.v-model 양방향 데이터 귀속

공식 문서

[의미]

양방향 데이터 귀속을 만듭니다.
폼 등과 협업하여 실시간으로 값을 반영하고자 할 때 사용합니다.

[사용 예]

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

한 예에서 input 탭의 p 에서 {{message}} 탭으로 만든 양식에 입력한 문자를 실시간으로 표시합니다.
다른 체크 상자, 선택 상자 등도 적용할 수 있다.

4.v-if 조건 분기

공식 문서

[의미]

진실이면 표시되고 거짓이면 표시되지 않습니다.

[사용 예]

<div v-if="hoge">
  fuga
</div>
<div v-if="foo">
  bar
</div>

예에서

hogetrue=>fuga

표시

footrue=>bar

표시
그리고 좀 더 복잡하게 처리하면v-else-if v-else조건 브랜치를 조합할 수도 있습니다.

5.v-show 표시 / 숨기기

[의미]

v-if 표기법, 사용 용도와 비슷하다.
그러나 실제 상황은 CSS에 부여된 display: none일 뿐 표시되지 않는 경우false에도 요소 자체가 존재한다.

【사용례】※ v-if와 동일

<div v-show="hoge">
  fuga
</div>
<div v-show="foo">
  bar
</div>

예에서

hogetrue=>fuga

표시

footrue=>bar

표시

6.v-for 중복 처리

공식 문서

[의미]

배열된 요소를 하나하나 꺼내서 꺼내는 요소가 사라질 때까지 반복한다.

[사용 예]

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

이 예에서는 태그 li 를 개수만 반복하여 표시합니다.vfor 뒤에 item in items

item=>html중의{{item.message}}중의item

items = > JavaScript의 data 의 items 시퀀스

표와 목록에 사용되는 예가 매우 많다.

끝내다

끝까지 읽어주셔서 감사합니다.
지금부터 습관을 잘 써야 돼!

참고로 사이트 (항상 감사합니다)

명령-vue.js