* vs code 정렬 단축키 : shift + alt + F
components 에 BoardVue.vue 파일 생성
* 파일이름주의 * 이름을 수정해도 계속 에러가 난다면 그냥 껐다가(ctrl + c) 다시 실행한다.
게시판 형태의 table 을 넣어본다.
<template>
<div>
<table border="1">
<tr>
<td>번호</td>
<td>제목</td>
<td>글쓴이</td>
<td>날짜</td>
<td>읽음</td>
</tr>
<tr v-for="n in items" v-bind:key="n.boardNo">
<td>{{ n.boardNo }}</td>
<td>{{ n.title }}</td>
<td>{{ n.writer }}</td>
<td>{{ n.date }}</td>
<td>{{ n.read }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {};
</script>
<style></style>
App.vue에서 연결해주면
스타일 적용해보면 아래처럼 뜬다.
이제 가운데의 script 부분에 데이터를 넣어줄예정
<script>
export default {
data() {
return {
}
},
};
</script>
이렇게 넣어준걸 for문으로 불러와보자.
<script>
export default {
data() {
return {
items: [
{ boardNo:10, title:'10번글', writer:'홍길동', date:'20230525', read:15 },
{ boardNo:9, title:'9번글', writer:'김길동', date:'20230524', read:16 },
{ boardNo:8, title:'8번글', writer:'최길동', date:'20230523', read:17 },
{ boardNo:7, title:'7번글', writer:'강길동', date:'20230522', read:18 },
{ boardNo:6, title:'6번글', writer:'임길동', date:'20230521', read:19 },
{ boardNo:5, title:'5번글', writer:'정길동', date:'20230520', read:20 },
{ boardNo:4, title:'4번글', writer:'광길동', date:'20230519', read:21 },
{ boardNo:3, title:'3번글', writer:'이길동', date:'20230518', read:22 },
{ boardNo:2, title:'2번글', writer:'박길동', date:'20230517', read:23 },
{ boardNo:1, title:'1번글', writer:'양길동', date:'20230516', read:24 }
]
}
},
};
</script>
일단 이 items를 잘 불러오는지 확인해보고
아래처럼 잘 불러온다.
for문 형식은
<tr v-for="n in items" > items 의 값들을 n이라는 변수로 뽑아내겠다는 의미다.
이렇게만 하면 v-bind:key 가 필요하다는 오류가 나는데 기준을 설정해주는 역할이지만 큰 의미는 없다고 한다.
<tr v-for="n in items" v-bind:key="n.boardNo">
<td>{{ n.boardNo }}</td>
<td>{{ n.title }}</td>
<td>{{ n.writer }}</td>
<td>{{ n.date }}</td>
<td>{{ n.read }}</td>
</tr>
</table>
테이블에 데이터들이 들어간 형태로 잘 나온다.
구구단 만들기 (for문)
template 태그 내부 테이블 하단에 아래처럼 찍어보면
<div v-for="n in 10" v-bind:key="n">
<div>{{ n }}</div>
</div>
index를 함께 찍어보면
<div v-for="(n, index) in 10" v-bind:key="n">
<div>{{ n }} / {{ index }}</div>
</div>
2중 for문 (div는 행 span은 열)
<br>
<div v-for="n in 9" v-bind:key="n">
<span v-for="i in 10" v-bind:key="i">{{ i }}</span>
</div>
9개의 div 내부에 span의 값들 10개가 각각 출력된 형태이다.
이걸 활용해서 구구단을 출력해보면
<br>
<div v-for="i in 9" v-bind:key="i">
<span v-for="j in 9" v-bind:key="j">
{{i + 1}} X {{j}} = {{((i+1)*j)}}
</span>
</div>
스타일도 지정은 다음에 다시 해보자
SoundOne 파일 만들어서
클릭버튼 & mp4파일 넣어주고,
script 부분에는 버튼을 눌렀을 때 이 파일을 실행할 수 있는 기능(play메소드)을 만들어준다.
App.vue 에 추가해주고
아래의 주소로 들어가서 버튼을 클릭하면 mp3파일이 재생이 된다.
버튼 하나더 만들어준다.
<template>
<div class="index">
<div>카운트 : {{ count }}</div>
<button v-on:click="bClick">클릭해보세요</button>
</div>
<button @click="play('http://172.30.1.1/deagum.mp4')">audioPlayer</button>
</template>
클릭했을 때 팝업이 뜨는 버튼이다.
<script>
export default {
methods: {
play(file){
if(file){
var audio = new Audio(file);
audio.play();
}
},
bClick(){
alert("!");
}
},
data:function(){
return{
count : 1
}
}
}
</script>
data 뒷부분에 function없이 괄호만 넣어줘도 된다.
<script>
export default {
methods: {
play(file){
if(file){
var audio = new Audio(file);
audio.play();
}
},
bClick(){
alert("!");
}
},
data(){
return{
count : 1
}
}
}
</script>
버튼을 클릭하면 팝업이 뜨고
카운트 : 1
this.count += 1 로 설정해주면
<script>
export default {
methods: {
play(file){
if(file){
var audio = new Audio(file);
audio.play();
}
},
bClick(){
//alert("!");
this.count += 1
}
},
data(){
return{
count : 1
}
}
}
</script>
버튼을 클릭할때마다 count값이 증가한다.
count값 내리는 버튼도 만들자.
<template>
<div class="index">
<div>카운트 : {{ count }}</div>
<button v-on:click="bClick">UP</button>
<button v-on:click="bClick2">DOWN</button>
</div>
<button @click="play('http://172.30.1.1/deagum.mp4')">audioPlayer</button>
</template>
<script>
export default {
methods: {
play(file){
if(file){
var audio = new Audio(file);
audio.play();
}
},
bClick(){
//alert("!");
this.count += 1
},
bClick2(){
//alert("!");
this.count -= 1
}
},
data(){
return{
count : 1
}
}
}
</script>
pdf 4페이지 참고
reset 버튼도 만들었다.
<template>
<div class="index">
<div>카운트 : {{ count }}</div>
<button v-on:click="upClick">UP</button>
<button v-on:click="downClick">DOWN</button>
<button v-on:click="resetClick">RESET</button>
</div>
<button @click="play('http://172.30.1.1/deagum.mp4')">audioPlayer</button>
</template>
<script>
export default {
methods: {
play(file){
if(file){
var audio = new Audio(file);
audio.play();
}
},
upClick(){
//alert("!");
this.count += 1
},
downClick(){
//alert("!");
this.count -= 1
},
resetClick(){
//alert("!");
this.count = 0
}
},
data(){
return{
count : 0
}
}
}
</script>
div 박스 추가해보자. ( DivBox.vue )
<template>
<div class="add"></div>
</template>
<script>
export default {
name : 'DivBox'
}
</script>
<style scoped>
.add {width: 100px; height: 100px; background-color: red;}
</style>
App.vue에서 불러와보면
박스 여러개 만들어주고
<template>
<DivBox></DivBox>
<DivBox></DivBox>
<DivBox></DivBox>
<soundOne></soundOne>
</template>
<script>
import SoundOne from './components/SoundOne.vue';
import DivBox from './components/DivBox.vue';
export default {
name: 'App',
components: {
SoundOne, DivBox
}
}
</script>
DivBox에서 스타일에 margin 적용해주면
<template>
<div class="add"></div>
</template>
<script>
export default {
name : 'DivBox'
}
</script>
<style scoped>
.add {width: 100px; height: 100px; background-color: red; margin: 5px;}
</style>
박스가 세개 생긴다.
Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue) (tistory.com)
Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)
이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다. emit이란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다.
webruden.tistory.com
