알고리즘을 좋아하는 나

보간법(Interpolation)

데이터 바인딩의 가장 기본은 머스터쉬(Mustache) {{이중 중괄호}}를 사용한 텍스트 보간이다.

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

머스터쉬 안의 msg는 해당 객체의 msg의속성 값으로 대체됩니다.

<span v-once>다시는 변경하지 않습니다: {{ msg }}</span>

v-once 디렉티브를 사용하면 msg값을 변경 시켜도 업데이트 되지 않는다.

<div v-html="rawHtml"></div>

v-html 디렉티브를 사용하면 원시 html을 사용 가능합니다.

머스터쉬는 텍스트로 인식됩니다.

웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS 취약점으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있습니다. 신뢰할 수 있는 콘텐츠에서는 HTML 보간만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다.

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

머스터쉬는 HTML속성으로 사용이 불가능합니다. v-bind디렉티브를 사용해야 합니다.

JavaScript 표현식 사용하기

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

Vue js 는 모든 바인딩 작업에서 JS의 표현식 사용이 가능하다.

<!-- 아래는 구문입니다, 표현식이 아닙니다. -->
{{ var a = 1 }}
<!-- 조건문은 작동하지 않습니다. 삼항 연산자를 사용해야 합니다. -->
{{ if (ok) { return message } }}

디렉티브

디렉티브는 v- 접두사가 있는 특수 속성이다.

디렉티브 속성 값은 단일 JS 표현식이 된다. v-for 은 예외

<p v-if="seen">이제 나를 볼 수 있어요</p>

여기서 v-if는 seen 의 값에따라 p태그를 추가할지 결정한다.

<a v-bind:href="url"></a>

v-bind는 웹 페이지가 반응적으로  HTML속성을 갱신되게 도와준다.

href는 전달인자, 엘리먼트의 href 속성을 v-bind로 url값을 바인드 한다.

<a v-on:click="doSomething">

DOM 이벤트리슨을 하는 v-on디렉티브다.

수식어는 .으로 표시되는 특수 접미사다.

디렉티브를 특별한 방법으로 바인딩 해야함을 나타날때 사용한다.

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

submit하면 event.preventDefault() 를 호출합니다.

필터

Vue에서 일반 텍스트를 사용할때 사용이 가능하다.

머스터쉬 보간과 v-bind 표현식 에서 사용이 가능하다.

필터는 JS 표현식 끝에 표기해야 하며, 파이프 기호로 표시됩니다.

<!-- Mustaches 사용시 -->
{{ message | capitalize }}
<!-- v-bind 사용시 -->
<div v-bind:id="rawId | formatId"></div>

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

필터는 항상 표현식의 값을 첫번째 전달인자로 받는다.

{{ message | filterA | filterB }}

체이닝도 가능하다.

{{ message | filterA('arg1', arg2) }}

message,arg1,arg2이런식으로 인자가 전달된다.

약어

개발을 할때 속도를 내기위해 약어를 사용하면 좋다.

v-bind와 v-on에 약어를 제공한다.

<!-- 전체 구문 -->
<a v-bind:href="url"></a>
<!-- 약어 -->
<a :href="url"></a>

<!-- 전체 구문 -->
<a v-on:click="doSomething"></a>
<!-- 약어 -->
<a @click="doSomething"></a>

:와 @는 속성 이름에 유효한 문자다.

친구랑 같이 작업 하기로한 프로젝트를 못하게돼서 DB모델링만 도와주기로 했다.

스크린샷은 수정전 ERD 다이어그램이다.

생성자

Vuejs는  Vue 생성자 함수로 root Vue를 인스턴스해 부트스트래핑 합니다.

var vm = new Vue({
  // 옵션
})

Vuejs는 MVVM패턴에 영감을 받았습니다.

vm은 view model의 약자 입니다.

Vue인스턴스를 인스턴스화 할 때,

데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 option객체를 전달해야 한다.

Vue는 미리 정의된 옵션을 사용하는 컴포넌트 생성자를 사용할 수 있다.

var MyComponent = Vue.extend({
  // 옵션 확장
})
// `MyComponent`의 모든 인스턴스는
// 미리 정의된 확장 옵션과 함께 생성됩니다.
var myComponentInstance = new MyComponent()

나중에 설명이 더 나온다는데, 지금은 모든 Vue의 컴포넌트가 본질적으로 확장된 Vue 인스턴스다.

속성과 메소드

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // -> 2
// ... 당연하게도
data.a = 3
vm.a // -> 3

Vue인스턴스는 안에 data 객체들을 모두 프록시 처리합니다.

프록시 속성은 반응형 입니다.

레퍼런스가 같기 때문이다.

Vue에서는 유용한 인스턴스 속성 및 메소드를 제공한다.

이 프로퍼티들과 메소드는 접두사 $로 접근 가능합니다.

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출 됩니다.
})

인스턴스 속성이나 콜백에서 화살표 함수를 사용하지 마십시오. (예: vm.$watch('a', newVal => this.myMethod())). 화살표 함수는 부모 컨텍스트에 바인딩 되어 있으므로 this는 Vue 인스턴스가 아니며 this.myMethod는 정의되지 않습니다.

람다식을 사용하면안된다.

인스턴스 라이프사이클 훅

각 Vue 인스턴스는 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를  DOM에 마운트하고, 데이터가 변경될 때 DOM을 업데이트 해야할 때 일련의 초기화 단계를 거칩니다.

그 과정에서 사용자 정의 로직을 실행할 수 있는 라이플사이클 훅 도 호출됩니다.

created훅은 인스턴스가 생성된 후 실행됩니다.

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

created말고 여러가지의 훅도 존재한다.

라이프사이클 다이어그램