Nuxt Toy Project

문서를 한번씩 훑었다고 생각되어 혼자서 웹페이지를 만들어보려 함(많이 부족한건 팩트 ㅜㅜ)

디자인을 따로 하긴 힘들어 https://startbootstrap.com/template-overviews/grayscale/ 템플릿의 레이아웃을 그대로 하드코딩해서 만들어 볼 예정

틀린 내용이 있을 수 있으니 피드백 부탁드립니다

참고 사이트

Nuxt 공식 한글 문서

Vue 공식 한글 문서

github 주소

진행과정

찾아본 내용과 찾아봐야 할 내용을 정리

2017.05.04

시작 / Nuxt starter로 프로젝트 생성 및 nav바 생성

2017.05.05

프로젝트 구조에 대해 이해할 필요를 느껴 샘플 사이트 코드 분석하려 함
백엔드는 알고있는게 루비온레일즈 밖에 없기 때문에 루비온레일즈의 프로젝트 구조와 비교해 예제 사이트 와 공식문서를 참고해 알게된 내용을 정리

  1. layouts폴더의 dafult.vue
    application.html 파일 처럼 페이지 전역에서 보여줄 기본 레이아웃을 설정하는데 사용 / 예를들어 전역에서 상단에 띄워놓을 navbar를 dafault.vue에다가 삽입
    default.vue의 <nuxt/> 태그가 <%= yield %> 같은 기능을 하는 태그 같음

  2. nuxt-link
    다른 vue파일로 이동할 때 a태그와 같은 용도로 사용되는것 같음 >> 알아보니 렌더링 되면 a태그가 된다 함

  3. middleware
    레이아웃이 렌더링되기 전에 사용할 함수를 정의할 수 있음(js파일), 사용예를 보니 vue파일에 methodscomputed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

결국 자료를 읽어보고 프로젝트 엎고 다시 시작함.
nav바 및 intro 구현

  1. assets 디렉토리
    컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loaderurl-loader를 통해 자동으로 url주소를 변경해 파일을 불러옴. webpack을 거치지 않고 static파일을 사용할 수도 있는데 둘의 정확한 차이를 모르겠음. 어떨때 assets을쓰고 어떨때 static을 쓰는지..궁금하다

  2. cover
    단순한 CSS문제 / 뷰포트에 이미지 cover 방법 찾기

2017.05.07

  1. Component화의 문제
    큰일났다. 컴포넌트를 그냥 편한대로 semantic tag에 따라서 쪼갰는데 막상 만들고나서 생각해보니까 컴포넌트는 기능별로 나눠야 한다는 부분에서 현자타임이 왔다..
    일단 쪼개놓고 완성은 해놓고 나중에 실력이 늘었을 때 보면서 반성하는 용으로 완성은 해놓고 생각해야겠다.

  2. fontawesome icon
    살짝 픽셀이 밀려서 원하는 모양이 안나오는데 해결 방법을 모색해봐야 할 듯

  3. 전역 CSS
    nuxt 가이드대로 CSS를 설정했는데 적용이 안돼서 결국 scoped로 적용하고 있는데 방법을 찾아야 함.

  4. 레이아웃 완성 / 자바스크립트 효과 넣으면 끝!

2017.05.08

  1. store
    React의 Flux처럼 Vue에서 상태관리를 위해 사용.
    대충 흐름은 파악해 놓았지만 어떻게 사용하는지는 잘 모르겠다.

  2. 자바스크립트 구현
    어떻게 어떤 디렉토리에 JS파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정

'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

Vue.js 정리

아래 내용은 기본적인 Vue 사용법을 알고있음을 가정해 작성함

v-model vs v-bind

v-model 은 데이터를 동적으로로 바인딩할 때 사용(<input v-model="message"> 와 같이 작성하면 실시간으로 message라는 데이터의 값을 변경할 수 잇음)
v-bind 는 속성을 표현식에 동적으로 바인딩할 때 사용 / 축약형으로 :로 대체 가능 (<img :src="img.jpg" 와 같이 작성하면 이미지의 주소를 불러올 수 있음)

조건문 v-show vs v-if

v-show - 항상 렌더링되며 display: none 속성이 추가되고 사라짐으로써 화면에 보여지고 안보임.
v-if - 조건이 true 일 때 렌더링되고 false 일 때 삭제된다.

역할은 동일하지만 v-show는 초기 렌더링 비용이 높고 v-if는 토글 비용이 높으므로,
자주 변경이 되어아 햔다면 v-show, 자주 변경이 되지 않는다면 v-if를 사용.

또한 v-show<template>문법에서 사용이 불가하며,
v-ifv-else-if,v-else로 추가적인 조건을 생성 가능하다.

반복문 v-for

