Vue 문서에서 드래그 가능한 구성 요소를 구현하는 방법

Vue는 프런트 엔드 개발을 단순화하기 위한 풍부한 구성 요소와 도구를 제공하는 매우 인기 있는 오픈 소스 JavaScript 프레임워크입니다. 특히 유용한 구성 요소 중 하나는 드래그 가능한 구성 요소입니다. 이 기사에서는 Vue 문서에서 드래그 가능한 구성 요소의 구현을 소개합니다.

Vue는 드래그 기능을 구현하기 위해 draggable이라는 플러그인을 제공합니다. 이 플러그인은 Vue의 모든 요소에 드래그 가능한 기능을 추가할 수 있으며, 드래그 시 이동 범위 제한 및 선택적 정렬과 같은 고급 기능을 지원합니다.

이번 글에서는 Vue-cli와 npm을 사용해 프로젝트를 생성하고 관리해보겠습니다. Vue-cli는 Vue 기반 애플리케이션을 빠르게 만들 수 있는 공식적으로 제공되는 Vue 스캐폴딩 도구입니다.

먼저 명령줄에서 다음 명령을 실행하여 Vue-cli를 설치합니다.

npm install -g vue-clinpm install -g vue-cli

接下来，我们将使用Vue-cli创建一个新的Vue项目：

vue init webpack drag-and-drop

这个命令将使用webpack作为构建工具，创建一个名为drag-and-drop的新Vue项目。在此期间，您可以选择是否安装vue-router、ESLint等其他扩展功能。

安装完成后，可以使用以下命令进入项目所在目录：

cd drag-and-drop

接下来，我们需要安装draggable插件：

npm install vuedraggable

다음으로 Vue-cli를 사용하여 새 Vue 프로젝트를 만듭니다.

vue init webpack 드래그 앤 드롭

이 명령은 webpack을 빌드 도구로 사용하여 드래그 앤 드롭이라는 새 Vue 프로젝트를 생성합니다. 이 기간 동안 vue-router 및 ESLint와 같은 다른 확장 프로그램을 설치할지 여부를 선택할 수 있습니다.

설치가 완료된 후 다음 명령을 사용하여 프로젝트가 있는 디렉터리를 입력할 수 있습니다.

cd drag-and-drop

다음으로 드래그 가능한 플러그를 설치해야 합니다. -in:

npm install vuedraggable<p></p>이렇게 하면 드래그 가능한 플러그인의 최신 버전이 설치됩니다. <p></p>이제 Vue 구성 요소에서 드래그 가능한 플러그인을 사용할 수 있습니다. 드래그 가능한 구성 요소를 사용하는 방법을 보여주기 위해 할 일 목록이 포함된 간단한 애플리케이션을 만들어 보겠습니다. 사용자는 작업을 드래그하여 작업 목록을 재정렬할 수 있습니다. <p></p>src/comComponents/TodoList.vue 파일을 열고 다음 코드를 추가하세요. <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;h2&gt;待办事项列表&lt;/h2&gt; &lt;draggable v-model=&quot;tasks&quot;&gt; &lt;div v-for=&quot;(task,index) in tasks&quot; :key=&quot;index&quot;&gt; &lt;input type=&quot;checkbox&quot; v-model=&quot;task.completed&quot;&gt; &lt;span&gt;{{ task.title }}&lt;/span&gt; &lt;/div&gt; &lt;/draggable&gt; &lt;button @click=&quot;addTask()&quot;&gt;添加任务&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import draggable from 'vuedraggable'; export default { name: 'TodoList', components: { draggable, }, data() { return { tasks: [ { title: '完成Vue项目', completed: false }, { title: '阅读Vue文档', completed: true }, { title: '学习JavaScript', completed: false }, ], }; }, methods: { addTask() { this.tasks.push({ title: '新增任务', completed: false, }); }, }, }; &lt;/script&gt;</pre><div class="contentsignin">로그인 후 복사</div></div></p>이 구성 요소는 작업 목록이 포함된 카드를 정의합니다. 우리는 드래그 가능한 구성 요소를 사용하여 각 작업을 드래그 가능하게 만듭니다. <p></p>이 예에서는 v-model 지시문을 사용하여 작업 배열을 바인딩합니다. 이는 작업을 드래그하여 작업 순서를 변경하여 이 배열을 재정렬할 수 있음을 의미합니다. <p></p>"작업 추가" 버튼도 볼 수 있습니다. 이 버튼을 클릭하면 작업 배열에 새 작업이 추가됩니다. 🎜🎜또한 완료되지 않은 작업 수를 계산하기 위해 계산된 속성을 사용했습니다. 🎜🎜마지막으로 애플리케이션에 TodoList 구성 요소를 추가해야 합니다. 🎜🎜src/App.vue 파일을 열고 다음 코드를 추가하세요. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;TodoList /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import TodoList from '@/components/TodoList'; export default { name: 'App', components: { TodoList, } }; &lt;/script&gt;</pre><div class="contentsignin">로그인 후 복사</div></div>🎜이 구성 요소는 애플리케이션을 정의하고 TodoList 구성 요소를 페이지에 추가합니다. 🎜🎜축하합니다. Vue를 사용하여 드래그 앤 드롭으로 정렬할 수 있는 할 일 목록을 성공적으로 만들었습니다. 🎜🎜Vue-cli 및 드래그 가능한 플러그인은 강력한 Vue 애플리케이션을 구축하기 위한 강력한 도구입니다. 하지만 이 글에서는 Vue의 드래그 앤 드롭 기능을 실제 애플리케이션에서 사용하고 싶다면 필요에 맞게 적용하고 수정해야 한다는 점을 참고하시기 바랍니다. 🎜</p>

위 내용은 Vue 문서에서 드래그 가능한 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!