Daily Codig Reminder
click, event, preventDefault, eventBus
char1ie
2024. 3. 14. 17:20
event01_click2
<template>
<div id="app">
<HelloWorld msg="이벤트 실습"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div>
<h1>{{ result }}</h1>
값1: <input type="text" v-model="num1" />
값2: <input type="text" v-model="num2" />
<button @click="sum('+')">+</button>
<button @click="sum('-')">-</button>
<button @click="sum('*')">*</button>
<button @click="sum('/')">/</button>
</div>
</template>
<script>
export default {
data() {
return {
num1: "",
num2: "",
result: null
};
},
methods: {
sum(e) {
this.result = parseInt(this.num1) + parseInt(this.num2);
switch (e) {
case '-':
this.result = parseInt(this.num1) - parseInt(this.num2);
break;
case '*':
this.result = parseInt(this.num1) * parseInt(this.num2);
break;
case '/':
this.result = parseInt(this.num2) !== 0 ? parseInt(this.num1) / parseInt(this.num2) : "Error: Division by zero";
break;
default:
// For addition, no need to modify this.result, as it's already set above
}
return this.result;
}
}
};
</script>
<style>
</style>
<template>
<div>
<h1>이벤트 실습</h1>
가격: <input type="text" v-model="price"><br>
갯수:
<select @change="sum" v-model="quantity">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<br>
<span>{{ total }}</span>
</div>
</template>
<script>
export default {
data:function(){
return{
price:"",
quantity:"",
total:""
}
},
methods:{
sum:function(){
this.total=Number.parseInt(this.price)*Number.parseInt(this.quantity);
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>도서목록{{ msg }}</h1>
<div v-for="(book, idx) in booklist" :key="idx">
<input type="checkbox" v-model="books" :value="book.name" />
{{ book.name }}, {{ idx }}번, 가격: {{ book.price }}
<button @click="del" :data-idx="idx">삭제</button>
</div>
<hr />
<button @click="allDel">선택삭제</button>
</div>
</template>
<script>
export default {
props: {
msg: String,
},
data() {
return {
booklist: [
{ name: "자바의 정석", price: 3000 },
{ name: "jsp 정석", price: 4000 },
{ name: "spring 정석", price: 5000 },
{ name: "jquery 정석", price: 5000 },
{ name: "angular 정석", price: 7000 },
],
books: [], // 선택된 책 목록 저장
};
},
methods: {
del(e) {
var delIdx = e.target.dataset.idx;
console.log(delIdx);
this.booklist.splice(delIdx, 1);
},
allDel() {
var xx = this.booklist;
console.log(this.books); //'자바의 정석','spring 정석','jsp 정석'
this.books.map((ele, idx) => {
console.log(this);
xx.map((e, i) => {
if (ele == e.name) {
console.log(i, idx); //전체 책의 idx 값
xx.splice(i, 1); //1개 삭제
}
});
});
},
},
};
</script>
<style></style>
람다
<template>
<div>
<h1>도서목록{{ msg }}</h1>
<div v-for="(book, idx) in booklist" :key="idx">
<input type="checkbox" v-model="books" :value="book.name" />
{{ book.name }}, {{ idx }}번, 가격: {{ book.price }}
<button @click="del" :data-idx="idx">삭제</button>
</div>
<hr />
<button @click="allDel">선택삭제</button>
</div>
</template>
<script>
export default {
props: {
msg: String,
},
data() {
return {
booklist: [
{ name: "자바의 정석", price: 3000 },
{ name: "jsp 정석", price: 4000 },
{ name: "spring 정석", price: 5000 },
{ name: "jquery 정석", price: 5000 },
{ name: "angular 정석", price: 7000 },
],
books: [], // 선택된 책 목록 저장
};
},
methods: {
del(e) {
var delIdx = e.target.dataset.idx;
console.log(delIdx);
this.booklist.splice(delIdx, 1);
},
allDel() {
var xx = this.booklist;
console.log(this.books); //'자바의 정석','spring 정석','jsp 정석'
this.books.map((ele, idx) => {
console.log(this);
xx.map((e, i) => {
if (ele == e.name) {
console.log(i, idx); //전체 책의 idx 값
xx.splice(i, 1); //1개 삭제
}
});
});
},
},
};
</script>
<style></style>
이벤트
@click="prevent”
preventDefault();
target.html로 이동
<template>
<div>
<h1>{{ msg }}</h1>
<a href="https://www.daum.net" @click="prevent">다음 -preventDefault</a><br>
<a href="https://www.google.com" target="_blank">구글</a><br>
<form action="target.html" @submit="prevent">
<button>전송</button>
</form>
</div>
</template>
<script>
export default {
props:{
msg:String
},
methods:{
prevent:function(e){
console.log("함수호출됨");
e.preventDefault();
}
}
}
</script>
<style>
</style>
이벤트 수식어
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="x" >x()</button><br>
<button v-on:click.once="x">x() once</button><br>
<h1>2. preventDefault이벤트 수식어</h1>
<a href="https://www.daum.net" @click="y">다음1 y</a><br>
<a href="https://www.daum.net" v-on:click="y2" target="_blank">다음2 y2</a><br>
<a href="https://www.daum.net" v-on:click.prevent="y2" target="_blank">다음2 prevent</a><br>
<h1>2.이벤트 전파방지</h1>
<div style="background-color: yellow" @click="aaa">
aaa
<div style="background-color: green" @click="bbb">bbb</div>
</div>
<hr>
<h1>3. stop 이벤트 수식어</h1>
<div style="background-color: yellow" @click="aaa">
aaa
<div style="background-color: red" @click="bbb">bbb</div>
</div>
<hr>
<div style="background-color: yellow" @click="aaa">
aaa
<div style="background-color: red" @click.stop="bbb">bbb</div>
</div>
<h1>4. 이벤트 수식어</h1>
<input type="text" @keyup="xyz" >keyup<br>
<input type="text" v-on:keyup.enter="xyz" >keyup.enter<br>
<h1>5. ctrl</h1>
<input type="text" @keyup.ctrl.enter="xyz" >keyup.ctrl.enter<br>
<input type="text" v-on:keyup.ctrl.up="xyz" >keyup.ctrl.up<br>
</div>
</template>
<script>
export default {
methods:{
aaa:function(){
console.log("aaa===");
},
bbb:function(e){
console.log("bbb===");
e.stopPropagation();
},
x:function(){
console.log("x===");
},
y:function(){
console.log("y===");
},
y2:function(){
console.log("y2===");
},
xyz:function(){
console.log("xyz===");
}
}
}
</script>
<style>
</style>
emit
app.vue
<template>
<div>
<h1>이벤트 실습</h1>
<!--자식에서 부모로 데이터 전송은 이벤트를 이용-->
<!--자시겡서는 이벤트를 emit 하고 부모는 v-on을 이용하여 수신한다-->
<!--this.$emit("xyz") :이벤트 명칭 전달 => v-on:xyz="recieve"-->
<button @click="xyz" >부모에게 데이터 전송1</button><br>
<!--//1. 이벤ㅌ 발생-->
<button @click="xyz2" >부모에게 실제데이터 전송2</button><br>
<!--//1. 이벤트 발생 , 데이터 전달-->
</div>
</template>
<script>
export default {
props:{
msg:String
},
data:function(){
},
methods:{
xyz:function(){
console.log("xyz========", this);
this.$emit("xyz"); //2.이벤트 명칭을 부모에게 이벤트
//"xyz "로 전달
},
xyz2:function(){
console.log("xyz2========", this);
this.$emit("xyz2",100,"홍길동"); //2.이벤트 명칭을 부모에게 이벤트
//"xyz "로 전달
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<HelloWorld msg="이벤트"
v-on:xyz="recieve1"
v-on:xyz2="recieve2"
/>
<!-- 3.이벤트 발신명으로 수신, 처리함수 등록-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
methods:{
recieve1:function(){
console.log("부모가 xyz이벤트를 받아 receieve 를 실행함")
},
recieve2:function(value1, value2){
console.log("부모가 xyz이벤트를 받아 receieve함수 호출: " ,value1, value2)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
BookList
App.vue
<template>
<div id="app">
선택한 책이름 :{{ bookName }}
<bookList msg="BookList exam" v-bind:bookList="list"
v-on:xyz="receive"
/>
</div>
</template>
<script>
import bookList from './components/BookList'
export default {
name: 'App',
components: {
bookList
}
,
data:function(){
return{
list:[
{
id: "p01",
name: "위험한 식탁",
price: 2000,
date: "20170401",
img: "a",
},
{
id: "p02",
name: "공부의 비결",
price: 3000,
date: "20170402",
img: "b",
},
{
id: "p03",
name: "오메르타",
price: 2500,
date: "20170401",
img: "c",
},
{
id: "p04",
name: "행복한 여행",
price: 4000,
date: "20170401",
img: "d",
},
{
id: "p05",
name: "해커스 토익",
price: 2000,
date: "20170401",
img: "e",
},
{
id: "p06",
name: "도로 안내서",
price: 2000,
date: "20170401",
img: "f",
}
],
bookName:""
}
},
methods: {
receive:function(data) {
console.log(data);
this.bookName = data;
},
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
BookList.vue
<template>
<div>
<h2>{{ msg }}</h2>
<ul v-for="(book, index) in bookList" :key="index">
<a @click ="xyz">
<img v-bind:src="require(`../assets/image/${book.img}.jpg`)"
width="100" height="100"
v-bind:data-xxx="book.name">
</a>
{{ book.name }}
</ul>
</div>
</template>
<script>
export default {
name:"BookList",
props: {
msg: String,
bookList: Array,
},
methods: {
xyz:function(e) {
console.log(e.target.dataset.xxx);
this.$emit("xyz", e.target.dataset.xxx);
},
},
};
</script>
<style>
</style>
클릭시 HelloWorld2로 이벤트 전달
EventBus.vue
<script>
import Vue from 'vue';
var eventBus = new Vue(); //이벤트 버스 생성
export default eventBus;
</script>
HelloWorld.vue
<template>
<div>
{{msg}}
<button @click="x" >HelloWorld2로 이벤트 전달</button>
</div>
</template>
<script>
import eventBus from './EventBus';
export default {
name:"HelloWorld",
props:{
msg:String
},
methods:{
x:function(){
console.log("x호출됨");
eventBus.$emit("xyz")//이벤트 전달명 xyz
}
}
}
</script>
<style>
</style>
HelloWorld2.vue
<template>
<div>
{{ msg }}
<input type="text" v-bind:value="receiveData">
</div>
</template>
<script>
import eventBus from './EventBus.vue';
export default {
props:{
msg:String
},
created:function(){
console.log("create호출됨======");
eventBus.$on("xyz",this.receive)
},
data:function(){
return{
receiveData:""
}
},
methods:{
receive:function(){
console.log("receive 호출됨");
this.receiveData="형제가 호출완료";
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div >
<HelloWorld msg="이벤트버스(형제간의 데이터 전달방법)"/>
<HelloWorld2 msg="이벤트버스2(형제간의 데이터 전달방법)"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'
export default {
name: 'App',
components: {
HelloWorld,
HelloWorld2
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>