데이터에서 배열이나, 객체의 내용을 반복해서 출력할 때 v-for을 사용.
예를들어 배열의 이름이 stories이면 <li v-for="story in stories>stories의 내용을 각각 story로 하나씩 꺼내서 리스트로 나열하겠다는 뜻이며 객체도 마찬가지로 사용 가능하다.
여기서 배열이나 객체의 이름을 복수형의 의미를 담은 단어로 지으면 직관적으로 알아보기 쉽게 사용할 수 있다.

배열에서 데이터의 index를 표시해야 한다면, <li v-for="(story, index) in stories">로 for문을 작성하고, {{ index }}로 각각의 index를 출력할 수 있다.

객체는 key:value로 구성되어 있기 때문에 필요하다면, <li v-for="(story, key, index) in stories">와 같이 사용 가능.

v-on

자바스크립트로 처리하는 이벤트 핸들링을 v-on로 대체해 사용. / v-on@로 대체 가능함.
v-on=" "에서 따옴표 안에는 직접 자바스크립트를 사용 하거나, script단에서 만들어 놓은 methods를 사용할 수 있음.

보통 자바스크립트를 사용 시 submit을 하면 event.preventDefault()로 페이지가 새로고침돼서 날아가는걸 막는데 Vue에서 지원하는 @click.prevent로 대체할 수 있다.
이와 같은 종류의 수식어는 .prevent, .stop, .capture, .self가 있음.

methods vs computed

methods는 실행시 함수의 내용을 통해 결과가 바뀌게 할 때 사용할 수 있고,
computed는 이미 함수로 계산된 결과를 가져올 때 사용함.

필터

배열이나 객체에서 각각의 내용을 불러올 때 사용 가능
HTML 코드에 직접 작성하거나, methods, computed 등으로 사용 가능
이름 그대로 원하는 결과값을 필터링해 렌더링하는 것.

사용자 정의 필터도 사용 가능 (Vue.filter())
컴포넌트를 정의할 때와 비슷하지만 두번째 인자에 함수로 원하는 필터 내용을 삽입
HTML에 {{ name | filter-name }}과 같이 사용

Lodash 라이브러리를 사용해 도움을 받을 수도 있음

컴포넌트

Vue.js의 핵심 기능
기본 HTML 엘리먼트를 확장해 재사용이 가능하도록 캡슐화하는데 사용

생성 방법

  1. HTML단에 새로 만든 컴포넌트 작성

    //HTML
    <div class="container">
     <list></list>
    </div>
    //JavaScript
    <script type="text/javascript">
     Vue.component('list',{
         template: '<h1>Hello, World!</h1>'
     });
     new Vue({
         el: '.container'
     })
    </script>
    
  2. 스크립트단에서 모두 처리

    //JavaScript
    <script type="text/template" id="item-template">
     <h1>Hello, World!</h1>
    </script>
    <script type="text/javascript">
     Vue.component('list', {
         template: '#item-template'
     });
    </script>
    
  3. template태그 사용 (권장)

    //HTML
    <template id='item-template'>
     <h1>Hello, World!</h1>
    </template>
    //JavaScript
    <script type="text/javascript">
     Vue.component('list', {
         template: '#item-template'
     });
    </script>
    

같은 템플릿에서 다른 내용을 전달하고 싶을 때 props를 사용함
예시

//HTML
<div class='container'>
    <list writer="Jung"></list>
    <list writer="Kim"></list>
    <list writer="Lee"></list>
</div>
<template id='item-template'>
    <h1>{{ writer }}</h1>
</template>
//JavaScript
<script type="text/javascript">
    Vue.component('list', {
        props: ['writer'],
        template: '#item-template'
    });
    new Vue({
        el: '.container'
    })
</script>


'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31


다음 계획

  • JavaScript30 완료 (끝!)
  • Vue 공부하며 예제 만들어보기
  • Vue 심화 자료 포스팅
  • Nuxt 공부


'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

컴포넌트


컴포넌트란 무엇인가

기본 HTML 엘리먼트를 확장해 재사용 가능 코드를 캡슐화 하는데 사용
Vue 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트
경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수 있음

컴포넌트 사용하기

등록

//인스턴스 생성
new Vue({
    el: '#some-element',
})

//전역 컴포넌트 등록
Vue.component('my-component', {
    //옵션
})  

//HTML
<div id="example">
    <my-component></my-component>
</div>

