728x90
세무민의 코딩일기 : Vue.js 예시를 이용하여 Day List 만들기
2. 오늘 공부한 내용 중 일부(Day List)
오늘 포스팅은 Veu.js 예시에 나와있는 Add ToDo List를 사용해봤다.
바로 코드를 보도록 하겠다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>tistory sg-moomin</title>
<!-- veu.js 기본 선언 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<br>
<b>※ Day List </b>
<div id="lists">
<form v-on:submit.prevent="addNow">
<label for="new-todo">할일을 추가해봐</label>
<input
v-model="newText"
id="new-todo"
placeholder="sg-moomins"
>
<button>추가하기</button>
</form>
<ul>
<li
is="now-list"
v-for="(newNow, index) in now"
v-bind:key="newNow.id"
v-bind:title="newNow.title"
v-on:remove="now.splice(index, 1)"
></li>
</ul>
</div>
<script type="text/javascript">
Vue.component('now-list',{
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">삭제</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#lists',
data: {
newText: '',
now:[
{
id:1,
title: '회사 가기 싫다',
},
{
id:2,
title: '공부하기 싫다',
},
{
id:3,
title: '쉬고 싶다..ㅎ',
},
{
id:4,
title: '세기무민 화이팅',
},
{
id:5,
title: 'instagram : romin_pic',
}
],
nextNowId: 6
},
methods: {
addNow: function(){
this.now.push({
id: this.nextNowId++,
title: this.newText
})
this.newText = ''
}
}
})
</script>
</html>생각보다 코드는 별거 없다는 것을 알 수 있다.
여기서 methods를 사용하는 것에 대해서 배울 수 있었다.
2. methods
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>tistory sg-moomin</title>
<!-- veu.js 기본 선언 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<b>※ methods에 대한 사용방법</b>
<br>
<ul id="methodsTest">
<li v-for="temp in even(number)">{{ temp }}</li>
</ul>
<br>
<b>※ v-for 탬플릿에 대한 사용방법</b>
<div>
<span v-for="n in 10"> {{ n }} </span>
</div>
</body>
<script type="text/javascript">
// computed와 methods
new Vue({
el: '#computedTest',
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
new Vue({
el: '#methodsTest',
data: {
number: [1, 2, 3, 4, 5, 6, 7, 8]
},
methods: {
even: function(number){
return number.filter(function(num){
return num % 2 === 0
})
}
}
})
</script>
</html>Methods와 Computed의 차이는 사실 아직은 잘 모르겠다만 methods는 인스턴스에 혼합할 매서드 중 하나이고
computed의 경우에도 동일하게 this 구성요소는 아니지만 첫번재 인스턴스에 계속 엑세스가 가능하다는 점만 이해한
상태이다.
사실 methods와 computed의 코드 차이는 this의 차이라고 생각이 되긴 한다.
3. 결과
다시 본론으로 와서 해당 day list를 돌리면
생각보다 코드를 돌려본 뒤에 괜찮아서 놀랬다.
사실 template를 이용하지 않고 html에서 remove를 하고 싶었는데 나중에 시간되면 해볼 생각이다.
해당 day list의 경우에는 추가와 삭제가 자유롭게 가능하다.
4. 공부하면서 느낀점
퇴근 후에 공부하는 상황이 비록 현타가 오지만 아직 부족하다는 걸 느끼게 된다.
공부를 하면 할 수록 더 부족함을 느껴서 때로는 좋기도 하다.
개인적으로 프론트에 대한 공부는 좋아하지 않는데 그래도 토이 프로젝트를 목표로 꾸준히 해야겠다.
728x90
'Programing > Vue & JavaScript' 카테고리의 다른 글
| 세무민의 코딩일기 : Vue.js에 대해서 공부하기 (0) | 2021.09.06 |
|---|