CRUD(update, delete)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://unpkg.com/vue"></script>
<style>
#app{
width:60%;
margin: 30px auto;
}
.strong{
color:red;
font-weight: bold;
font-size: 1.2em;
}
</style>
</head>
<body>
<div id="app">
<h1>Create, Read, Update, Delete</h1>
Name: <input ref="name" type="text" v-model="user.name">
<p></p>
Power: <input ref="power" type="text" v-model="user.power">
<button @click="insert">add</button>
<hr color='green'>
<table>
<tr>
<th>ID</th><th>NAME</th><th>POWER</th><th>CRUD</th>
</tr>
<tr v-for="(hero, i) in list" :key="i" :class="{strong: hero.power>=300}">
<td>{{hero.id}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td>
<button @click="doUp(i)">PowerUp</button>
<button @click="doDown(i)">PowerDown</button>
<button @click="doDel(i)">Del</button>
<button @click="doEdit(i)">Edit</button>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:'#app',
mounted(){ //메모리에 올라갈때 life cycle
this.$refs.name.focus();
},
data(){
return {
user:{
id:0,
name:'',
power:''
},
list:[
{id:1,name:'슈퍼맨',power:100},
{id:2,name:'아이언맨',power:500},
{id:3,name:'배트맨',power:290},
{id:4,name:'헐크',power:400}
]
}
},
methods:{
insert(){
//이름과 power에 입력한 값이 없으면 alert띄우고 focus
if(!this.user.name){
alert("이름 입력하세요");
this.$refs.name.focus();
return;
}
if(!this.user.power){
alert("power를 입력하세요");
this.$refs.power.focus();
return;
}
//list배열에 추가하기
//var len = this.list.length+1;
//최대값
/*
array.reduce(function(prev,next){
var max = (prev>next)? prev:next;
return max;
})
array.reduce(function(prev,next){
var min = (prev>next)? next:prev;
return min;
})
*/
var max=0;
if(this.list.length>=2){
max=this.list.reduce(function(obj1,obj2){
return (obj1.id>obj2.id)? obj1.id:obj2.id;
})
}else if(this.list.length==1){
max=this.list.length;
}
this.list.push({id:max+1, name:this.user.name, power:this.user.power});
this.user.name='';
this.user.power='';
this.$refs.name.focus();
},
doDel(index){
//alert(index)
//list배열에서 해당 인덱스에 해당하는 객체 1개 삭제
this.list.splice(index,1);
},
doUp(index){
//alert(index)
//100씩 증가
this.list[index].power=parseInt(this.list[index].power)+100;
},
doDown(index){
//50씩 감소
this.list[index].power-=50;
},doEdit(index){
//선택한 사람 정보를 input에 보여주고
//this.user=this.list[index];
var tmpUser={... this.list[index]};
//spread연산자 이용해서 사본 객체를 만든다.
this.user=tmpUser;
}
}
})
</script>
</html>set
Vue의 경우 data의 변경이 생기면 화면을 다시 렌더링해준다.
그런데 배열의 경우
1) 배열[i]='값' 형식으로 변경하면 렌더링이 되지 않는다.
2) 배열.length = '값' => 렌더링이 되지 않음
#해결 방법
(1) Vue.set(object,key,value)를 이용해서 배열요소를 변경한다.
(2) this.$set(object,key,value)를 이용한다.
(3) splice()함수를 사용하여 변경 => 인덱스가 2인 곳의 요소를 1개 삭제한 후에 300을 넣는다.
(4) 배열 사본을 만들어 수정한 뒤에 재할당하는 방법
=> ES6의 spread연산자를 이용하면 사본을 쉽게 만들 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2 v-for="(val,i) in arr" :key="i"> {{val}} </h2>
<button @click="change">배열 요소 값 변경</button>
</div>
</body>
<script>
new Vue({
el:'#app',
methods:{
change(){
//this.arr[0]=100; (x)
//Vue.set(this.arr,0,100); (1)
//this.$set(this.arr,0,100); (2)
//this.arr.splice(2,1,300); (3)
var arr_copy=[... this.arr]; //(4)
arr_copy[0]=500;
this.arr=arr_copy;
}
},
data(){
return {
arr:[1,2,3],
arr2:[
{name:'홍길동',age:20},
{name:'김길동',age:30}
]
}
}
})
</script>
</html>ES6 (EcmaScript 6 버전)
1. 단축 속성명 사용 가능
2. spread연산자 사용
3. 객체에도 spread연산자 사용
4. 배열 비구조화
5. 객체 비구조화 - alias 사용 가능, 기본 값을 할당할 수 있다, map함수를 이용해 새로운 배열요소를 생성할 수 있다.
//#1. 단축 속성명 사용 가능
var name ='홍길동';
let age=22;
const MAX=100; //상수 선언시 const를 이용
console.log('MAX='+MAX);
const obj={
//name:name,
name,
//age:23,
age,
lang:'JavaScript'
}
console.log(obj);
//#2. spread연산자 (전개 연산자) 사용
//배열이나 객체의 모든 속성을 풀어놓을 때 사용하는 문법
let one=[1,2,3,4];
let two=[22,33];
let arr=[...one,...two] //...은 풀어 놓는 다는 의미
console.log(arr);
let arr2=[1,2,3]//원본배열
let arr2Copy=[...arr2];//사본배열
arr2Copy.push(40);
console.log(arr2);
console.log(arr2Copy);
//#3. 객체에도 spread연산자를 사용하여 카피할 수 있다.
const obj1={name:'Happy',age:22};
//사본 obj2를 spread연산자 사용해서 만드세요
let obj2={...obj1};
obj2.age=33;
console.log(obj1);
console.log(obj2);
const o1 ={name:'Choi',age:25};
const o2 ={hobby:'Soccer'};
const o3 ={...o1,...o2};
console.log(o3);
const o4={x:1,x:10,y:'a'};
console.log(o4);
const o5={...o4,y:'b'};
console.log(o5);
//#4. 배열 비구조화(destructuring)
const arr3=[1,2,3,4];
const [a,b,c]= arr3;
console.log(a,b,c);
const [x, , y]=arr3;
console.log(x,y);
//swap
let aa=10;
let bb=20;
let tmp;
tmp=aa;
aa=bb;
bb=tmp;
console.log(aa,bb);
//배열 비구조화를 이용해 두 변수값 교환하기
[aa,bb]=[bb,aa];
console.log(aa,bb);
const barr=[10,20,30,40];
const [f, ...rest]=barr;
console.log(f);
console.log(rest);
const [xx,yy,z,w,...r]=barr;
console.log(xx,yy,z,w);
console.log(r);
//5.객체 비구조화 => 중괄호{}를 사용
/*
배열 비구조화에서는 배열의 순서가 중요하지만 객체 비구조화에서는 순서는 의미가 없다.
또한 배열 비구조화에서는 왼쪽 변수 이름을 임의로 정할 수 있지만
객체 비구조화에서는 기존 속성명을 그대로 사용해야 한다.
만약 존재하지 않는 속성명을 사용하면 undefined가 할당된다.
*/
const nobj = {name1:'Tom',age1:22};
const{age1, name1}=nobj;
console.log(age1,name1);
/*
객체 비구조화시 별칭 사용하기 비구조화시 속성명과 다른 이름으로 변수를 생성할 수 있다.
이는 중복된 변수명을 피하거나 더 구체적인 변수명을 만들고자 할 때 사용한다.
*/
const {name1:theName,age1:theAge} =nobj;
console.log(theName,theAge);
//기본값을 할당할 수 있다.
const obj3={name:undefined,age:25};
const {name:tname='hello',age:tage} = obj3;
console.log(tname,tage);
//#6. 자바스크립트의 map()함수 활용
// arr.map(callback,[args]) -callback : 새로운 배열요소를 생성하는 요소
let nums=[1,2,3,4,5];
//nums에 저장된 값들의 거듭제곱 값을 갖는 새로운 배열로 만들어보자.
let result=nums.map(function(val,i){
return val*val;
})
console.log(result);
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 104일차 - Vue 인스턴스, 컴포넌트(전역, 지역, 통신), 이벤트 버스, To Do App (0) | 2020.09.21 |
|---|---|
| 국비지원 103일차 - Spring 주문처리2, MyBatis foreach (0) | 2020.09.18 |
| 국비지원 101일차 - Spring 체크된 값만 받기, 주문처리 (0) | 2020.09.16 |
| 국비지원 100일차 - VueJS 예제(반복,조건,bind,filter), computed, v-model, CRUD(Create) (0) | 2020.09.15 |
| 국비지원 99일차 - Spring pointcut표현식, Interceptor (0) | 2020.09.14 |