//등록
Vue.component('my-component', {
    template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

//인스턴스 생성
new Vue({
    el: '#example'
})

//렌더링 후 결과
<div id="example">
    <div>사용자 정의 컴포넌트 입니다!</div>
</div>

지역 등록

컴포넌트를 components 인스턴스 옵션으로 등록함으로써 범위에서만 사용할 수 있는 컴포넌트 생성 가능

var Child = {
    template: '<div>사용자 정의 컴포넌트 입니다!</div>
}

new Vue({
    components: {
        'my-component': Child
    }
})

DOM 템플릿 구문 분석 경고

DOM을 템플릿으로 사용할 때 ( el 옵션을 사용하여 기존 콘텐츠가 있는 엘리먼트를 마운트 할 때), Vue는 템플릿 콘텐츠만 가져올 수 있기 때문에 HTML이 작동하는 방식에 고유한 몇 가지 제한 사항이 적용된다. 이는 브라우저가 구문 분석과 정규화한 후에 작동합니다. 가장 중요한 것은 <ul>, <ol>, <table><select>와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으며,<option>과 같이 특정 다른 엘리먼트 안에만 나타날 수 있습니다.
이러한 제한이 있는 엘리먼트가 있는 사용자 지정 컴포넌트를 사용하면 다음과 같은 문제가 발생할 수 있음

<table>
    <my-row>...</my-row>
</table>

이렇게 작성하면 <my-row>는 렌더링 시 에러를 발생함 이때 is를 사용

<table>
    <tr is="my-row"></tr>
</table>

이때 다음 세가지 중 하나에 포함되면 문자열 템플릿을 사용하는 경우에는 이러한 제한 사항이 적용되지 않음

  • <script type="text/x-template">
  • JavaScript 인라인 템플릿 문자열
  • .vue 컴포넌트

따라서 가능한 경우 항상 문자열 템플릿을 사용하는 것이 좋음

data는 반드시 함수

//HTML
<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

//JavaScript
var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 데이터는 기술적으로 함수이므로 Vue는 따지지 않지만
  // 각 컴포넌트 인스턴스에 대해 같은 객체 참조를 반환합니다.
  data: function () {
    return {
        counter: 0
       }
  }
})

new Vue({
  el: '#example-2'
})

컴포넌트 작성

컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위한 것이다.
Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로, events는 위로 라고 할 수 있음
=> 부모는 props로 자식에게 데이터를 넘기고, 자식은 events로 부모에게 메시지를 보냄

Props

Props로 데이터 전달하기

모든 컴포넌트 인스턴스는 범위가 있음.
즉, 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조 할 수 없고,
이 때 props 옵션을 사용해 하위 컴포넌트로 전달 가능함

Vue.component('child', {
    // props 정의
    props: ['message'],
    templage: '<span>{{ message }}</span>'
})
<child message="안녕"></child>

위의 코드에서 messageprops로 선언을 하면 “안녕” 이라는 결과가 출력된다.

camelCase vs kebab-case

