Django의 Vue, 섹션 1

참고: 이 강좌는 Django와 Vue의 이전 버전을 사용한 지 몇 년이 되었습니다.나는 현재 그것을 조회하고 갱신할 충분한 시간이 없지만, 만약 누군가가 역도를 하고 싶다면, 나는 기꺼이 합작할 것이다.지금까지 이 글들은 이러한 개념을 이해할 수 있어야 하지만 코드는 현재의 Vue나 Django 문서와 일치하지 않습니다.
해냈어.이거 무서워, 어려워, 무서워, 내가 해냈어.나는 이미 Django로 한동안 서버 사이드 웹 응용 프로그램을 만들었지만, 나는 멀리서shwoopy 전단,javascript가 구동하는 한 페이지 응용 프로그램을 보면서 언젠가는 내가 교과서를 배울 것이라고 말해 보았다.그래서 지난주에 나는 "젠장, 내가 물건을 만들고 있어!"라고 말했다.이것은 내가 전통적으로 어떤 것도 배우는 방식이 아니다. 이것은 내가 처음으로 심수구에서 잠수를 통해 0급에서 배운 것이다.나는 그것이 매우 잘 작동한다고 생각한다. 나는 내가 배운 새로운 생각을 더욱 안정적인 것으로 공고히 하는 데 도움을 주기 위해 교과서를 공유하고 싶다.따라서 더 이상 말할 필요가 없습니다. 다음은 제가 Django REST 백엔드에서 지원하는 Vue 응용 프로그램을 만드는 강좌입니다.첫 번째 섹션에서는 Vue 단자만 설정합니다.두 번째 부분은 가장 어려운 부분, 즉 데이터 모델을 구축하는 것이다.마지막으로 세 번째 섹션은 Django 백엔드입니다.이 강좌는 자바스크립트 문법에 대한 실용적인 지식을 갖추고 있다고 가정하지만, 관련 인프라 시설을 설명하고자 합니다.시작합시다.

1.OverVue

Vue.js 는 더 실시간, 더 즐거운 사용자 경험을 중심으로 디자인된 일련의 프런트엔드 프레임워크 중 하나로 백그라운드에서 DOM 요소와 비동기 서버 업데이트를 실시간으로 업데이트하며 전체 페이지를 계속 다시 불러올 필요가 없다.나는 개인적으로 그들이 React와 Angular, 그리고 Elm과 다른 사람들에게서 가장 좋은 것을 얻고 좋은 방식으로 그것들을 결합시켰다고 생각한다.적어도 이것은 나의 관점이다. 나는 꼬박 일주일 동안 전단 프레임워크 경험을 가지고 있다.

2. 설정

우리가 해야 할 일은 모듈 귀속 등을 처리하기 위해 웹 팩을 사용할 것이다.웹 팩은 나에게 기본적으로 여전히 사람을 속이는 마법이기 때문에 나는 이 일을 완성하기 위해 충분히 설명할 것이다.우리가 먼저 필요로 하는 것은 vue-cli 공구다.이것은 우리의 생활을 아름답게 할 것이다. 주로 우리를 위해 웹 페이지와 다른 일을 설정하는 것이다.하지만 노드와 NPM이 필요합니다.

For those of you more used to Python and Django, NPM is kind of like pip, if pip had some of the abilities of the standard Django manage.py.

$ npm install -g vue-cli
...
$ vue init NdagiStanley/vue-django todoapp
...

우리는 우리의 vue 프로젝트를 위해 Github에서 온 템플릿을 사용할 것입니다. 명령에서 이 점을 알 수 있습니다.너는 그것을 볼 수 있다here.제시를 통해 그것이 제기한 모든 문제에 대답하다.완료되면 새 프로젝트 폴더가 있어야 합니다.우리는 잠시 후에 안의 대부분 내용을 검사할 것이니 당황하지 마라.

$ cd todoapp
$ npm install

