Django - Vue(Todo App, 1)

1. 게시글 추가

2. 게시글 삭제

<span class="removeBtn" v-on:click="remove_todo(index)">&#x00D7</span>
<!-- remove_todo(index) 여기서 index는 글 번호를 말한다.-->

methods: {
                remove_todo: function(index) { // index를 인자를 넣어준다.
                    console.log("remove_todo()...");
                    this.todoItems.splice(index,1); // splice 함수 사용 index에서 한 개
                },
            },

3. name 없이 ADD를 눌렀을 때 '홍길동'이 default로 출력

if (this.name == '') this.name = '홍길동'; // name이 입력이 되어있지 않으면 '홍길동' 을 this.name으로 설정
if (this.newTodoItem == '') return; // newTodoItem이 입력되어있지 않으면 return

4. ADD 한 이후에도 입력한 글자를 Clear

this.todoItems.push({name: this.name, item: this.newTodoItem}); // 데이터 옵션에서 정의한 변수들인데
        // 이 변수들에는 현재 값이 없다, 사용자가 입력한 데이터를 넣기 위해서는 input 태그와 데이터바인딩을 해줘야한다.
        this.name = ''; // push(ADD) 를 누른 이후에 입력창 clear
        this.newTodoItem = '';  // push(ADD) 를 누른 이후에 입력창 clear

5. ADD 버튼 이외에 엔터키를 입력해도 입력되게끔

<input class="item" type="text" placeholder="type anything welcomed ..."
        v-model="newTodoItem" v-on:keyup.enter="add_todo()">

 

 

정리

Vue.js 의 역할은 DOM 엘리먼트에서 필요한 데이터 메소드를 제공해주는 것이다.

이를 위해 Vue 인스턴스를 생성(var vm = new Vue)을 했고, el(엘리먼트), data(데이타), methods(메소드)와 같은 Vue 옵션을 정의했다.

DOM 엘리먼트(HTML?)에서는 v-for, v-on, v-model 같은 Vue 디렉트를 사용하였습니다.

 

하지만, 이번엔 만든 데이터를 다른 항목과 공유를 하지 못한다. 왜냐하면 Vue 내에 객체에 저장되어있기 때문에 프로그램을 종료하면 데이터가 삭제한다. 이 점을 방지하려면 웹 브라우저 내에 스토리지를 활용할 수 있지만 여러 제약사항이 따른다. 왜냐하면 다른사람의 PC에서는 내용을 볼 수 없기 때문이다. 데이터를 공유해야되는 앱을 만들어야된다면 웹서버 또는 데이터베이스가 필요하고 이 역할을 Django가 하게 된다.