Vue.component('child', {
  // JavaScript는 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- HTML는 kebab-case -->
<child my-message="안녕하세요!"></child>

주석에 쓴것과 같이 JS는 camelCase, HTML은 kebab-case로 작성

동적 Props

v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩 할 수 있음
데이터가 상위에서 업데이트 될 때마다 하위 데이터로도 전달된다.

<div>
    <input v-model="parentMsg">
    <br>
    <child v-bind:my-message="parentMsg"></child>
</div>

위와같이 코드를 작성하면 입력창에 입력하면 아랫줄에 같은 내용이 실시간으로 바인딩된다.

리터럴 vs 동작

리터럴 구문으로 문자열을 전달할 때와 숫자를 전달할 때

//문자열 "1" 전달
<comp some-prop="1"></comp>
//숫자 1 전달
<comp v-bind:some-prop="1"></comp>

단방향 데이터 흐름

모든 props는 하위 속성과 상위 속성 사이의 단방향 바인딩 형성
즉, 상위 속성이 업데이트되면 하위로 흐르지만, 반대는 안됨

우선 prop자체의 속성을 보면

  1. prop은 초기값을 전달하는데만 사용되며 하위 컴포넌트는 이후에 이를 로컬 데이터 속성으로 사용하기만 함
  2. prop은 변경되어야 할 원시 값으로 전달된다
    하위 컴포넌트 내부에서 prop을 변형하려고 시도하면 안되고, 변경하고 싶을 때 사용할 두가지 방법이 있음

  3. prop의 초기값을 초기값으로 사용하는 로컬 데이터 속성을 정의

    props: ['initialCounter'],
    data: function() {
     return { counter: this.initialCounter}
    }
    
  4. prop 값으로 부터 계산된 속성을 정의함

    props: ['size'],
    conputed: {
    normalizedSize: function() {
     return this.size.trim().toLowerCase()
     }
    }
    

Prop 검증

컴포넌트가 prop에 대한 요구사항을 지정할 수 있음
요구사항이 충족되지 않으면 Vue에서 경고를 내보냄
즉, prop을 문자열 배열로 정의하는 대신 유효성 검사 요구사항이 있는 객체 사용

Vue.component('example', {
    props: {
        // 기본 타입 확인 ('null'은 어느 타입이든 가능하는 뜻)
        propA: Number,
        // 여러개의 타입
        propB: [String, Number],
        // 문자열이며 꼭 필요할 때
        propC: {
            type: String,
            required: true
        },
        // 숫자이며 기본값 가짐
        propD: {
            type: Number,
            default: 100
        },
        // 객체/배열의 기본값은 팩토리 함수에서 반환
        propE: {
            type: Object,
            default: function () {
                return { message: 'hello' }
            }
        },
        // 사용자 정의 유효성 검사
        propF: {
            validator: function (value) {
                return value > 10
            }
        }
    }
})

type 종류

String
Number
Boolean
Function
Object
Array
또한 커스텀 생성자 함수가 될 수 있고, assertion(정확히 무슨의민지 모르겠음)은 instanceof 체크로 만들어 질 것
prop 유효성 검사가 실패하면 Vue는 콘솔 경고 생성

사용자 정의 이벤트

prop이 부모가 자식에게 데이터를 전달하는 것이라면, 사용자 정의 이벤트로 자식은 부모에게 문제를 알림

v-on을 이용한 사용자 지정 이벤트

모든 Vue 인스턴스는 다음과 같은 이벤트 인터페이스를 구현함

  • $on(eventName) - 이벤트 감지(자식 컴포넌트에서 보낸 이벤트 감지 x)
  • $emit(eventName) - 이벤트 트리거
    addEventListener, dispatchEvent와 별개

또한 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 직접 v-on을 사용하여 이벤트를 들을 수 있음

//HTML
<div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

//JavaScript
Vue.component('button-counter', {
    template: '<button v-on:click="increment">{{ counter }}</button>',
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
        increment: function () {
            this.counter += 1
            this.$emit('increment')
        }
    }
})

new Vue({
    el: '#counter-event-example',
    data: {
        total: 0
    },
    methods: {
        incrementTotal: function () {
            this.total += 1
        }
    }
})

이때 하위 컴포넌트가 외부에서 발생하는 것과 완전히 분리된다는 점을 유의해야 함

컴포넌트에 네이티브 이벤트 바인딩

컴포넌트의 루트 엘리먼트에서 네이티브 이벤트를 수신하려 할 때
v-on.native 수식자를 사용

<my-component v-on:click.native="doTheThing"></my-component>

사용자 정의 이벤트를 사용하여 폼 입력 컴포넌트 만들기

사용자 정의 이벤트는 v-model에서 작동하는 사용자 정의 입력을 만드는데도 사용 가능

<input v-model="something">
//위,아래 코드는 같음
<input
    v-bind:value="something"
    v-on:input="something = $event.target.value">

컴포넌트와 같이 사용하면 다음과 같이 된다

<custom-input
    :value="something"
    @input="value => { something = value }">
</custom-input>
  • value prop을 가진다
  • 새로운 값으로 input 이벤트를 내보냄

컴포넌트의 v-model 사용자 정의

기본적으로 컴포넌트의 v-modelvalue를 보조변수로 사용하고 input을 이벤트로 사용하지만
체크박스와 라디오 버튼과 같은 일부 입력 타입은 다른 목적으로 value 속성을 사용할 수 있음 => model 옵션 사용

//HTML
<my-checkbox v-model="foo" value="some value"></my-checkbox>

//JavaScript
Vue.component('my-checkbox', {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: {
        //다른 목적을 위해 `value` prop을 사용
        value: String
    },
    // ...
})

아래 코드와 같다

<my-checkbox
    :checked="foo"
    @change="val => { foo = val }"
    value="some value">
</my-checkbox>


'개발 > Vue.js' 카테고리의 다른 글

Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31
7. 리스트 렌더링(v-for, v-if)  (0) 2017.03.31

폼 입력 바인딩

기본 사용법


v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩 생성 가능
입력 유형에 따라 엘리먼트를 업데이트하는 방법을 자동으로 선택함
이때 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에는 주의해야 함

v-model은 모든 form 엘리먼트 초기 value, checked, selected 속성 무시,
컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다.

v-model는 한국어가 업데이트가 되지 않으므로 input을 사용해야 함.

문자열

<input v-model="message" placeholder="수정해보세요">
<p>메시지: {{ message }}</p>


 

박스에 내용을 넣으면 실시간으로 message에 바인딩되어 결과가 나타남

여러줄을 가진 문장

<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄 입력하세요"></textarea>

마찬가지로 message에 바인딩 되어 결과 나타남
이때 <textarea>{{ text }}</textarea> 는 작동하지 않음

체크박스

하나의 체크박스는 단일 boolean 값을 가짐

<input type="checkbox" id="checkbox" v-model="checked">
</label for="checkbox">{{ checked }}</label>

//HTML
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>체크한 이름: {{ checkedNames }}</span>

//JavaScript
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

라디오

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>

셀렉트

//HTML
<select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>선택함: {{ selected }}</span>

//JavaScript
new Vue({
    el: '...',
    data: {
        selected: ''
    }
})

<select v-model="selected" multiple>을 쓰면 다중선택 가능

v-for를 이용한 동적 욥션 렌더링

//HTML
<select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
    </option>
</select>
<span>Selected: {{ selected }}</span>

//JavaScript
new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
})

값 바인딩하기


라디오, 체크박스, 셀렉트 옵션의 경우 v-model 바인딩 값은 보통 정적인 문자열이다

<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle">

<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