이 점에서git 저장소를 마음대로 시작할 수도 있다.나는 이 일을 너에게 남겨 주겠다.지금 중요한 일이 좀 있어서요.main.js는 응용 프로그램의 실제 실례화된 파일입니다.Vue 응용 프로그램은 복잡한 작업을 단순화하기 위해 결합된 구성 요소로 구성됩니다.우리는 복잡한 일을 할 수 없으니 걱정할 필요가 없다.우리가 원하는 것은 대기사항 목록일 뿐입니다. 항목을 입력하고 완전히 지울 수 있습니다.두 가지 동작.주 구성 요소가 생성되었습니다. src/App.vue 에서 찾을 수 있습니다.우리는 곧 이 점을 바꿀 것이다.먼저 components 디렉터리에 src 라는 디렉터리를 만듭니다.이미 있는 경우 Hello.vue 파일이 있을 수 있습니다.너는 그것을 삭제할 수 있다.

3, 구성 요소

우리의 응용 프로그램은 세 개의 주요 구성 요소로 구성될 것이다.1) TodoList, 각 todo를 표시합니다.2) Todo는 디스플레이의 기본 단위입니다.3) 입력 상자와 지우기 단추를 포함하는 사용자 입력.이렇게 복잡해야 돼요?없습니다. 하지만 Vue에서 사용할 수 있는 기능을 보여 줍니다.첫 번째를 만듭니다.생성src/components/Todo.vue.

// src/components/Todo.vue

<template>
  <p>
    {{ todo.text }}
  </p>
</template>

<script>
export default {
  props: ['todo']
}
</script>

그렇습니다.Vue 구성 요소에는 하나의 파일에서 단일 구성 요소 모듈을 사용하는 두 가지 주요 방법이 있습니다.우리는 모듈을 통해 이 점을 실현한다.각 구성 요소에는 레이아웃 구성 요소 HTML 구조의 템플릿, 구성 요소의 뇌를 포함하는 스크립트 태그, 구성 요소의 로컬 사용자 정의 스타일을 포함하는 스타일 태그(선택 사항)가 포함됩니다.이 구성 요소들은 차원 구조의 형식으로 배열되어 있으며, 부모 구성 요소는 도구의 형식으로 데이터를 하위 구성 요소에 전달할 수 있으며, 구성 요소가 사용할 수 있도록 이 도구들을 설명해야 합니다.

This depresses me. I wish my parents would give me props. Just kidding. My parents are awesome.

위의 스크립트 표시에서 볼 수 있습니다 (즉 도구).너무 개의치 마라export default의 허튼소리.이것이 바로 웹팩 처리 모듈과 가져오는 방식이다.처리해야 할 사항.vue 모듈이 가져옵니다. 내보낸 대상은 전달된 대상입니다. (본질적으로 구성 요소의 영혼입니다.)우리가 계속 전진함에 따라 이 점은 더욱 명확해질 전망이다.TodoList 구성 요소를 만들면 props 이 어떻게 전달되는지 볼 수 있습니다.

// src/components/TodoList.vue

<template>
  <div id="todolist">
    <ul>
      <li v-for="todo in todos">
        <todo v-bind:todo="todo" v-bind:id="todo.id">
        </todo>
      </li>
    </ul>
  </div>
</template>

<script>
import Todo from './Todo.vue'

export default {
  components: {
    Todo
  },
  data: function () {
    return {
      todos: [
        { text: 'Learn Vue' },
        { text: 'Do hard things' }
      ]
    }
  }
}
</script>

여기에는 주의할 만한 일이 좀 있다.v-for 요소에 사용된 li 옵션을 볼 수 있습니다.이것은 Vue가 todos 변수의 모든 항목을 훑어보고 li 요소를 만드는 것을 알려 줍니다.첫 번째 사용자 정의 요소를 만들었습니다: todo.v-bind 서브어셈블리에 데이터를 도구로 전송할 수 있습니다.프로젝트 목록을 만들 때 Vue는 모든 항목에 id를 제공하여 목록을 똑바로 유지하고 빠르게 변경할 수 있습니다.포함 script 키를 사용하면 components 부분에서 이 구성 요소가 Todo를 하위 구성 요소로 선언하는 것을 볼 수 있습니다.마지막으로 data 키는 변수 todos의 초기화를 제공합니다.일단 우리가 데이터 모델에 들어가면, 우리는 하드 인코딩 값이 아니라 실제 데이터에서 그것을 초기화할 수 있다.

