Vue.저는 js로 Todo 리스트를 만들었어요.
8431 단어 Vue.js
입문
Vue.왜냐하면 Js가 공부를 시작한 지 2주 정도 지났어요. Todo 리스트를 만들어봤어요!
작법
Vue.js에는 몇 가지 쓰기 방법이 있습니다. 이번에는 HTML, Javascript 파일로 나누어 쓰고 싶습니다.
카탈로그 트리 root/
┝ index.html
└ javascript/
└ app.js
HTML 코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<title>Todoリスト</title>
<!-- CDNにてVue.jsを導入 -->
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<div id="app">
<!-- 新しいタスクの入力フォーム -->
<input type="text" placeholder="新しいタスク" v-model="newTask">
<input type="submit" value="追加" @click="addTask">
<!-- 達成率を表示 -->
達成数： {{ completedTasks }} / {{ totalTasks }}
<!-- タスクの一覧 -->
<ul>
<li v-for="(task, index) in tasks" :key="task.title">
{{ task.title }}
<button v-if="task.done" @click="completed(index)">完了</button>
<label v-else>完了済み</label>
<button @click="deleteTask(index)">削除</button>
</li>
</ul>
</div>
<script src="javascript/app.js"></script>
</body>
Javascript 코드
app.jsconst tasks = [
{
title: 'sample',
done: false
}
]
var app = new Vue({
el: "#app",
data: {
tasks: tasks,
newTask: null
},
methods: {
completed: function(index) {
this.tasks[index].done = true
},
addTask: function() {
if(newTask){
this.tasks.push({ title: this.newTask, done: false })
this.newTask = null
}
},
deleteTask: function(index) {
this.tasks.splice(index, 1)
}
},
computed: {
completedTasks: function() {
var count = 0
for(let i = 0; i < this.tasks.length; i++){
if(this.tasks[i].done){
count++
}
}
return count
},
totalTasks: function() {
return this.tasks.length
}
}
})
실행 결과
첫 번째 화면
완료 버튼을 누르면
나머지 작업 생략
총결산
이번에는 CDN으로 간단하게 Vue.js를 가져오고 Todo 목록을 만들었습니다.
앞으로 VueCLI를 사용하여 가져오고 단일 파일로 응용 프로그램을 만들려고 합니다.
Reference
이 문제에 관하여(Vue.저는 js로 Todo 리스트를 만들었어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/apple-yagi/items/f1eb80e68357400c061f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Vue.js에는 몇 가지 쓰기 방법이 있습니다. 이번에는 HTML, Javascript 파일로 나누어 쓰고 싶습니다.
카탈로그 트리 root/
┝ index.html
└ javascript/
└ app.js
HTML 코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<title>Todoリスト</title>
<!-- CDNにてVue.jsを導入 -->
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<div id="app">
<!-- 新しいタスクの入力フォーム -->
<input type="text" placeholder="新しいタスク" v-model="newTask">
<input type="submit" value="追加" @click="addTask">
<!-- 達成率を表示 -->
達成数： {{ completedTasks }} / {{ totalTasks }}
<!-- タスクの一覧 -->
<ul>
<li v-for="(task, index) in tasks" :key="task.title">
{{ task.title }}
<button v-if="task.done" @click="completed(index)">完了</button>
<label v-else>完了済み</label>
<button @click="deleteTask(index)">削除</button>
</li>
</ul>
</div>
<script src="javascript/app.js"></script>
</body>
Javascript 코드
app.jsconst tasks = [
{
title: 'sample',
done: false
}
]
var app = new Vue({
el: "#app",
data: {
tasks: tasks,
newTask: null
},
methods: {
completed: function(index) {
this.tasks[index].done = true
},
addTask: function() {
if(newTask){
this.tasks.push({ title: this.newTask, done: false })
this.newTask = null
}
},
deleteTask: function(index) {
this.tasks.splice(index, 1)
}
},
computed: {
completedTasks: function() {
var count = 0
for(let i = 0; i < this.tasks.length; i++){
if(this.tasks[i].done){
count++
}
}
return count
},
totalTasks: function() {
return this.tasks.length
}
}
})
실행 결과
첫 번째 화면
완료 버튼을 누르면
나머지 작업 생략
총결산
이번에는 CDN으로 간단하게 Vue.js를 가져오고 Todo 목록을 만들었습니다.
앞으로 VueCLI를 사용하여 가져오고 단일 파일로 응용 프로그램을 만들려고 합니다.
Reference
이 문제에 관하여(Vue.저는 js로 Todo 리스트를 만들었어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/apple-yagi/items/f1eb80e68357400c061f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
root/
┝ index.html
└ javascript/
└ app.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Todoリスト</title>
<!-- CDNにてVue.jsを導入 -->
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<div id="app">
<!-- 新しいタスクの入力フォーム -->
<input type="text" placeholder="新しいタスク" v-model="newTask">
<input type="submit" value="追加" @click="addTask">
<!-- 達成率を表示 -->
達成数： {{ completedTasks }} / {{ totalTasks }}
<!-- タスクの一覧 -->
<ul>
<li v-for="(task, index) in tasks" :key="task.title">
{{ task.title }}
<button v-if="task.done" @click="completed(index)">完了</button>
<label v-else>完了済み</label>
<button @click="deleteTask(index)">削除</button>
</li>
</ul>
</div>
<script src="javascript/app.js"></script>
</body>
Javascript 코드
app.jsconst tasks = [
{
title: 'sample',
done: false
}
]
var app = new Vue({
el: "#app",
data: {
tasks: tasks,
newTask: null
},
methods: {
completed: function(index) {
this.tasks[index].done = true
},
addTask: function() {
if(newTask){
this.tasks.push({ title: this.newTask, done: false })
this.newTask = null
}
},
deleteTask: function(index) {
this.tasks.splice(index, 1)
}
},
computed: {
completedTasks: function() {
var count = 0
for(let i = 0; i < this.tasks.length; i++){
if(this.tasks[i].done){
count++
}
}
return count
},
totalTasks: function() {
return this.tasks.length
}
}
})
실행 결과
첫 번째 화면
완료 버튼을 누르면
나머지 작업 생략
총결산
이번에는 CDN으로 간단하게 Vue.js를 가져오고 Todo 목록을 만들었습니다.
앞으로 VueCLI를 사용하여 가져오고 단일 파일로 응용 프로그램을 만들려고 합니다.
Reference
이 문제에 관하여(Vue.저는 js로 Todo 리스트를 만들었어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/apple-yagi/items/f1eb80e68357400c061f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const tasks = [
{
title: 'sample',
done: false
}
]
var app = new Vue({
el: "#app",
data: {
tasks: tasks,
newTask: null
},
methods: {
completed: function(index) {
this.tasks[index].done = true
},
addTask: function() {
if(newTask){
this.tasks.push({ title: this.newTask, done: false })
this.newTask = null
}
},
deleteTask: function(index) {
this.tasks.splice(index, 1)
}
},
computed: {
completedTasks: function() {
var count = 0
for(let i = 0; i < this.tasks.length; i++){
if(this.tasks[i].done){
count++
}
}
return count
},
totalTasks: function() {
return this.tasks.length
}
}
})
첫 번째 화면
완료 버튼을 누르면
나머지 작업 생략
총결산
이번에는 CDN으로 간단하게 Vue.js를 가져오고 Todo 목록을 만들었습니다.
앞으로 VueCLI를 사용하여 가져오고 단일 파일로 응용 프로그램을 만들려고 합니다.
Reference
이 문제에 관하여(Vue.저는 js로 Todo 리스트를 만들었어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/apple-yagi/items/f1eb80e68357400c061f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Vue.저는 js로 Todo 리스트를 만들었어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/apple-yagi/items/f1eb80e68357400c061f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