그러나 동적 속성에 바인딩 할때는 v-bind를 사용하면 되고, 이것을 사용하면 입력값을 문자열이 아닌 값에 바인딩 할 수 있다.

체크박스

//HTML
<input type="checkbox"
           v-model="toggle"
           v-bind:true-value="a"
           v-bind:false-value="b"
          >

//JavaScript
// 체크 하면:
vm.toggle === vm.a
// 체크하지 않으면:
vm.toggle === vm.b

라디오

//HTML
<input type="radio" v-model="pick" v-bind:value="a">

//JavaScript
vm.pick === vm.a

셀렉트 옵션

//HTML
<select v-model="selected">
    <!-- inline object literal -->
    <option v-bind:value="{ number: 123 }">123</option>
</select>

//JavaScript
typeof vm.selected 
vm.selected.number

수식어


.lazy

기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 함
.lazy를 추가해 change이벤트 이후에 동기화 할 수 있음

<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg>

뭔말인지 모르겠다..

.number

사용자 입력이 자동으로 숫자로 바뀌게 하려면 다음과 같이 사용

<input v-model.number="age" type="number">

.trim

input을 자동으로 trim 하려면 다음과 같이 하면 된다.

<input v-model.trim="msg">

추가적으로 재사용 가능한 input을 컴포넌트로 만들 수 있고 v-model에도 작동함

'개발 > Vue.js' 카테고리의 다른 글

Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31
7. 리스트 렌더링(v-for, v-if)  (0) 2017.03.31
6. 조건부 렌더링(v-if, v-else-if, v-else, v-show)  (0) 2017.03.30

이벤트 핸들링

이벤트 청취


v-on 디렉티브를 사용, DOM 이벤트를 듣고 트리거 될 때 JavaScript 실행 가능

//HTML
<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>버튼 클릭 횟수는 {{ counter }} 입니다.</p>
</div>

//JavaScript
var example1 = new Vue({
    el: '#example-1',
    data: {
        counter: 0
    }
});

메소드 이벤트 핸들러


많은 이벤트 핸들러의 로직은 복잡할 것이므로, Javascript를 v-on속성값으로 보관하는 것은 간단하지 않음. 이 때문에 v-on이 호출하고자 하는 메소드의 이름을 받는 이유이다

//HTML
<div id="example-2">
    <button v-on:click="greet">Greet</button>
</div>

//JavaScript
var example2 = new Vue({
    el: '#example-2',
    data: {
        name: 'Vue.js'
    },
    methods: {
        greet: function (event) {
            alert('Hello ' + this.name + '!' )
            if (event) {
                alert(event.target.tagName)
            }
        }
    }
})
example2.greet()

인라인 메소드 핸들러


//HTML
<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>

//JavaScript
new Vue({
    el: '#example-3',
    methods: {
        say: function (message) {
            alert(message)
        }
    }
})

때로 인라인 명령문 핸들러에서 원본 DOM 이벤트에 엑세스 해야할 수도 있음
$event를 사용함

//HTML
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
    Submit
</button>

//JavaScript
methods: {
    warn: function (message, event) {
        if (event) event.preventDefault()
        alert(message)
    }
}

이벤트 수식어


이벤트 핸들러 내부에서 event.preventDevault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이다.
메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋을 것같다

고 문서에 써있는데 무슨말인지 잘 모르겠지만, 저걸 해결하기 위해 v-on 이벤트에 이벤트 수식어를 제공함 

- .stop
- .prevent
- .capture
- .self
- .once

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>
<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>
<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉 내부 엘리먼트를 대상으로 한  이벤트가 해당 엘리먼트에서 처리되기 전에 처리됩니다. -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>
<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

키 수식어


키보드 이벤트를 청취할 때 v-on에 키 수식어를 추가할 수 있음
키코드를 전부 기억하는 것은 어렵기 때문에 Vue는 일반적으로 사용되는 키의 별칭을 제공함

<!-- keyCode가 13일 때만 vm.submit()을 호출합니다 -->
<input v-on:keyup.13="submit">
<!-- 위와 같습니다 -->
<input v-on:keyup.enter="submit">
<!-- 약어 사용도 가능합니다 -->
<input @keyup.enter="submit">
  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta (맥에서 commad, 윈도우는 윈도우키)
    마우스 수식어
  • .left
  • .right
  • .middle
    위에 없는 별칭을 만들고 싶으면 아래와 같이 하면 된다.
// v-on:keyup.f1 이 가능합니다
Vue.config.keyCodes.f1 = 112

HTML로 된 리스너를 사용하는 이유


HTML로 된 리스너를 사용하는 이유를 모른다면 왜 HTML에 JS요소를 넣어서 쓰냐 하고 이해하기 힘들 수 있다. 다음은 그 이유다

  1. HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽다
  2. JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않고, 이렇게 하면 테스트가 쉬워짐
  3. ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거되어 이벤트 제거에 대한 걱정이 필요 없어집니다.


리스트 렌더링

v-for


