Posis

이번 포스트에서는 v-model 수식어에대해서 알아보겠습니다. v-model 수식어 1. .lazy 기본적으로, v-model은 각 input 이벤트 후 입력과 데이터를 동기화 합니다. lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있습니다. 즉, 글자 또는 문장을 입력한 후에 Enter 또는 포커스가 사라졌을때 문구가 나타나게 됩니다. {{ msg }} 2. .number 사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다. {{ msg }} 숫자를 받아서 로직을 처리해야 할 경우에 유용하게 쓰일 것 같습니다. 3. .trim 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하는 트림처리가 되길 바란다면,..

이번 포스트에서는 폼 입력 바인딩에 대해서 다뤄보겠습니다. v-model v-model 디렉티브를 사용하여 input, checkbox 요소들에 양방향 데이터 바인딩을 생성할 수 있습니다. v-model 디렉티브는 input type 요소를 변경하는 올바른 방법을 자동으로 선택합니다. {{ msg }} 이처럼 input 태그에 v-model을 사용함으로써 msg의 데이터가 실시간으로 변해서 화면에 출력되는 것을 볼 수 있습니다. 하지만 여기에도 치명적인 단점이 존재합니다. 영어는 바로바로 업데이트되지만 한글은 모음과 자음이 결합했을 때 비로소 화면에 출력된다는 것입니다. 하지만 한글도 영어와 같이 한 글자씩 출력할 수 있게 할 수 있습니다. {{ msg }} @input을 통해서 msg에 바로 데이터를 ..

이번 포스트에서는 이벤트 수식어에 대해서 다뤄보겠습니다. 이벤트 수식어 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메서드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메서드만 사용할 수 있으면 더 좋습니다. 이 문제를 해결하기 위하여, Vue.js는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사입니다. [사용 방법] Google 위 예제처럼 @click. prevent(함수 안에 event.preventDefault와 같은 기능)로 체이닝 하면 사용하실 수 있습니다. 다른 수식어 들은 간단한 설명만 작성하겠습니다. ..

이번 포스트에서는 이벤트 핸들링에 대해서 알아보겠습니다. 이벤트 리스너 v-on 디렉티브는 @기호(약어)로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용합니다. v-on:click="" == @click="" Click! {{ count }} 위 예제는 버튼을 클릭하면 숫자가 1씩 오르는 예제입니다. button태그에 @click 이벤트에 increase 메서드를 연결하여 사용합니다. 메서드 이벤트 핸들러 JavaScript에서는 많은 이벤트 핸들러가 존재합니다. 하지만 로직이 복잡하기 때문에 JavaScript로 넘겨주기 어렵습니다. 그렇기 떄문에 이를 넘겨주기 위해서 함수의 파라미터에 event를 추가해 줍니다. handler(event)의 event는 다른 단어를 사용..

이번 포스트에서는 리스트 렌더링 v-for에 대해서 다뤄보겠습니다. v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. {{ framework }} v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭입니다. 또한 v-for를 사용할 때는 :key 속성을 사용해야 합니다. :key key는 Vue가 노드를 식별하는 일반적인 메커니즘이기 때문에 v-for와 특별히 연관되지 않는 다른 용도로도 사용됩니다. v-for의 index v-for 디렉티브는 item in items에서 (item, index) in items 형태로 작성한다면 다음과 같이 나타납니다. ..

이번 포스트에서는 Vue.js에 조건부 렌더링, v-if와 v-show에 대해서 알아보겠습니다. v-if v-if 디렉티브는 조건에 따라 블록을 렌더링 할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 됩니다. Click Hello Vue.js!! isShow는 true이고 Click 버튼을 클릭하면 true와 false가 매번 바뀌는 예제입니다. 첫 화면에는 isShow가 true이기 때문에 DOM에 나왔고 클릭 후에는 h1태그가 으로 변환됩니다. v-else v-if에서 조건이 맞지 않는다면 v-else가 있는 태그가 DOM에 표시됩니다. Click Hello Vue.js!! Goodbye Vue.js!! // 생략 isShow가 true일 때 'Hello Vue.js!..