Vue.js - v-if v-else 디렉티브 / 보간법 / v-model / ref [강좌 1강정리]

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다.

 

설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~

 

사이트 주소 : https://www.inflearn.com/course/web-game-vue/#

 

1-1강 ( cdn으로 Vue 사용해보기)

• Data를 바꾸면 알아서 뷰 화면이 바뀐다.

• 화면과 데이터를 일치시키는 것이 중요하다.

• 데이터만 관리한다. => 생각하는 방식을 데이터중심으로 바꾸는 것이 중요하다. 
  즉 데이터를 바꾸면 View가 바뀐다.

• 해당 cdn으로 vue.js를 이용할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

1-2강 (data와 v-if, v-else)

• onclick => v.on:click 

  • 뷰에서 통제하는 메서드를 연결할때는 onlick이 아닌 v.on:click로 연결한다.

• v- 가 붙은 놈들은 뷰에서 통제하고 접근할 수 있다.

• v-if, v-else, v-else-if는 동등한 형제이면서 인접해야 적용이 된다.

<div v-if="liked">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton">Like</button>

• v- 가 붙은 속성들은 자바스크립트 처럼 사용할 수 있다. ex) onClickButton + 1

 

1-3강 (보간법과 v-model)

• Vue가 동작하고 있는 HTML 문서상에서 {{}} 로 data 내부에 있는 객체리터럴 변수에 접근이 가능하다.

  • {{}} 내부에서도 자바스크립트 처럼 동작할수 있다.

• mothods에서는 `this.변수명` 으로 data에 있는 변수에 접근이 가능하다.

• React는 State를 선언하고 / 뷰는 Data를 선언한다.          

  Vue의 data 속성

• input태그에서 바뀌는 값을 data에도 받고싶을때는 v-model을 사용한다. (리엑트와는 좀 다름)

  • 위와 같은 부분은 양방향 바인딩이라고 하며 form이나 input태그에서 유용하게 사용할 수 있다.

<form v-on:submit="onSubmitForm">
    <input type="number" ref="answer" v-model="value"> <!--v-model로 속성 선언 -->
    <button>입력</button>
</form>

<script>
const app = new Vue({
    el: '#root',
    data: {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '', //v-model을 통해 값을 전달받음
      result: '',
      },
      methods: {
        onSubmitForm(e) {
        e.preventDefault();
        if (this.first * this.second === parseInt(this.value)) {
        this.result = '정답'; // this로 data에 접근
        this.first = Math.ceil(Math.random() * 9); // this로 data에 접근
        this.second = Math.ceil(Math.random() * 9); // this로 data에 접근
...
...
</script>

 

1-4강 (ref를 이용한 element 바인딩)

• form은 submit버튼을 쓰는데 이처럼 vue에서는 v-on:submit을 이용하여 submit이벤트를 연결한다.
  (이벤트 리스너라고 생각하면 된다.)

<form v-on:submit="onSubmitForm">

• e.preventDefault는 페이지의 새로고침을 막기 위해 사용된다.

• 예를들어 React나 Vue와 같은 SPA에서는 form이 기본적으로 submit할때 사용되는 새로고침을 막기 위해 e.preventDefault를 사용한다.

• 모르는 부분이 있으면 항상 console.log를 잘 찍어보는 습관을 가질것!

• Vue를 이용하다보면 HTML 속성의 focus같은 부분은 데이터가 아니며, 이런 경우에는 직접 태그에 접근해야하는데 이는 ref로 접근한다.

<input type="number" ref="answer" v-model="value"> <!-- ref속성을 통해 해당 element를 전달 -->

<script>
const app = new Vue({
	methods: {
      	onSubmitForm(e) {
        e.preventDefault();
        if (this.first * this.second === parseInt(this.value)) {
          this.result = '정답';
          this.first = Math.ceil(Math.random() * 9);
          this.second = Math.ceil(Math.random() * 9);
          this.value = '';
          this.$refs.answer.focus(); //refs로 전달받음   
        }
    })
...
...
...

</script>

• ref를 남용하는 것은 좋지 않고 어쩔수 없는 상황에만 사용한다. 

• ref를 이용하여 data안에 있는 값을 직접 바꾸게 되면 화면과 data의 불일치가 일어나기 때문에 절대 바꾸면 안된다.

• Vue와 React의 장점은 만들고자하는 사이트가 중대 또는 초대규모가 되었을때 진가를 발휘한다. (소규모일때는 체감이 되지 않음)

  • 데이터와 화면이 틀어지거나 스파게티 코드를 막아주는 역활.

  • 화면은 알아서 관리되므로 데이터만 잘 관리하면 된다.

 

1-5강 (복습)

• 데이터만 생각하는게 중요하다.

• 컴포넌트는 다음 시간에..

 

1-6 (Q&A)

• v-if v-else로 화면이 보였다 안보였다 하는것을 통제할 수 있다.

• v-show도 있다.

• SPA에서는 모든 화면을 다 만들어놓고 Vue data값만 바꿔서 사용한다. 

  • 모든 화면을 다 만들어 놓고 시작하기 때문에 페이지가 무거워진다는 단점이 있다.

  • 용량이 증가한다 => 코드 스플린팅이 나온 이유

• 캐싱이 안되는 문제도 있다. (계속해서 문제 발생) => 캐싱 해결에 대한 문제해결 방법 공부

• webpack을 써야하는 이유 : webpack을 통해 javascript를 관리하지 않고 오히려 cdn으로 썼을때가 더 복잡하다.
  (규모가 커질수록)

•