v-for 디렉티브를 사용해 배열기반 리스트 렌더링
item in items 형태로 특별한 문법이 필요험(items은 원본 데이터 배열, item은 반복되는 배열의 값) / in 대신 of 사용 가능

기본 사용방법

//HTML
<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

//JavaScript
var example1 = new Vue({
    el: "#example-1",
    data: {
        items: [
            { message: "Foo" },
            { message: "Bar" }
        ]
    }
})

위의 코드는 렌더링 되어 아래와 같은 결과가 나온다

  • Foo
  • Bar

v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있고 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공

//HTML
<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>

//JavaScript
var example2 = new Vue({
    el: "#example-2",
    data: {
        parentMessage: "Parent",
        items: [
            { message: "Foo" },
            { message: "Bar" }
        ]
    }
})

결과는 아래와 같다
- Parent - 0 - Foo
- Parent - 1 - Bar

v-for 템플릿

템플릿 v-if와 마찬가지로, 태그를 사용해 여러 엘리먼트의 블럭을 렌더링 할 수 있음

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divivder"></li>
    </template>
</ul>

v-for과 객체

v-for을 사용하여 객체의 속성을 반복할 수도 있음

//HTML
<ul id="repeat-object" class="demo">
     <li v-for="value in object">
         {{ value }}
    </li>
</ul>

//JavaScript
new Vue({
    el: "#repeat-object",
    data: {
        object: {
            firstName: "John",
            lastName: "Doe",
            age: 30
        }
    }
})

결과
- John
- Doe
- 30

Range v-for

v-for은 정수를 사용할 수 있음. 이 경우 템플릿을 여러번 반복 함

<div>
    <span v-for="n in 10">{{ n }}</span>
</div>

결과
1 2 3 4 5 6 7 8 9 10

컴포넌트와 v-for

나중에 다시 작성 예정



v-for와 v-if

v-forv-if가 같은 노드에 존재하면 v-for이 우선 순위를 가짐.
둘을 같이 쓰는건 아래 코드와 같이 일부 항목만 렌더링 할때 유용함

<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
</li>

위의 경우는 완료되지 않은 todo가 렌더링 된다

엘리먼트를 전부 렌더링 하고, 조건문으로 보여지고 싶은 부분만 추리고 싶으면
v-if를 래퍼 엘리먼트로 옮기면 된다

<ul v-if="shouldRenderTodos">
    <li v-for="todo in todos">
        {{ todo }}
    </li>
</ul>

key


v-for에서 렌더링된 엘리먼트 목록을 갱신할 때 “in-place patch” 전략 사용
데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM요소를 이동하는 대신 Vue는 각 요소를 적절한 위치에 패치하고 해당 인덱스에서 렌더링할 내용을 반영하는지 확인함

이때 재정렬 할 수 있도록 각 항목에 고유속성 key를 제공해야 함

<div v-for="item in items" :key="item.id">
    <!-- content -->
</div>

v-for에는 항상 key를 추가하는 것이 좋음
예외 : 반복되는 DOM 내용이 단순하지 않거나, 의도적인 성능 향상을 위해 기본 동작에 의존하는 경우 => 그냥 복잡하게 반복문을 썼을때를 제외하고는 key를 쓰라는 것.

배열 변경 감지


변이 메소드

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
    ps. 루비랑 똑같다

배열 대체

  • filter()
  • concat()
  • slice()
    위 세가지 메소드를 사용하면 항상 새 배열을 반환
    이때 Vue는 기존 DOM을 버리고 새로 렌더링을 하는것이 아니라
    겹치는 객체가 포함된 다른 배열로 대체해 효율적임

주의

JavaScript의 제한으로 Vue는 2가지 경우를 감지할 수 없음
1. 인덱스로 배열에 있는 항목을 직접 설정하는 경우 vm.items[indexOfItem] = newValue
=> Vue.set(example1.items, indexOfItem, newValue) 사용
2. 배열의 길이를 수정하는 경우 vm.items.length = newLength
=> splice 사용

조건부 렌더링

v-if


Vue에서는  v-if 디렉티브를 사용해 조건문을 작성
여느 다른 언어의 조건문과 같이  v-if , v-else-if, v-else 사용

template에 v-if를 갖는 조건부 그룹 만들기

 v-if 는 디렉티브이기 때문에 하나의 엘리먼트에 추가 해야함
여러개의 엘리먼트를 전환할 때는 보이지 않는 래퍼 역할을 하는 엘리먼트에  v-if 를 사용할 수 있고 렌더링 결과는 엘리먼트는 포함되지 않음

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

v-else

 v-else 디렉티브를 사용해  v-if 에 대한 “else 블록”을 나타낼 수 있음

<div v-if="Math.random() > 0.5">
    you can see me
</div>
<div v-else>
    you can't see me
<div>

v-else-if

 v-else-if  v-if 에 대한 “else if 블록” 역할, 여러 개 사용 가능

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>

