Vue.js__01 (Vue Instance & Syntax)

Concepts of Vue.js

MVVM

• 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴

• 구성 요소

  • Model
  • View
  • View Model

Model

• Vue에서 Model은 JavaScript Object
• JavaScript의 Object 자료 구조
• 이 Object는 Vue Instance 내부에서 data로 사용되는데 이 값이 바뀌면 View(DOM)가 반응

View

• Vue에서 View는 DOM
• Data의 변화에 따라서 바뀌는 대상

ViewModel

• Vue에서 ViewModel은 모든 Vue Instance
• View와 Model 사이에서 Data와 DOM에 관련된 모든 일을 처리
• ViewModel을 활용해 Data를 얼마만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것

Quick Start of Vue.js

ref : https://kr.vuejs.org/v2/guide/index.html

Django & Vue.js 코드 작성 순서

• Django의 경우

  • url > views > template 순서
  • 데이터의 흐름

• Vue.js의 경우

  • Data가 변화하면 DOM이 변경

    • Data 로직 작성 > DOM 작성

Basic Syntax of Vue.js

Vue instance

• 모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것부터 시작

• Vue 인스턴스를 생성할 때는 Options 객체를 전달해야함

  • 여러 Options들을 사용하여 원하는 동작을 구현

• Vue Instance === Vue Component

const app = new Vue({
    
})

Options/DOM - 'el'

• Vue 인스턴스에 연결(마운트)할 기존 DOM 엘리먼트가 필요
• CSS 선택자 문자열 혹은 HTMLElement로 작성
• new 를 이용한 인스턴스 생성때만 사용

const app = new Vue({
  el: '#app'
})

Options/Data – ‘data’

• Vue 인스턴스의 데이터 객체

• Vue 앱의 상태 데이터를 정의하는 곳

• Vue template에서 interpolation을 통해 접근 가능

• v-bind, v-on과 같은 디렉티브에서도 사용 가능

• Vue 객체 내 다른 함수에서 this 키워드를 통해 접근 가능

• 주의

  • 화살표 함수를 data에서 사용하면 안됨
  • 화살표 함수가 부모 컨텍스트를 바인딩하기 때문에 , this는 예상과 달리 Vue 인스턴스를 가리키지 않음

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  }
})

Options/Data – ‘methods’

• Vue 인스턴스에 추가할 메서드

• Vue template에서 interpolation을 통해 접근 가능

• v-on과 같은 디렉티브에서도 사용 가능

• Vue 객체 내 다른 함수에서 this 키워드를 통해 접근 가능

• 주의

  • 화살표 함수를 메서드를 정의하는데 사용하면 안됨
  • 화살표 함수가 부모 컨텍스트를 바인딩하기 때문에, this는 Vue 인스턴스가 아니며 this.a는 정의되지 않음

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  },
  methods: {
    greeting: function () {
      console.log('hello')
    }
  }
})

this keyword in vue.js

• Vue 함수 객체 내에서 vue 인스턴스를 가리킴

• 단, JavaScript 함수에서의 this 키워드는 다른 언어와 조금 다르게 동작 (추가 학습 필요)

• 화살표 함수를 사용하면 안되는 경우

  1. data
  2. method 정의

<div id="app">
  <button @click="myFunc">a</button>
  <button @click="yourFunc">b</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<scirpt>
  const app = new Vue({
    el: '#app',
    data: {
      a: 1,
    },
    methods: {
      myFunc: function () {
        console.log(this) // Vue instance
      },
      yourFunc: function () {
        console.log(this) // window
      }
    }
  })
</script>

Template Syntax

• 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용

  1. Interpolation (보간법)
  2. Directive

Interpolation (보간법)

1. Text

<span>메시지: {{ msg }}</span>

2. Raw HTML

<span v-html="rawhtml"></span>

3. Attributes

<div v-bind:id="dynamicId"></div>

4. JS 표현식

{{ number + 1 }}
{{ message.split('').reverse().join('') }}

Directive (디렉티브)

• v- 접두사가 있는 특수 속성

• 속성 값은 단일 JS 표현식이 됨 (v-for는 예외)

• 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할을 함

• 전달인자 (Arguments)

  • : (콜론)을 통해 전달인자를 받을 수도 있음

<a v-bind:href="">...</a>
<a v-on:click="doSomething">...</a>

• 수식어 (Modifiers)

  • . (점)으로 표시되는 특수 접미사
  • 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냄

<form v-on:submit.prevent="onSubmit">...</form>

v-text

• 엘리먼트의 textContent를 업데이트
• 내부적으로 interpolation 문법이 v-text로 컴파일 됨

v-html

• 엘리먼트의 innerHTML을 업데이트
• XSS 공격에 취약할 수 있음
• 임의로 사용자로부터 입력 받은 내용은 v-html에 절대 사용 금지

v-show

• 조건부 렌더링 중 하나
• 엘리먼트는 항상 렌더링 되고 DOM에 남아있음
• 단순히 엘리먼트에 display CSS 속성을 토글

