컴포넌트는 인스턴스보다는 위에!
스크립트는 div#root보다는 아래에!
컴포넌트는 data: {
} 이런방식으로 하는게 아닌
data(){
return{
}
}
방식으로 함수를 만들어서 받아주어야 한다.
`` 백틱을 활용해서 template를 선언
props를 활용할때에는
선언은 kebab-case( -를 활용한 방식)
vue에서 사용할때는 자동으로 camelCase를 활용한다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>구구단</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <div>끝말잇기</div>
<br>
<div>{{word}}</div>
<form v-on:submit="onSubmitForm">
<input type="text" v-model="value" ref="answer">
<button type="submit">입력</button>
</form>
<div>{{result}}</div> -->
<word-relay start-word="유상무"></word-relay>
<word-relay start-word="초밥"></word-relay>
<word-relay start-word="바보"></word-relay>
</div>
<script>
//컴포넌트는 인스턴스보다는 위에!
//스크립트는 div#root보다는 아래에!
Vue.component("word-relay", {
template:
`
<div>
<div>끝말잇기</div>
<br>
<div>{{word}}</div>
<form v-on:submit="onSubmitForm">
<input type="text" v-model="value" ref="answer">
<button type="submit">입력</button>
</form>
<div>{{result}}</div>
</div>
`,
//컴포넌트에서는 데이터를 함수로 만들어줘야한다
props: ['start-word'],
data() {
return {
word: this.startWord,
result: '',
value: ''
}
},
methods: {
onSubmitForm(e) {
e.preventDefault();
if (this.word[this.word.length - 1] === this.value[0]) {
this.result = '정답!';
this.word = this.value;
} else {
this.result = '땡!!!!!!';
}
this.value = '';
this.$refs.answer.focus();
}
}
});
</script>
<script>
const app = new Vue({
el: '#root'
});
</script>
</body>
</html>컴포넌트를 활용해서 만들었기 때문에 각각 데이터에 대한 간섭이 일어나지 않는다.
props를 활용했기때문에 기초로 주어지는 값이 다르다.
'Vue > vue 기초 공부하기' 카테고리의 다른 글
| 반응속도 측정 게임 만들기(v-if, v-show, computed 활용) (0) | 2020.01.12 |
|---|---|
| Vue 숫자 야구 게임 만들기 (0) | 2020.01.12 |
| Vue로 아주 간단한 사칙연산 계산기 만들기(기초) (2) | 2020.01.06 |
| vue 기초 - 끝말잇기 만들기 (0) | 2020.01.05 |
| vue 구구단 만들기, ref 활용하기 (0) | 2020.01.05 |