순서는 v-if > v-else-if > v-else

key를 이용한 재사용 가능한 엘리먼트 제어

Vue는 효율적으로 엘리먼트를 렌더링하려 시도하며, 종종 처음부터 렌더링을 하지 않고 다시 사용함.
아래 예는 사용자가 여로 로그인 유형을 전환할 수 있도록 허용하는 경우

<template v-if="loginType === 'username'">
    <label>사용자 이름</label>
    <input placeholder="이름을 입력하세요">
</template>
<template v-else>
    <label>이메일</label>
    <input placeholder="이메일 주소를 입력하세요">
</template>

위의 코드에서 로그인타입을 바꿔도 원래 작성한 내용은 유지되는데
이때  placeholder 속성 뒤에 key=”username-input”, key=”email-input” 을 각각 적어주면 로그인 유형 변경시 내용도 초기화가 된다

v-show


엘리먼트를 조건부로 표시하기 위한 또 다른 옵션은  v-show 디렉티브이다

<h1 v-show="ok">안녕</h1>

위와같이 사용하며  v-if 와의 차이점은  v-show 가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있고, display CSS 속성을 토글해 나타내고 감춤

v-if vs v-show


 v-if 는 조건부 블럭 안의 내용에 따라 제거되고 만들어지고
 v-show 는 우선 렌더링이 되고 CSS 속성으로 감추고 보여줌
따라서  v-if 는 토글 할 때의 비용이 높고,  v-show 는 초기 렌더링 비용이 높으므로
자주 바뀐다면  v-show , 바뀌지 않는다면  v-if 를 권장함

v-if와 v-for


뒤에 나오겠지만  v-if 보다  v-for 이 높은 우선순위를 가지고 있음

클래스와 스타일 바인딩(Class and Style Bindings)

데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용되며  v-bind  로 처리함


HTML 클래스 바인딩하기(HTML Class Bindings)


객체 구문

클래스를 동적으로 토글하기 위해  v-bind:class 에 객체 전달

<div class="static" v-bind:class="{ active : isActive }"></div>
data: {
    isActive: true
}

위의 코드에서 볼수있다시피 일반  class  속성과  v-bind:class 를 같이 쓸수 있으며
이때 data는 참 속성으로 active에 렌더링되어 아래와 같은 코드가 된다

<div class="static active"></div>

객체를 반환하는 계산된 속성(computed)에도 바인딩 할 수 있으며, 이것이 일반적이며 가장 강력한 방법이다.

//HTML
<div v-bind:class="classObject"></div>

//JavaScript
data: {
    isActive: true,
    error: null
},
    computed: {
    classObject: function() {
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal',
            }
        }
    }

위의 예제 코드에서 computed > classObject의 함수 안에서 계산 후 반환값으로  active 와  ‘text-danger’ 값을 정하고 HTML의  v-bind:class 에 전해주면 렌더링되어 원하는 결과를 얻을 수 있다.

배열 구문

v-bind:class=”[ ]” 와같이 배열로 담을 수 잇고 이때는  data 에 참, 거짓 속성이 아닌 원하는 클래스명의 이름을 적어주면 그대로 렌더링 되어 결과로 나타남. 아래의 예제로 이해를 해보자

//HTML
<div v-bind:class="[activeClass, errorClass]"></div>

//JavaScript
data: {
    activeClass: 'active',
    errorClass: 'text-danger'
}
<div class="active text-danger"></div>

또한 조건부 토글도 가능하며 이는 삼항 연산자를 사용함

<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[isActive && activeClass, errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

이런식으로도 줄여서 작성이 가능하다고 함
위에서  isActive 가 참이면  active 클래스가 적용되고, 거짓이면  error 클래스가 적용됨

컴포넌트(Component)와 함께 사용하는 방법

-컴포넌트란?
기본 HTML 엘리먼트를 확장해 재사용 가능한 코드를 캡슐화 하는데 사용

컴포넌트를 어떤식으로 생성을 하나보면

Vue.component('my-component', {
    template: '<p class="foo var">Hi</p>'
})

이렇게 컴포넌트를 정의를 하면 HTML에서 작성할 수 있음

<my-component class="baz boo"></my-component>

위와 같이 작성을 하면 렌더링 되어 아래 코드로 나타남

<p class="foo bar baz boo">Hi</p>

클래스 바인딩도 동일함

<my-component v-bind:class=" { active: isActive }"></my-component>

여기서  isActive 가 참일 때 렌더링 된 HTML은 아래 코드와 같다

<p class="foo bar active">Hi</p>

인라인 스타일 바인딩


객체 구문

 v-bind:style 객체 구문은 CSS 처럼 보이지만 JavaScript 객체이다
속성 이름에는 camelCasekebab-case를 사용해야함
camelCase는 들어봤는데 kebab-case는 처음 들어봐서 검색을 해봄

-camelCase에서 대문자 대신에 소문자로 고치고 - 를 붙인다
camelCase => ‘camel-case’
이때 kebab-case를 사용하려면 따옴표를 함께 사용해야 함

<div v-bind:style=" { color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
    activeColor: 'red',
    fontSize: 30
}