v-if, v-else-if, v-else

• 조건부 렌더링 중 하나
• 조건에 따라 블록을 렌더링
• 디렉티브의 표현식이 true 일때만 렌더링
• 엘리먼트 및 포함된 디렉티브 는 토글하는 동안 삭제되고 다시 작성됨

v-show 와 v-if

• v-show (Expensive initial load, cheap toggle)

  • CSS display 속성을 hidden으로 만들어 toggle
  • 실제로 렌더링은 되지만 눈에서 보이지 않는 것이기 때문에 딱 1번만 렌더링이 되는 경우라면 v-if에 비해 상대적으로 렌더링 비용이 높음
  • 하지만 자주 변경되는 요소라면 한번 렌더링 된 이후부터는 보여주는 지에 대한 여부만 판단하면 되기 때문에 토글 비용이 적음

• v-if (Cheap initial load, expensive toggle)

  • 전달인자가 false인 경우 렌더링 되지 않음
  • 화면에서 보이지 않을 뿐만 아니라 렌더링 자체가 되지 않기 때문에 렌더링 비용이 낮음
  • 하지만 자주 변경되는 요소에 경우 다시 렌더링 해야 하기 때문에 비용이 증가할 수 있음

v-for

ref : v-for 에 key 지정

ref : v-if, v-for 동시 사용 지양

• 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링

• item in items 구문 사용

• item 위치의 변수를 각 요소에서 사용할 수 있음

  • 객체의 경우는 key

• v-for 사용 시 반드시 key 속성을 각 요소에 작성

• v-if와 함께 사용하는 경우 v-for는 v-if보다 우선순위가 높음

  • 단, 가능하면 v-if와 v-for를 동시에 사용하지 말 것

v-on

• 엘리먼트에 이벤트 리스너를 연결

• 이벤트 유형은 전달인자로 표시

• 특정 이벤트가 발생했을 때, 주어진 코드가 실행 됨

• 약어 (Shorthand)

  • @
  • v-on:click → @click

v-bind

ref : 폼 입력 바인딩 — Vue.js (vuejs.org)

• HTML form 요소의 값과 data를 양방향 바인딩

• 수식어

  • .lazy

    • input 대신 change 이벤트 이후에 동기화

  • .number

    • 문자열을 숫자로 변경

  • .trim

    • 입력에 대한 trim을 진행

Options/Data – ‘computed’

• 데이터를 기반으로 하는 계산된 속성
• 함수의 형태로 정의하지만 함수가 아닌 함수의 반환 값이 바인딩 됨
• 종속된 대상을 따라 저장(캐싱) 됨
• 종속된 대상이 변경될 때만 함수를 실행
• 즉, Date.now() 처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않음
• 반드시 반환 값이 있어야 함

computed & method

• computed 속성 대신 methods에 함수를 정의할 수도 있음

  • 최종 결과에 대해 두 가지 접근 방식은 서로 동일

• 차이점은 computed 속성은 종속 대상을 따라 저장(캐싱) 됨

• 즉, computed는 종속된 대상이 변경되지 않는 한 computed에 작성된 함수를 여러 번 호출해도 계산을 다시 하지 않고 계산되어 있던 결과를 반환

• 이에 비해 methods를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행

Options/Data – ‘watch’

• 데이터를 감시
• 데이터에 변화가 일어났을 때 실행되는 함수

computed & watch

ref : computed와 watch — Vue.js (vuejs.org)

• computed

  • 특정 데이터를 직접적으로 사용/가공하여 다른 값으로 만들 때 사용
  • 속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 ‘선언형 프로그래밍’ 방식
  • “특정 값이 변동하면 특정 값을 새로 계산해서 보여준다.”

• watch

  • 특정 데이터의 변화 상황에 맞춰 다른 data 등이 바뀌어야 할 때 주로 사용
  • 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 ‘명령형 프로그래밍’ 방식
  • “특정 값이 변동하면 다른 작업을 한다.”
  • 특정 대상이 변경되었을 때 콜백 함수를 실행 시키기 위한 트리거

• computed가 코드 반복이 적은 등 우수하다고 평가하는 경향이 있음

Options/Assets – ‘filters'

• 텍스트 형식화를 적용할 수 있는 필터
• interpolation 혹은 v-bind를 이용할 때 사용 가능
• 필터는 자바스크립트 표현식 마지막에 “|” (파이프)와 함께 추가되어야 함
• 체이닝 가능

Lifecycle Hooks

• created 훅은 인스턴스가 생성된 후에 호출됨
• created를 통해 애플리케이션의 초기 데이터를 API 요청을 통해 불러올 수 있음

• Lifeclycle Hooks 종류

lodash

• 모듈성, 성능 및 추가 기능을 제공하는 JavaScript 유틸리티 라이브러리
• array, object등 자료구조를 다룰 때 사용하는 유요하고 간편한 유틸리티 함수들을 제공
• reverse, sortBy, range, random …