인프런-Vuejs 시작하기 follow Captain's teaching 🦸‍♂️ 참고용 gitbook

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

뷰로 개발할 때 필수로 생성해야하는 기본 단위

new Vue({
  el: ,         // 대상이 되는 요소{html element, css selector}
  template: ,   // 화면에 표시할 마크업 요소 정의
  data: ,       // 뷰의 반응성이 반영된 속성
  methods: ,    // vue 인스턴스에 사용되는 화면 로직제어 관련 메소드 정의
  created: ,    // 뷰 라이프사이클 속성
  watch: ,      // data 속성 값이 변화했을 때 추가 동작 수행 정의
});

화면을 구성하는 영역을 구분하고 재사용성을 높임

• props : 상위 컴포넌트의 데이터를 하위 컴포넌트에게 전달. 데이터 반응형 O

  <app-header v-bind:프롭스 속성이름 ="상위 컴포넌트 데이터 이름"></app-header>
  
  // ...
  
  let appHeader = {
      template: '<h1>{{ 프롭스 속성이름 }}</h1>',
      // Root에 있는 데이터를 하위 컴포넌트인 app-header에게 props
      props: ['프롭스 속성이름']
  }

• events : 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올림

  <app-header v-on:하위컴포넌트 발생 이벤트 이름="상위 컴포넌트 메서드 이름"></app-header>
  
  // ...
  
  let appHeader = {
      template: '<button v-on:click="passEvent">click</button>',
      methods: {
          passEvent: function(){
              this.$emit('pass');         // 이벤트 발생
          }
      }
  }
  
  // ...
  
  new Vue({
  el: '#상위컴포넌트',
  components: {
      'app-header': appHeader
  },
  methods: {
      상위컴포넌트메서드이름: function(){
          console.log('text logging');
      }
  }
  })

뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리

http://127.0.0.1:5500/playground-review/router.html#/ url뒤 #가 신경쓰인다 (-> hash mode인 상태) HTML5 히스토리 모드

뷰에서 권고하는 HTTP 통신 라이브러리 Axios in github

뷰로 화면을 조작하는 방법

• 데이터 바인딩

  <div>{{ msg }}</div>
  <script>
      new Vue({
          data: {
              msg: 'print msg'
          }
      });
  </script>

• 디렉티브 : html 태그 안에 v-*로 시작하는 속성

  <div>
      Hello <span v-if="show">vue js</span>
  </div>
  
  <script>
      new Vue({
          data: {
              show: false
          }
      });
  </script>

• watch
  • 지정한 대상의 값이 변경될 때마다 정의된 함수가 실행
  • 특정 조건을 만족할 때 함수를 실행하는 트리거로써 사용
• computed
  • 반응형 getter
  • 계산된 값을 출력하는 용

프로젝트 생성 시, 명령어를 통해 생성하는 방식 (Command Line Interface)

npm install -g @vue/cli

vue CLI v4 기준

vue create 플젝명

 $ cd 플젝명
 $ npm run serve

var appHeader = {
    template: '<div>header</div>',
    methods: {
       addNum: function(){

       } 
    }
}
<template>
  <!-- HTML -->
  <div>Header</div>
</template>

<script>
export default {
// JS
methods: {
    
        
    }
}
}
</script>

<style>
/* CSS */
</style>

<template>
  <div> 
      <header>app</header>
      <br>
      {{ str }}
  </div>
  <!-- 최상단 앨리먼트는 하나만 존재 가능(안으로만 확장) -->
  <!-- <div></div> 추가 불가능 -->
</template>

<script>
export default {
  // 함수를 리턴하는 형식으로 진행해야한다
  data: function(){
    return {
      str: 'hi'
    }
  }
}
</script>

<style>

</style>