Vue.component(컴포넌트이름 (문자열작성), {
template : ` ` //사용방법동일 백틱사용
data: function(){ //반드시함수로
return { 값이 여러개로들어가서 객체로 값넣어실행
},
methods : {
}
html
head태그
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>body
<div id="root">
<word-relay></word-relay>
<word-relay></word-relay>
<word-relay></word-relay>
</div>컴포넌트는 같은 것을 계속 랜더링하지만 중복을 제거
data는
같은 컴포넌트라고 해서 다 공유되는 것이 아니라 각각의 <word-relay></word-relay> 들이 각각의 data를 가진다 <word-relay></word-relay> 자체가 캡슐이다
캡슐화 : 안의 내용을 알수없음(template의 html요소를 알수 없음), 간단하게 쓸수 있다
뷰지정공간안 컴포넌트 이름('word-replay')을 태그로 불러온다 <word-relay></word-relay>
컴포넌트는
뷰인스턴스보다 위에 만들어져야되고 뷰인스턴스 = new Vue ({ })
컴포넌트의 스크립트가 body태그에있는 <div id = "root"> 보다 아래에 있어야 된다
뷰지정공간안 컴포넌트 이름의 태그로불러온다 <word-relay></word-relay>
랜더링 : 화면에 표시되는거
js
<script>
//반복되는 부분컴포넌트로 만들기
//PascalCase : 첫글자대문자 다음단어첫글자 대문자
//camelCase : 첫글자 소문자 다음단어첫글자 대문자
//kebab-case : 첫글자 소문자 다음단어소문자 첫글자와다음단어사이 - 로 이어줌
Vue.component('word-relay', { //핵심적인것 word-relay로 넘어감
template : `
<div>{{word}}</div>
<form v-on:submit="onSubmitForm">
<input type="text" ref="answer" v-model="value" >
<button type="submit">입력</button>
</form>
<div>{{result}}</div>
`,
data:{
word : '끝말잇기',
result :'' ,//결과
value : ''//inputvalue값
},
methods : {
onSubmitForm(e){
e.preventDefault();
//word 마지막글자 value의 첫글자
//length는 0부터시작안해서 -1을 해줌
if (this.word[this.word.length -1] === this.value[0]) {
this.result ='딩동댕';
//정답일때 제시어 바꿔주기 끝말잇기 기록 -> word
//value를 word로 만들어주기 정답을 제시어로 보내주기
this.word = this.value;
// input값비워주기
this.value ="";
//input값에 접근해서 포커스
this.$refs.answer.focus();
} else {
this.result = '땡';
this.value = "";
this.$refs.answer.focus();
}
},
}
} )
</script>
<script>
const app = new Vue ({//기본뷰 인스턴스 코드간결해짐 컴포넌트 사용해서
el : "#root",
});
</script>if (this.word[this.word.length -1] === this.value[0]) 는
word 단어의 문자길이 -1 맨끝자와 value의 맨첫글자가 같을때 실행된다
컴포넌트의 이름을 밑의 것들로 사용해줄수있다
PascalCase : 첫글자대문자 다음단어첫글자 대문자
ex)'WordRelay'
camelCase : 첫글자 소문자 다음단어첫글자 대문자
ex) 'wordRelay'
kebab-case : 첫글자 소문자 다음단어소문자 첫글자와다음단어사이 - 로 이어줌
ex) 'word-relay'
위의 js를 사용하면 이런 에러가 난다
컴포넌트 data를 함수로 사용해주지않았을때
The "data" option should be a function that returns a per-instance value in component definitions.
해석
"data" 옵션은 구성 요소 정의에서 인스턴스별 값을 반환하는 함수여야 합니다.
data:{
word : '끝말잇기',
result :'' ,//결과
value : ''//inputvalue값
},new vue에서는 data를 객체형식으로 만들줬지만
component에서는 반드시 data는 함수로 만들어줘야한다
data() {//데이터목록을 데이터객체를 돌려주는 함수로만듬
return {
word : '끝말잇기',
result :'' ,//결과
value : ''//inputvalue값
};이렇게 만들면 에러가 제거가된다 컴포넌트 자체가 여러번사용하는 것을 전제로 하고 있어
데이터가 각각 컴포넌트마다 달라야한다 새로운객체를 만들어서 리턴하는 메서드
data에는 함수안의 return도 반드시 적어줘야 값이 리턴되어나온다
template안의 태그를 하나의 태그에 안감싸줬을때
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
해석
구성 요소 템플릿은 정확히 하나의 루트 요소를 포함해야 합니다. 여러 요소에서 v-if를 사용하는 경우 대신 v-else-if를 사용하여 요소를 연결하십시오.
태그들을 하나의 태그에 감싸주지않아서 에러가 발생했다
js
template : `
<div>{{word}}</div>
<form v-on:submit="onSubmitForm">
<input type="text" ref="answer" v-model="value" >
<button type="submit">입력</button>
</form>
<div>{{result}}</div>
`,형제태그
템플릿(template)안의 태그들은
div form div 형제태그를 하나로 태그로 묶어줘야한다
세개가 동등위치에있으면 안되고 부모태그하나로 묶어줘야한다 컴포넌트의 특징
템플릿 작성할때
html요소이용하여 화면구성 ``(백틱) 아니면 ''(따옴표) 사용가능한데 한줄로만 작성 가능하다
js
template : `
<div>//부모태그 하나로 감싸줘야됨
<div>{{word}}</div>
<form v-on:submit="onSubmitForm">
<input type="text" ref="answer" v-model="value" >
<button type="submit">입력</button>
</form>
<div>{{result}}</div>
</div>
`,
전역컴포넌트 vs 지역컴포넌트
전역컴포넌트
Vue.component()를 전역(global)컴포넌트라고 부른다
전역컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트
뷰인스턴스 위에 작성
전연컴포넌트 안에서 다른 전역컴포넌트 불러오기
<div id="app">
<!-- 컴포넌트 안에 컴포넌트를 사용하여 불러옴 -->
<used-component></used-component>
</div>
<script>
Vue.component('small-component', {
template : `<p>small컴포넌트입니다</p>`//하나의 태그사용시 p태그사용
})
//다른컴포넌트를 템플릿에 불러와서 사용 htmldiv안에등록
Vue.component('used-component',{
template : `
<div>
<p>used컴포넌트입니다</p>
<!--전역컴포넌트를 불러옴-->
<small-component></small-component>
</div>
`
//small-component가 자식 used-component가 부모로나옴
})
new Vue({
el:"#app"
})
</script>used-componet안에 템플릿에 <small-component></small-component> 가 들어가서
<used-component></used-component>를 html div안에 등록하면
small-component 안의 template의 내용도같이나온다
전역컴포넌트안에서 다른 전역컴포넌트를 템플릿안에 불러올수있다
지역컴포넌트
new Vue ({
el : "#id",
components : { //지역컴포넌트는 컴포넌트뒤에 s를 붙여야된다
'컴포넌트이름' :{//컴포넌츠 안 여러가지 객체사용
template : ` `
}, //객체 안 여러개 넣을때 ,(쉼표) 사용
'컴포넌트이름' :{
template : ` `
},
}
})
지역컴포넌트 : 특정 인스턴스에서 내부에서만 사용할 수 있는 컴포넌트
vue인스턴스에 등록된 지역컴포넌트
지정된 el : "#id " 태그안에 컴포넌트 이름을 작성해줘야한다
<div id="app">
<!-- vue인스턴스에 등록된 지역컴포넌트 -->
<vuein-component></vuein-component>
<mychild-component></mychild-component>
<mychild2-component></mychild2-component>
</div>
<script>
new Vue({
el:"#app",
components : {//지역컴포넌트는 s붙여야됨
'vuein-component' : {//컴포넌트안 여러가지객체사용
template : `<p>div#app에서만 (Vue인스턴스에서만) 쓸수있는 컴포넌트입니다</p>`
},//data나 methods도 사용가능
'mychild-component' : {
template : `<P>Vue인스턴스의 첫번째 지역컴포넌트</P>`
},//객체안 여러개넣을때 쉼표로
'mychild2-component' : {
template : `<P>Vue인스턴스의 두번째 지역컴포넌트</P>`
},//객체
}
})
</script>위의 template에서 원래 div나 다른것으로 태그를 감싸서 최상위 태그를 적어줘야되는데
위의 것은 하나의 태그밖에 없어서 감싸주지 않아도된다
'Vue' 카테고리의 다른 글
| v-model (0) | 2022.03.21 |
|---|---|
| V-bind (0) | 2022.03.20 |
| 구구단만들기 $refs (0) | 2022.03.19 |
| vue 사용법 (0) | 2022.03.19 |
| 뷰인스턴스 template 사용 (0) | 2022.03.18 |