3/19#xhack 학습회에서 처음으로 Vue제 TODO 앱을 제작했기 때문에 다시 한 번 살펴보겠습니다.
같은 내용의 기사가 블로그 홈페이지에 공개됐지만, 개발 도중에 보기 어려웠기 때문에 젠에서도 공개된다.
개시하다
#xhack 학습회, 수고하셨습니다!
저는 이번에 처음 참가해서 긴장을 많이 했는데 기획이 잘 돼서 마음이 놓입니다.
주최하는 학습회에 초청을 받아 히히 선생님을 소개하여 이 기회를 빌려 감사를 드립니다.
저에게는 수확이 많은 공부회이기 때문에 이 마음을 잊지 않기 위해 집필을 했습니다(이렇게 되면 좀 한가하겠지만).
성과물 등
↓ 학습회에서 제작된 TODO 앱.
↓ 내 창고야.
↓복숭아 창고입니다.내 애플리케이션보다 기능이 더 많아서 아마 내가 중간에 자리를 비운 후 많은 것을 추가해서...
학습회의 절차는'환경 구축'→'목표 설정'→'설명과 코딩'→(과제가 있으면 스스로 실시)→'채팅(음성)으로 확인했는지'→'deproy'로 진행된다.
Vue에 대한 노트.
다음 코드는 복숭아의 창고를 인용하여 제가 논평을 추가했습니다.
index.html
<body>
<!-- ちらつき防止 -->
<div id="app" class="container" v-cloak>
<div class="wrapper">
<!-- データバインディング 二重括弧のところ -->
<p class="title">{{ title }}</p>
<div class="add-task">
<!-- ディレクティブ v-で始まる属性 DOMをいじりたいときに使う -->
<!-- v-model フォームに入力するとnewtaskにデータが追加される -->
<input v-model="newTask">
<!-- イベントハンドリング クリックするとaddTaskを実行js式やメソッドを受け付けられる) -->
<button v-on:click="addTask">追加する</button>
</div>
<section class="tasks">
<ul>
<!-- v-for templateの中で繰り返して配列を表示 item in itemsの形 -->
<!-- 配列tasksの中の配列要素taskと配列番号index -->
<template v-for="(task, index) in tasks">
<!-- v-bindの省略 -->
<!-- trueの時のみ指定したclass属性を付与 -->
<li
:key="task"
:id="index"
:class="{ complete: task.isComplete }"
@click="completeTask(index)"
>
{{ task.title }}
<button
@click="deleteTask(index)"
class="trash-icon"
>
<i class="fas fa-trash"></i>
</button>
</li>
</template>
</ul>
</section>
<section class="remainingTasks">
残り{{ remaining.length }}個のタスクが残っています
</section>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</html>
<script>
new Vue({
el: "#app",
// プロパティを操作できるオブジェクト
data: {
title: "My First Todo App",
// 追加されたデータがここに入る
newTask: "",
tasks: []
},
// 計算機能付きプロパティ
computed: {
// 残りのタスクを数える
remaining() {
return this.tasks.filter((task) => {
return !task.isComplete
})
}
},
mounted() {
this.getLocalStorageData()
},
// methodsはイベントハンドラに使うとよろしい(押すたびに更新)
methods: {
// 追加するボタンを押すと実行(@click)
addTask() {
if (!this.newTask.length) { return }
this.tasks.push({ title: this.newTask, isComplete: false })
this.saveToLocalStorage()
this.newTask = ""
},
deleteTask(index) {
this.tasks.forEach((tasks, loopIndex) => {
if (index === loopIndex) {
this.tasks.splice(index, 1);
}
})
},
completeTask(index) {
this.tasks.forEach((task, loopIndex) => {
if (index === loopIndex) {
task.isComplete = !task.isComplete;
}
})
this.saveToLocalStorage()
},
getLocalStorageData () {
const data = localStorage.getItem('todo');
if (data) {
this.tasks = JSON.parse(data);
}
},
saveToLocalStorage () {
localStorage.setItem('todo', JSON.stringify(this.tasks));
}
},
})
</script>
데이터 바인딩
index.html
<p class="title">{{ title }}</p>
<!-- (中略) -->
data: {
title: "My First Todo App"
},
(참조: 양방향 데이터 바인딩)
지시성
v-로 시작하는 속성.DOM을 가지고 놀 때 사용합니다.
(참조: 목록 렌더링)
구성 요소 옵션
데이터라든지 컴퓨터라든지 methods라든지.
돌아보다
완성된 곳
더 기르고 싶은 곳.
대책
과제가 부여됐을 때'이렇게 하면 가능할 것 같다'는 길이 떠오르더라도'어떻게 써야 할지 모르겠다','검색하고 조사하자'로 바뀌는 것은 코딩 지연과 관련이 있다.그래서 저는 실제 행동으로 기억하는 문제집 같은 것(예를 들어 Paiza와 닌자 코드 등, 초보자를 위한 책 등)을 만들어야 한다고 생각합니다.
감상
나는 프로그래밍을 독학하고 있다.독학은 자기 리듬대로 천천히 배울 수 있는 장점이 있지만 반대로 주변 사람들과 비교할 수 없는 면도 있다 = 자신이 잘하는지 못하는 면도 모른다.흔히'모르겠다'고 말하지만,'내가 얼마나 할 수 있는지 모른다'는 불안감도 담겼다.
이번 학습회에서 순조롭게 진행되는 장면과 긴장되는 장면을 모두 똑똑히 알게 되어 매우 기쁩니다.물론 알 수 없는 일은 후회하지만 가장 고통스러운 일은'뭘 몰라서'다.나에게 있어서 학습 방향을 결정하는 것은 매우 중요하다. 앞으로의 학습 방침을 제정했기 때문에 나는 매우 좋다고 생각한다(이것을 말하기 위해 쓴 기사가 있다).
끝말
출력이라고는 하지만 뭐라고 써야 할지 잘 모르겠어요.출력 방법, 프로그래밍 학습 방법, 일본어 쓰기 방법을 알려주세요.
Reference
이 문제에 관하여(3/19#xhack 학습회에서 처음으로 Vue제 TODO 앱을 제작했기 때문에 다시 한 번 살펴보겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/hebis/articles/ec34b22d692478텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
