Vue 알아가기

1. v-bind:disabled

• disabled="쌍따옴표안의 특정 조건을 만족하는 경우 비활성화됨"
• v-bind:disabled="email.length < 2"
  • 이메일의 길이가 2보다 작을 경우 버튼이 비 활성화 됨
  • 예시 https://jsfiddle.net/dankimmmmmm/835L0opw/
  • Sign Up 아래의 input창의 email length가 2보다 작으면 버튼이 비활성화 되어 있음
  • 

2. v-bind:class

• v-bind:class="[email.length < 2 ? 'red', 'green']"
  • 이메일의 length가 2보다 작으면 red , 아니면 green 클래스를 적용 시킴

3. v-text

• email의 값이 text형식으로 나옴

  <p v-text="email"></p>

4. v-html

• email의 값이 html형식으로 나옴

  <p v-html="email"></p>

### 5. @click="이벤트"
  - 버튼 클릭시 이벤트 실행
```js
	<button @click="addCat">Submit</button>
//버튼 클릭시 이벤트 실행

6. @keyup.enter || @keyup.13

• 인풋에서 enter키 누를때 이벤트 실행

<input @keyup.enter="addCat" />
//또는
<input @keyup.13="addCat" />
// 키 유니코드로 이벤트 실행 가능

7. v-on: => @

v-on:click === @click
<button v-on:click="addCat">Submit</button>
//같다
<button @click="addCat">Submit</button>
// v-on: 을 @ 로 축약 가능

8. v-bind: => :

<div v-bind:class="cats.length === 0 ? 'red' : 'green'"> 헬로우 </div>
//같다
<div :class="cats.length === 0 ? 'red' : 'green'"> 헬로우 </div>

9. filters : {}

• Vue data를 변형시킴