Vue.js 3: 첫 단계

Vue.js 3.0. 이미지 크레딧: JavaScript Weekly

Code-named "One Piece," Vue 3.0 is the latest version of one of the most popular front-end frameworks.

2020년 9월 18일, Vue 3.0's 출시 소식이 전해졌습니다.

Vue.js 팀은 공식 Twitter 계정을 통해 릴리스를 발표했습니다.






Vue.js


@vuejs






Vue 3.0 "원피스"가 나왔습니다! github.com/vuejs/vue-next…


오후 16:26 - 2020년 9월 18일









나는 그것을 시도하게되어 기뻤고 작은 Todo 앱을 만들기로 결정했습니다.

이 기사에서는 Vue 3.0을 사용하여 웹 앱을 만드는 과정을 안내합니다.

하지만 시작하기 전에 우리가 만들려는 것을 살짝 보여드리겠습니다.


Vue 3.0으로 만든 Todo 앱. 이미지 제공: Pratik Chaudhari(저자)

이제 모양과 작동 방식에 대한 시각적 단서를 얻었으므로 코드를 살펴보겠습니다.

1 단계.

Vue 3.0을 사용하도록 앱 설정

일을 단순하게 유지하기 위해 널리 사용되는 JavaScript 패키지 관리자인 npm 을 사용하지 않을 것입니다.

대신 CDN에서 직접 vue.js를 앱으로 가져오기 위해 good ol'<script> 태그를 사용합니다.

<script src="https://unpkg.com/vue@next"></script>

위 코드에서 @next에 유의하십시오. vue.js의 최신 버전을 원한다는 것을 unpkg.com에 나타내는 데 사용됩니다.

@next를 생략하면 unpkg.com은 Vue.js의 현재LTS 버전인 vue 2.6.12를 제공합니다.

2 단계.

다른 타사 라이브러리 가져오기

내가 사용한 유일한 타사 라이브러리는 Materialize CSS 입니다.

꼭 필요한 것은 아니지만 앱이 멋지게 보입니다 :)

이제 가져오겠습니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

보시다시피 여기에 두 가지 가져오기가 필요합니다.

Materialise CSS 파일

Materialise JS 파일

Materialise CSS에서 제공하는 토스터 및 툴팁을 표시하려면 JS 파일이 필요합니다.

3단계.

HTML 템플릿 만들기

두 개의 입력 필드가 있는 양식이 필요합니다. 하나는 제목용이고 다른 하나는 설명용입니다. 또한 사용자가 할 일 항목을 앱에 제출할 수 있는 버튼도 필요합니다.

코드는 다음과 같습니다.

<form class="col s12">
    <div class="row">
        <div class="input-field col s4">
            <i class="material-icons prefix">title</i>
            <textarea v-model="todo.title" id="todo_title" class="materialize-textarea"></textarea>
            <label for="todo_title">A small title would be nice...</label>
        </div>
        <div class="input-field col s4">
            <i class="material-icons prefix">description</i>
            <textarea v-model="todo.description" id="todo_description" class="materialize-textarea"></textarea>
            <label for="todo_description">Maybe add a little description...</label>
        </div>
        <div class="s4">
            <a class="btn-floating btn-large waves-effect waves-light red tooltipped" data-position="bottom"
                data-tooltip="Add Todo!" @click="addTodo()"><i class="material-icons">add</i></a>
        </div>
    </div>
</form>

또한 사용자가 추가한 모든 작업을 표시하는 테이블이 필요합니다.

디자인 방법은 다음과 같습니다.

<table class="striped centered responsive-table">
    <thead>
        <th></th>
        <th>
            Title
        </th>
        <th>
            Description
        </th>
        <th></th>
    </thead>
    <tbody>
        <tr v-for="(todo,id) in todos">
            <td>
                {{id}}
            </td>
            <td>
                {{todo.title}}
            </td>
            <td>
                {{todo.description}}
            </td>
            <td>
                <a 
                   v-show="!todo.done"
                   class="btn-floating btn-large waves-effect 
                   waves-light light-green accent-4 tooltipped"
                   data-position="bottom" 
                   data-tooltip="I'm done with this one!" 
                   @click="markAsDone(todo.id)">
                    <i class="material-icons">check</i>
                </a>

                <i v-if="todo.done" 
                   class="todo-done-tick material-icons 
                   tooltipped" 
                   data-position="bottom"
                   data-tooltip="You're done with this 
                   one!">
                 check
               </i>
            </td>
        </tr>
        <tr v-show="todoCount == 0">
            <td colspan="4">
              You haven't added any Todos yet :(
            </td>
        </tr>
    </tbody>
</table>

4단계.

app.js 만들기

앱에 생명을 불어넣을 app.js를 만들어 봅시다.

const TodoApp = {
    data() {
        return {
            todoCount: 0,
            todo: {
                id: 0,
                title: '',
                description: '',
                done: false
            },
            todos: {}
        }
    },
    mounted() {
        const vm = this;
        vm.initialize();
    },
    methods: {
        initialize() {
            const vm = this;
            vm.addTooltips(vm.findTooltippedElementsFromDOM());
        },
        addTooltips(tooltippedElements) {
            const vm = this;
            M.Tooltip.init(tooltippedElements, {});
        },
        findTooltippedElementsFromDOM() {
            const vm = this;
            return document.querySelectorAll('.tooltipped');
        },
        addTodo() {
            const vm = this;

            if (!vm.todo.title || vm.todo.title.trim() === '') {
                M.toast({ html: 'Need a title for this Todo!', classes: 'rounded' });
                return;
            }

            if (!vm.todo.description || vm.todo.description.trim() === '') {
                M.toast({ html: 'A small description would be nice!', classes: 'rounded' });
                return;
            }

            vm.todo.id = ++vm.todoCount;
            vm.todos[vm.todo.id] = vm.todo;

            vm.todo = { title: '', description: '' };
            vm.addTooltipsToDynamicElements();
        },
        markAsDone(id) {
            const vm = this;
            vm.todos[id].done = true;
            vm.addTooltipsToDynamicElements();
        },
        addTooltipsToDynamicElements() {
            const vm = this;

            setTimeout(function () {
                vm.addTooltips(vm.findTooltippedElementsFromDOM());
            }, 500);
        }
    }
}

Vue.createApp(TodoApp).mount('#todoapp');

위의 모든 코드를 함께 붙이면 기사 시작 부분의 gif에서 본 것처럼 앱이 작동하기 시작합니다.

이 앱의 라이브 데모를 보고 싶은 경우(코드를 변경하고 가지고 놀 수도 있음) 아래의 Codepen으로 이동하십시오. 여기에서 모든 코드를 업로드했습니다.