We're also seeing more of the "module" syntax in the import Todo from './Todo.vue line. By writing this, the variable Todo is filled with the object that was exported from the Todo.vue file. Similar to, but a slightly more controlled import than, Python imports -- although you can achieve a similar effect by explicitly setting the __all__ variable... but I'm getting off-track.

UserInput 구성 요소입니다.

// src/components/UserInput.vue

<template>
  <div id="user-inputs">
    <input v-model="newTodoText" v-on:keyup.enter="createTodo">
    <button v-on:click="clearTodos">
      Clear
    </button>
  </div>
</template>

<script>
export default {
  data: function () {
    return { newTodoText: '' }
  },
  methods: {
    createTodo () {
      console.log(this.newTodoText, 'created!')
    },
    clearTodos () {
      console.log('Todos cleared!')
    }
  }
}
</script>

여기에 무슨 새로운 일이 있습니까?우리의 첫 번째 이벤트 처리 프로그램을 보실 수 있습니다!예측 가능한 작업을 수행하는 응답 keyup.enter 이벤트를 입력합니다.createTodo 표기 방법 부분에서 설명한 script 방법을 보실 수 있습니다.다시 한 번 주의하십시오. 우리는 data 부분에서 변수를 정의했지만, 이번에 우리가 사용한 것은 v-model 입니다. 이것은 양방향으로 연결된 문법 설탕입니다.입력 텍스트를 변경할 때마다 newTodoText 업데이트되고, 프로그래밍 방식으로 변경할 때 newTodoText 입력 상자의 텍스트가 변경됩니다.
거의 완성되지 않았다.기존 App.vue 을 계속 수정합니다.

// src/App.vue

<template>
  <div id="app">
    <user-input></user-input>
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import UserInput from './components/UserInput.vue'

export default {
  components: {
    UserInput,
    TodoList
  }
}
</script>

이곳에는 아무런 새로운 일이 없다.나는 주의해야 할 것이 하나 있다. script 표기 중의 모듈과 대상이 어떻게 연결되는지 보자.템플릿 사용자 정의 요소가 어떻게 된 것인지 보십시오.번역은 HTML에서 대소문자를 구분하지 않으므로 자동으로 관리됩니다.

4. 한 번 보다

우리 시작했어, 결정적인 순간!

$ npm run dev # This will run the webpack build and development server

localhost:8080에 가서 당신의 작품을 보세요.다음과 같은 소프트웨어 설계의 우수성을 확인해야 합니다.

일부 가능한 오류: COULD NOT GET / 를 보았다면 터미널을 검사해야 합니다.너는 아마도 에스린의 신들을 격분시켰을 것이다.나는 처음으로 약 70억 번의 실패를 했다.이러한 문제를 해결하고 페이지를 새로 고칩니다.npm 실패에 대한 경고를 보았을 때, node\u 모듈을 설치하는 것을 잊어버렸을 수도 있습니다.npm install를 실행하고 다시 시도하십시오.
작업을 시작하면 브라우저의 devtools를 열고 입력을 입력한 다음 리턴 키를 누르십시오.createTodo 함수가 명령할 때 로그를 보십시오.지우기 버튼을 클릭합니다.두 번째 적당한 일지를 보실 수 있을 겁니다.이 강좌의 첫 번째 부분은 여기서 끝냅니다.다음에 우리는 데이터 저장소를 얻을 것이다. (Flux/Redux를 생각해 보자. 우리는 Vue 버전: Vuex 설정을 사용할 것이다.
주의해야 할 것은 이것은 내가 처음으로 전방에서 ES6 유형의 문법을 사용한 것이다. 나는 처음으로 Vue, Webpack, ESLint를 사용했고 나는 처음으로 npm 스크립트와 node_모듈을 사용했다.만약 당신이 내가 무엇을 잘못했는지 보신다면 저에게 알려주세요.
최초 발표my blog.표지 이미지 신용: Stanley Ndagi