Vue.js에서 `v-bind`와 `v-model` 디렉티브는 각각 어떤 용도로 사용되며, 둘의 주요 차이점은 무엇인지 설명해 주세요.

v-bind와 v-model은 Vue.js에서 데이터를 HTML 요소와 연결하는 데 사용되는 디렉티브입니다.

v-bind는 주로 HTML 속성에 데이터를 바인딩하는 데 사용됩니다. 예를 들어, 이미지의 src 속성이나 버튼의 disabled 속성 등을 데이터 속성과 연결할 수 있습니다. 이는 단방향 바인딩으로, 데이터가 변경되면 속성 값이 업데이트되지만, 속성 값이 변경되어도 데이터는 변경되지 않습니다.

반면, v-model은 주로 폼 요소(input, textarea, select 등)와 데이터를 양방향으로 바인딩하는 데 사용됩니다. 사용자가 폼 요소에 값을 입력하면 데이터가 업데이트되고, 데이터가 변경되면 폼 요소의 값도 업데이트됩니다. v-model은 내부적으로 v-bind와 이벤트 리스너를 사용하여 양방향 데이터 바인딩을 구현합니다.

따라서 주요 차이점은 v-bind는 단방향 바인딩, v-model은 양방향 바인딩이라는 점입니다. v-bind는 속성 값을 데이터에 연결하는 데 사용되고, v-model은 폼 요소의 입력 값과 데이터를 동기화하는 데 사용됩니다.