Vue.js 기본 문법

• 콧수염 괄호 

• • {{ }} 

• v-bind 

• • Id, class, style 등의 html 속성 값에 뷰 데이터 값을 연결할때 사용.

• 자바스크립트 표현식

• • 뷰 템플릿 안에서 자바스크립트 표현식 사용가능

    {{ message + “!!” }}. —> message!!

    {{ message.split(‘’).reverse().join(‘’) }}  —> 메시지 리버스

  • 주의점.

  • • 선언문 사용안됌.  ex) Int a

    • 분기 구문 사용안됌. 삼항연산자 됌.

    • 복잡한 연산자는 인스턴스 안에서 수행.

    • 스크립트에서 computed 속성으로 계산한 후 최종 값만 표현.

• 디렉티브

• • 뷰 디렉티브란 Html 태그 안에 v- 접두사를 가지는 모든 속성을 의미.

  • v-if

  • • <a v-if=“flag”> 두잇 </a> 

      —> flag 상태에 따라 a태그가 보일 수 도 안보일 수도.

  • v-for

  • • 지정한 데이터의 개수 맘큼 해당 태그 반복.

  • v-show

  • • v-if와 동일 but, v-show는 css 효과만 display:none 처리.

  • v-bind

  • • 데이터 연결

  • v-on

  • • 이벤트 감지. ex) v-on:click

  • V-model

  • • form 에서 주로 사용.

    • <input> <select> <textarea>에서만 사용가능.