728x90
1. v-for를 이용하여 배열의 index, value를 출력하라
const app = Vue.createApp({
data() {
return { goals: [], inputGoal: '', };
},
methods: {
addGoal(){
this.goals.push(this.inputGoal);
}
}
});
app.mount('#user-goals');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" v-model="inputGoal"/>
<button v-on:click="addGoal">Add Goal</button>
<p v-if="goals.length == 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
<li v-for="(goal,index) in goals">{{goal}} - {{index}}</li>
</ul>
</section>
</body>
</html>2. v-for를 이용하여 객체의 key, value를 출력하라
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" v-model="inputGoal"/>
<button v-on:click="addGoal">Add Goal</button>
<p v-if="goals.length == 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
<!-- 방법1 -->
<!-- <li v-for="(value,key) in goalsObj">{{key}} - {{value}}</li> -->
<!-- 방법2 -->
<li v-for="(value,key) in {name:'tomhoon', age:'29'}">{{key}} - {{value}}</li>
</ul>
</section>
</body>
</html>const app = Vue.createApp({
data() {
return {
goals: [],
inputGoal: '',
goalsObj: {
name: 'tomhoon',
age: '29',
}
};
},
methods: {
addGoal(){
this.goals.push(this.inputGoal);
}
}
});
app.mount('#user-goals');
3. v-for를 이용하여 click 했을 때 index 값에 해당하는 컴포넌트를 삭제하라
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" v-model="inputGoal"/>
<button v-on:click="addGoal">Add Goal</button>
<p v-if="goals.length == 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
<li v-for="(goal,index) in goals" v-on:click="delGoal(index)">{{goal}} - {{index}}</li>
</ul>
</section>
</body>
</html>const app = Vue.createApp({
data() {
return {
goals: [],
inputGoal: '',
goalsObj: {
name: 'tomhoon',
age: '29',
}
};
},
methods: {
addGoal(){``
this.goals.push(this.inputGoal);
this.inputGoal = '';
},
delGoal(index){
console.log('delGoal is Running...');
this.goals.splice(index,1);
},
}
});
app.mount('#user-goals');4. Vue reuse의 bug확인) 왜 input 안의 value가 유지되는지 설명하라
v-on:click.stop => bubbling으로 인한 url 막는 행위
예를 들어 ul -> li(url 태그있음) -> input(url 태그있음) 일 경우
input을 누르면 li,input 의 url 중 어떤 것이 실행될까?
버그 현상
두번째 input 박스에 텍스트를 넣었고
두번째 박스를 삭제 했는데도 불구하고
첫번째 input 박스에 두번째 텍스트가 들어가는 버그현상이 있다고 하는데
잘 되는데 ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" v-model="inputGoal"/>
<button v-on:click="addGoal">Add Goal</button>
<p v-if="goals.length == 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
<li v-for="(goal,index) in goals" v-on:click="delGoal(index)">
<p>{{goal}} - {{index}}</p>
<input type="text" v-on:click.stop>
</li>
</ul>
</section>
</body>
</html>const app = Vue.createApp({
data() {
return {
goals: [],
inputGoal: '',
goalsObj: {
name: 'tomhoon',
age: '29',
}
};
},
methods: {
addGoal(){``
this.goals.push(this.inputGoal);
this.inputGoal = '';
},
delGoal(index){
console.log('delGoal is Running...');
this.goals.splice(index,1);
},
}
});
app.mount('#user-goals');'데일리 공부 기록' 카테고리의 다른 글
| hands on vue - 게임만들기 2 (0) | 2023.03.02 |
|---|---|
| hands on vue - monster slayer 미니게임 만들기 (0) | 2023.03.02 |
| hands on vue - class들을 배열로 적용하기 (0) | 2023.03.01 |
| hands on vue - 선택에 따른 class를 method로 구현 (0) | 2023.03.01 |
| hands on vue - 선택에 따른 class 추가 (0) | 2023.03.01 |
