[VUE] VUE개발

1. 환경구성

 

Nodejs설치 (https://nodejs.org/en)

 

Visual Studio Code 설치 (https://code.visualstudio.com/)

 

Vue설치

npm install -g @vue/cli

 

Vue프로젝트 생성

vue create ${내가원하는 프로젝트 명}

---

 

COMPONENT

 : 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다.

 

Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다

 

TEMPLATE

:  뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성

• 라이브러리 내부적으로, 가상 돔 기반의 render() 함수로변환
• 변환된 render() 함수는 최종적으로 사용자 화면에 표시
• 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해짐
• JSX 기반의 render() 함수에 더 익숙한 리액트 개발자라면 템플릿 속성을 이용하지 않아도 됨

 

COMPUTED

:  템플릿 안에서 하면 코드가 비대해질때 

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

 

WATCH
: watch 속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

 

PROPS

: props는 상위 컴포넌트의 데이터를 전달하기 위한 사용자 지정 특성 입니다. 하위 컴포넌트에서는 props 옵션을 사용해 수신할 것으로 기대되는 props를 명시적으로 선언해야 합니다.

# 하위 컴포넌트 js

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

 

 

---

 

참조https://kr.vuejs.org/v2/guide/components.html