배열 구문

 v-bind:style 에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러 개의 스타일 객체를 사용 할 수 있음

<div v-bind:style="[baseStyles, overridingStyles]">

자동 접두사

 v-bind:style 에 브라우저 벤더 접두어(ex: -webkit-, -moz- 등등)가 필요한 CSS 속성을 사용하면 Vue는 자동으로 해당 접두어를 감지해 스타일을 적용함

계산된 속성과 감시자

계산된 속성(Computed Properties)



템플릿 내의 표현식은 단순한 연산에만 사용해야함
복잡해지면 유지보수가 어려워짐

예제

//HTML
<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>뒤집히도록 계산된 메시지: "{{ reversedMessage }}"</p>
</div>
//JavaScript
var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

결과
원본 메시지: “안녕하세요” => “요세하녕안”
이때 계산된 속성  reversedMessage 를 선언
return 뒤의 제공되는 함수는  vm.reversedMessage 속성에 대한 getter 함수로 사용

이 때 getter 함수란 값을 반환하기 위해 사용되는 함수
setter 함수란 값을 입력하기 위해 사용되는 함수이다.

계산된 캐싱(Computed Caching) vs 메소드(Methods)

계산된 속성 대신 methods로 정의 가능, 두가지의 접근 방식은 서로 동일함
이때 차이점은 계산된 속성은 종속성에 따라 캐시된다
무슨말인지 알아보면
계산된 속성(computed)은 종속성 중 일부가 변경된 경우에만 다시 계산
위의 예에서  message 가 변경되지 않는 한,  reversedMessage 에 대한 다중 접근은 함수를 다시 수행할 필요 없이 이전에 계산된 결과를 즉시 반환함
만약 computed 안에 실시간으로 날짜를 나타내는 함수  Date.now() 를 넣는다면 업데이트 되지 않음!
하지만 methods 호출은 렌더링 할 때마다 항상 호출

-캐싱이 필요한 이유는?
캐싱하지 않으면 시간이 많이 소요되는 A 속성이 getter를 필요한 것보다 더 > 많이 실행하게 되어 불필요한 작업을 실행함.
따라서 캐싱이 필요하지 않을때는 methods를 사용

계산된 속성(Computed) vs 감시된 속성(Watched)

<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
    }
  }
})

위의 코드를 보면  firstName 과  lastName 의 코드가 중복되므로 효율적이지 못함
이때는 computed를 이용한다면 아래와 같이 한줄로 작성 가능해짐

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

계산된 Setter

computed는 기본적으로 getter만 가지고 있지만 필요한 경우 setter를 제공함

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

 vm.fullName = ‘take u’ 를 실행하면 set 의  firstName 과  lastName 이 재설정되며 get에의해 새로 출력됨

감시자(Watchers)



대부분은 computed가 더 적합하지만 일부는  watch 가 필요한 경우가 있음
데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행할 때 사용

<div id="watch-example">
  <p>
    yes/no 질문을 물어보세요:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 이미 Ajax 라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이 있기 떄문에, -->
<!-- Vue 코어는 다시 만들지 않아 작게 유지됩니다. -->
<!-- 이것은 또한 당신이 사용하기 친숙할 것을 선택할 수 있는 자유를 줍니다. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '질문을 하기 전까지는 대답할 수 없습니다.'
  },
  watch: {
    // 질문이 변경될 때 마다 이 기능이 실행됩니다.
    question: function (newQuestion) {
      this.answer = '입력을 기다리는 중...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce는 lodash가 제공하는 기능으로
    // 특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
    // 이 경우, 우리는 yesno.wtf/api 에 액세스 하는 빈도를 제한하고,
    // 사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠 때까지 기다리길 바랍니다.
    // _.debounce 함수(또는 이와 유사한 _.throttle)에 대한
    // 자세한 내용을 보려면 https://lodash.com/docs#debounce 를 방문하세요.
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = '질문에는 일반적으로 물음표가 포함 됩니다. ;-)'
          return
        }
        this.answer = '생각중...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = '에러! API 요청에 오류가 있습니다. ' + error
          })
      },
      // 사용자가 입력을 기다리는 시간(밀리세컨드) 입니다.
      500
    )
  }
})
</script>

예제 코드인데 결과를 어케띄우는지 모르겠당..
궁금하다면 https://kr.vuejs.org/v2/guide/computed.html#

아무튼 위의 코드에서  watch 의 사용으로
비동기 연산(API)을 수행하고,
우리가 그 연산을 얼마나 자주 수행하는지 제한하고,
최종 응답을 얻을 때까지 중간 상태를 설정

'개발 > Vue.js' 카테고리의 다른 글

6. 조건부 렌더링(v-if, v-else-if, v-else, v-show)  (0) 2017.03.30
5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23

+ Recent posts