vue-practice

vue-snippets

• vueinit (template, script, style 한꺼번에 양식 출력)

문법

data()

• html 태그는 <template></template> 태그 안에 모아 작성한다.

• 데이터 바인딩 시, 동적으로 사용할 데이터를 html 태그안에 작성할 수 있는데, 작성 방법은 {{ data }} 이다.

• input 태그안에 양방향 데이터 작성을 할 수 있는데, v-model 이라는 프로퍼티를 사용하고 value값은 “data“ 이다.

• 동적 데이터를 html 속성에 바인딩 할 경우에는 항상 v-bind: 혹은 :를 작성하여 바인딩한다.
• <img v-bind:src=”imgSource”>
• <a :href=”naverUrl”>naver</a>

• 클래스를 동적으로 작성 할 수 있다.
• <h2 :class="{ red: food === 'apple', 'not-good': food === 'rice' }"> 안녕하세요 {{ food }} 입니다.</h2>

• v-if와 v-show의 차이
• if의 display가 false일때와, show의 display가 false일때는 차이가 있다.
• v-show 프로퍼티의 html 태그값을 확인해보면 style=”display:none;” 이 확인된다.(태그는 사라지지않음.)

• v-for 반복문은 배열을 mapping 할 수 있다. 사용할 때 v-for:”(animal,index) in animals” 프로퍼티를 작성해주고, key바인딩을 해주는데 :key=”index” 을 작성해준다.

• v-if와 v-for는 태그 한개에서 함께 사용하면 안된다. → 만약 사용하고 싶으면 다른 태그(template 태그)를 사용하여 분리시켜준다.

methods

• methods 안의 데이터 변수에는 this를 붙여준다.

• Arrow function을 쓰게 되면, this가 지역변수가 되기때문에 데이터의 this 를 가르키지 못한다. 그래서 무조건 일반함수를 써야한다.

• this를 console.log로 확인해보면 Proxy라는 객체가 확인이 된다. vue3에서 적용된 성능이 향상된 데이터 조회 키워드이다.

• 동적인 value 파라미터와 event객체를 사용하기위해서는 $event ($e 아님,, 무조건 $event)를 사용한다.