목표 : 이해가 아닌 읽을 줄 아는 것.
전제조건 : 기본 HTML, CSS, JavaScript는 알 것.
** {{}}를 mustaches -> 콧수염이라고 부름.
<script>
export default {
data() {
return {
titleClass: 'title'
}
}
}
</script>
<template>
<h1 :class="titleClass">Make me red</h1>
</template>
<style>
.title {
color: red;
}
</style>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
}
</script>
<template>
<button @click="increment">count is: {{ count }}</button>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
onInput(e) {
this.text = e.target.value
}
}
}
</script>
<template>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</template>
<script>
export default {
data() {
return {
awesome: true
}
},
methods: {
toggle() {
this.awesome = !this.awesome;
}
}
}
</script>
<template>
<button @click="toggle">toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</template>
<script>
let id = 0
export default {
data() {
return {
newTodo: '',
todos: [
{ id: id++, text: 'Learn HTML' },
{ id: id++, text: 'Learn JavaScript' },
{ id: id++, text: 'Learn Vue' }
]
}
},
methods: {
addTodo() {
this.todos.push({
id: id++,
text: this.newTodo,
});
this.newTodo = ''
},
removeTodo(todo) {
this.todos = this.todos.filter(ele=> ele !== todo);
}
}
}
</script>
<template>
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">Add Todo</button>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
<button @click="removeTodo(todo)">X</button>
</li>
</ul>
</template>
** 실수한 부분 todos.filter(ele => ele !== todo) 해당함수는 새로운 배열을 반환하는 함수이므로 state에 바로 반영하고 싶으면 this.todos = this.todos.filter(ele => ele !== todo)로 해야한다.
<script>
let id = 0
export default {
data() {
return {
newTodo: '',
hideCompleted: false,
todos: [
{ id: id++, text: 'Learn HTML', done: true },
{ id: id++, text: 'Learn JavaScript', done: true },
{ id: id++, text: 'Learn Vue', done: false }
]
}
},
computed: {
filteredTodos() {
return this.hideCompleted ?
this.todos.filter(ele=> !ele.done) :
this.todos
}
},
methods: {
addTodo() {
this.todos.push({ id: id++, text: this.newTodo, done: false })
this.newTodo = ''
},
removeTodo(todo) {
this.todos = this.todos.filter((t) => t !== todo)
}
}
}
</script>
<template>
<input v-model="newTodo" @keyup.enter="addTodo" />
<button @click="addTodo">Add Todo</button>
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">
<input type="checkbox" v-model="todo.done">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(todo)">X</button>
</li>
</ul>
<button @click="hideCompleted = !hideCompleted">
{{ hideCompleted ? 'Show all' : 'Hide completed' }}
</button>
</template>
<style>
.done {
text-decoration: line-through;
}
</style>
<script>
export default {
mounted() {
this.$refs.p.textContent = "hello world!";
}
}
</script>
<template>
<p ref="p">hello</p>
</template>
<script>
export default {
data() {
return {
todoId: 1,
todoData: null
}
},
methods: {
async fetchData() {
this.todoData = null
const res = await fetch(
`https://jsonplaceholder.typicode.com/todos/${this.todoId}`
)
this.todoData = await res.json()
}
},
mounted() {
this.fetchData()
},
watch: {
todoId() {
this.fetchData()
}
}
}
</script>
<template>
<p>Todo id: {{ todoId }}</p>
<button @click="todoId++">Fetch next todo</button>
<p v-if="!todoData">Loading...</p>
<pre v-else>{{ todoData }}</pre>
</template>
<script>
import ChildComp from './ChildComp.vue'
export default {
components: {
ChildComp
}
}
</script>
<template>
<ChildComp />
</template>
<script>
import ChildComp from './ChildComp.vue'
export default {
components: {
ChildComp
},
props: {
msg: String
},
data() {
return {
greeting: 'Hello from parent'
}
}
}
</script>
<template>
<ChildComp :msg="greeting" />
</template>
<script>
import ChildComp from './ChildComp.vue'
export default {
components: {
ChildComp
},
emits: ['response'],
data() {
return {
childMsg: 'No child msg yet'
}
},
created() {
this.$emit('response', 'hello from child')
}
}
</script>
<template>
<ChildComp @response="(msg) => childMsg=msg"/>
<p>{{ childMsg }}</p>
</template>
<script>
import ChildComp from './ChildComp.vue'
export default {
components: {
ChildComp
},
data() {
return {
msg: 'from parent'
}
}
}
</script>
<template>
<ChildComp>Message {{msg}}</ChildComp>
</template>