Vue.js로 Todo 앱을 만들어 보세요!
10217 단어 HTMLJavaScriptVue.jsCSS
어서 해보세요~!
또한 초기초적인 지식으로 아래 기사에 쓰여진 것을 전제로 설명합니다!
https://qiita.com/takepon_it/items/f89e0e3023a3070dbce6
1. 화면 만들기
이번에는 그냥 Todo 리스트의 기능을 만들고 싶어서 외관이 간단해요!
https://unpkg.com/vue
읽는 것을 잊지 마세요!
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Todoアプリ</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="container">
<h1>Todoアプリ</h1>
</div>
<div id="app">
<div>
<input type="text" placeholder="テキスト入力してね">
<button type="button">追加</button>
<ul>
</ul>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
이런 느낌이에요!
2. 구성 요소 만들기!
바로 미션 추가 기능 추가!
우리 먼저 구성 요소를 정의합시다.
구성 요소는 Vue입니다.component를 사용하여 정의할 수 있습니다!
ToDo 요소를 todo-item 구성 요소로 정의합시다!
그거랑 합쳐서 여기에 미션이 추가되었을 때 html도 미리 만들어놔요!
템플릿을 템플릿 옵션에 맡기면 됩니다!
main.jsVue.component('todo-item', {
props: {
todo: {
type: Object,
required: true
}
},
//htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'</div>'
});
서로 협조할 수 없어요. 이렇게 해서 todo-item이라는 구성 요소를 만들었어요!
3. 미션 유지 데이터 만들기!
다음은 input라는 이름으로 텍스트 상자의 값을 저장하세요!
그럼 지금부터 데이터에 input을 넣어보도록 하겠습니다.
main.jsvar vm = new Vue({
el: '#app',
data: {
input: '',
//タスクを管理する配列
todos: []
},
관리 임무의 배열로 todos:[]도 제작!
4. 텍스트와 데이터를 함께 붙여라!
바로 v-model로 텍스트 상자와 input를 붙여주세요!
v-model은 input 요소에 v-model이라는 속성을 추가하여 데이터와 input 요소의 입력 값을 한데 붙일 수 있습니다!
자세한 내용을 확인한 후
index.html<input type="text" v-model="input" placeholder="テキスト入力してね">
해봐!바로 다음 단계로 넘어가자!
5. 추가 퀘스트를 만드는 실례 방법!
본론토도 기능 추가!
add Todo라는 방법을 만들어보자!
methods 옵션을 사용하여 실례를 만들 수 있습니다
main.js methods: {
//Todo追加関数
addTodo: function () {
this.todos.push(
{
completed: false,
text: this.input
})
this.input = ''
}
}
이거 추가해 주세요!
제가 그룹의 push와 이런 것들을 베는 것을 허락해 주십시오
6. 추가 미션 처리를 적어주세요!
그리고 버튼을 누르면 미션이 추가됩니다.
버튼과 방법은 반드시 연결되어야 합니다!
이거 해야 돼.v-on:click이걸 사용하면 감시 버튼이 눌리고 버튼이 눌렸을 때 아까addTodo 방법을 실행할 수 있죠!
index.html<button type="button" v-on:click="addTodo">追加</button>
그렇구나!
7. 작업 삭제 기능 만들기!
미션을 추가하면 미션을 수행하기 위해 당연히 삭제하고 싶은 기능이 있죠?
지금부터 이걸 설치하고 싶어요!
처음에 만든templete 옵션에 이어서 쓰고 싶습니다.
main.js //htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'<button type="button" v-on:click="onclickRemove">削除</button>' +
'</div>',
결국 그렇습니다!
하지만 그뿐입니다. v-on 옵션을 사용하는 곳을 보십시오.
onclickRemove
실제 삭제 버튼을 눌렀을 때의 처리는 아직 쓰지 않았기 때문에 지금부터 쓰세요.
main.js
methods: {
onclickRemove: function () {
this.$emit('remove')
}
}
첫 번째 인스턴스 방법에 추가
$emit로 사용자 정의 이벤트의remove를 시작합니다!
마지막
index.html <li v-for="(todo, index) in todos">
<todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
l 요소에 상술한 내용을 추가하십시오
v-for에서 요소를 반복적으로 표시하는 경우 todos 그룹에 저장된 작업을 표시하기 위해
v-bind에서 데이터와 속성 값을 연결합니다.
지금까지 Todo 어플리케이션의 완성!!!!!
8. 마지막
비록 프로그래밍 초보자이지만, 나는 매우 노력한다고 생각한다
저는 이렇게 해서 Qiita 같은 걸로 출력하고 싶어요.
Reference
이 문제에 관하여(Vue.js로 Todo 앱을 만들어 보세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takepon_it/items/8a6cdf302a610036e9ea
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Todoアプリ</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="container">
<h1>Todoアプリ</h1>
</div>
<div id="app">
<div>
<input type="text" placeholder="テキスト入力してね">
<button type="button">追加</button>
<ul>
</ul>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
바로 미션 추가 기능 추가!
우리 먼저 구성 요소를 정의합시다.
구성 요소는 Vue입니다.component를 사용하여 정의할 수 있습니다!
ToDo 요소를 todo-item 구성 요소로 정의합시다!
그거랑 합쳐서 여기에 미션이 추가되었을 때 html도 미리 만들어놔요!
템플릿을 템플릿 옵션에 맡기면 됩니다!
main.js
Vue.component('todo-item', {
props: {
todo: {
type: Object,
required: true
}
},
//htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'</div>'
});
3. 미션 유지 데이터 만들기!
다음은 input라는 이름으로 텍스트 상자의 값을 저장하세요!
그럼 지금부터 데이터에 input을 넣어보도록 하겠습니다.
main.jsvar vm = new Vue({
el: '#app',
data: {
input: '',
//タスクを管理する配列
todos: []
},
관리 임무의 배열로 todos:[]도 제작!
4. 텍스트와 데이터를 함께 붙여라!
바로 v-model로 텍스트 상자와 input를 붙여주세요!
v-model은 input 요소에 v-model이라는 속성을 추가하여 데이터와 input 요소의 입력 값을 한데 붙일 수 있습니다!
자세한 내용을 확인한 후
index.html<input type="text" v-model="input" placeholder="テキスト入力してね">
해봐!바로 다음 단계로 넘어가자!
5. 추가 퀘스트를 만드는 실례 방법!
본론토도 기능 추가!
add Todo라는 방법을 만들어보자!
methods 옵션을 사용하여 실례를 만들 수 있습니다
main.js methods: {
//Todo追加関数
addTodo: function () {
this.todos.push(
{
completed: false,
text: this.input
})
this.input = ''
}
}
이거 추가해 주세요!
제가 그룹의 push와 이런 것들을 베는 것을 허락해 주십시오
6. 추가 미션 처리를 적어주세요!
그리고 버튼을 누르면 미션이 추가됩니다.
버튼과 방법은 반드시 연결되어야 합니다!
이거 해야 돼.v-on:click이걸 사용하면 감시 버튼이 눌리고 버튼이 눌렸을 때 아까addTodo 방법을 실행할 수 있죠!
index.html<button type="button" v-on:click="addTodo">追加</button>
그렇구나!
7. 작업 삭제 기능 만들기!
미션을 추가하면 미션을 수행하기 위해 당연히 삭제하고 싶은 기능이 있죠?
지금부터 이걸 설치하고 싶어요!
처음에 만든templete 옵션에 이어서 쓰고 싶습니다.
main.js //htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'<button type="button" v-on:click="onclickRemove">削除</button>' +
'</div>',
결국 그렇습니다!
하지만 그뿐입니다. v-on 옵션을 사용하는 곳을 보십시오.
onclickRemove
실제 삭제 버튼을 눌렀을 때의 처리는 아직 쓰지 않았기 때문에 지금부터 쓰세요.
main.js
methods: {
onclickRemove: function () {
this.$emit('remove')
}
}
첫 번째 인스턴스 방법에 추가
$emit로 사용자 정의 이벤트의remove를 시작합니다!
마지막
index.html <li v-for="(todo, index) in todos">
<todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
l 요소에 상술한 내용을 추가하십시오
v-for에서 요소를 반복적으로 표시하는 경우 todos 그룹에 저장된 작업을 표시하기 위해
v-bind에서 데이터와 속성 값을 연결합니다.
지금까지 Todo 어플리케이션의 완성!!!!!
8. 마지막
비록 프로그래밍 초보자이지만, 나는 매우 노력한다고 생각한다
저는 이렇게 해서 Qiita 같은 걸로 출력하고 싶어요.
Reference
이 문제에 관하여(Vue.js로 Todo 앱을 만들어 보세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takepon_it/items/8a6cdf302a610036e9ea
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var vm = new Vue({
el: '#app',
data: {
input: '',
//タスクを管理する配列
todos: []
},
바로 v-model로 텍스트 상자와 input를 붙여주세요!
v-model은 input 요소에 v-model이라는 속성을 추가하여 데이터와 input 요소의 입력 값을 한데 붙일 수 있습니다!
자세한 내용을 확인한 후
index.html
<input type="text" v-model="input" placeholder="テキスト入力してね">
5. 추가 퀘스트를 만드는 실례 방법!
본론토도 기능 추가!
add Todo라는 방법을 만들어보자!
methods 옵션을 사용하여 실례를 만들 수 있습니다
main.js methods: {
//Todo追加関数
addTodo: function () {
this.todos.push(
{
completed: false,
text: this.input
})
this.input = ''
}
}
이거 추가해 주세요!
제가 그룹의 push와 이런 것들을 베는 것을 허락해 주십시오
6. 추가 미션 처리를 적어주세요!
그리고 버튼을 누르면 미션이 추가됩니다.
버튼과 방법은 반드시 연결되어야 합니다!
이거 해야 돼.v-on:click이걸 사용하면 감시 버튼이 눌리고 버튼이 눌렸을 때 아까addTodo 방법을 실행할 수 있죠!
index.html<button type="button" v-on:click="addTodo">追加</button>
그렇구나!
7. 작업 삭제 기능 만들기!
미션을 추가하면 미션을 수행하기 위해 당연히 삭제하고 싶은 기능이 있죠?
지금부터 이걸 설치하고 싶어요!
처음에 만든templete 옵션에 이어서 쓰고 싶습니다.
main.js //htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'<button type="button" v-on:click="onclickRemove">削除</button>' +
'</div>',
결국 그렇습니다!
하지만 그뿐입니다. v-on 옵션을 사용하는 곳을 보십시오.
onclickRemove
실제 삭제 버튼을 눌렀을 때의 처리는 아직 쓰지 않았기 때문에 지금부터 쓰세요.
main.js
methods: {
onclickRemove: function () {
this.$emit('remove')
}
}
첫 번째 인스턴스 방법에 추가
$emit로 사용자 정의 이벤트의remove를 시작합니다!
마지막
index.html <li v-for="(todo, index) in todos">
<todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
l 요소에 상술한 내용을 추가하십시오
v-for에서 요소를 반복적으로 표시하는 경우 todos 그룹에 저장된 작업을 표시하기 위해
v-bind에서 데이터와 속성 값을 연결합니다.
지금까지 Todo 어플리케이션의 완성!!!!!
8. 마지막
비록 프로그래밍 초보자이지만, 나는 매우 노력한다고 생각한다
저는 이렇게 해서 Qiita 같은 걸로 출력하고 싶어요.
Reference
이 문제에 관하여(Vue.js로 Todo 앱을 만들어 보세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takepon_it/items/8a6cdf302a610036e9ea
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
methods: {
//Todo追加関数
addTodo: function () {
this.todos.push(
{
completed: false,
text: this.input
})
this.input = ''
}
}
그리고 버튼을 누르면 미션이 추가됩니다.
버튼과 방법은 반드시 연결되어야 합니다!
이거 해야 돼.
v-on:click이걸 사용하면 감시 버튼이 눌리고 버튼이 눌렸을 때 아까addTodo 방법을 실행할 수 있죠!index.html
<button type="button" v-on:click="addTodo">追加</button>
7. 작업 삭제 기능 만들기!
미션을 추가하면 미션을 수행하기 위해 당연히 삭제하고 싶은 기능이 있죠?
지금부터 이걸 설치하고 싶어요!
처음에 만든templete 옵션에 이어서 쓰고 싶습니다.
main.js //htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'<button type="button" v-on:click="onclickRemove">削除</button>' +
'</div>',
결국 그렇습니다!
하지만 그뿐입니다. v-on 옵션을 사용하는 곳을 보십시오.
onclickRemove
실제 삭제 버튼을 눌렀을 때의 처리는 아직 쓰지 않았기 때문에 지금부터 쓰세요.
main.js
methods: {
onclickRemove: function () {
this.$emit('remove')
}
}
첫 번째 인스턴스 방법에 추가
$emit로 사용자 정의 이벤트의remove를 시작합니다!
마지막
index.html <li v-for="(todo, index) in todos">
<todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
l 요소에 상술한 내용을 추가하십시오
v-for에서 요소를 반복적으로 표시하는 경우 todos 그룹에 저장된 작업을 표시하기 위해
v-bind에서 데이터와 속성 값을 연결합니다.
지금까지 Todo 어플리케이션의 완성!!!!!
8. 마지막
비록 프로그래밍 초보자이지만, 나는 매우 노력한다고 생각한다
저는 이렇게 해서 Qiita 같은 걸로 출력하고 싶어요.
Reference
이 문제에 관하여(Vue.js로 Todo 앱을 만들어 보세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takepon_it/items/8a6cdf302a610036e9ea
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
//htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'<button type="button" v-on:click="onclickRemove">削除</button>' +
'</div>',
methods: {
onclickRemove: function () {
this.$emit('remove')
}
}
<li v-for="(todo, index) in todos">
<todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
비록 프로그래밍 초보자이지만, 나는 매우 노력한다고 생각한다
저는 이렇게 해서 Qiita 같은 걸로 출력하고 싶어요.
Reference
이 문제에 관하여(Vue.js로 Todo 앱을 만들어 보세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takepon_it/items/8a6cdf302a610036e9ea텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
