Vue.js

#해시 태그 기능은 게시물을 구현할 때 거의 빠지지 않고 사용되는 기능이라고 할 수 있다. 태그를 구현하는 방법에는 여러가지가 있지만, 위의 GIF와 같이 동적으로 태그를 생성하는 디자인이 가장 많이 사용된다고 할 수 있다. 티스토리에서도, Velog에서도 이와 같은 방식으로 해시 태그 기능을 제공하고 있다. 내가 진행하고 있는 프로젝트에서도 아래의 요구 사항을 충족하는 태그 기능을 구현해야했다. #을 입력하고 스페이스바를 누르면 태그를 생성 (최대 5개까지만 입력 가능) 생성된 태그를 눌렀을 때 & 입력이 없는 상태에서 Backspace를 눌렀을 때 태그 삭제 드래그 앤 드롭으로 순서 변경 가능하도록 1. #을 입력하고 스페이스바를 누르면 태그 생성 태그의 목록들을 보여주기 위한 template 코드는..

vue에서 제공하는 v-model은 input, textarea, select 등의 구성요소에서 양방향 바인딩을 구현하는 데 사용될 수 있다. v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다. v-bind : 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용 v-on : 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용 사용자 이벤트에 의해 실행된 뷰 메서드(methods) 함수의 첫 번째 인자에는 해당 이벤트(event)가 들어온다 HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다 input 태그에는 value / input checkbox 태그에는 checked / change select 태그에는 val..