3) vue 공식 문서 보면서 메모 2
폴더 세팅
cdn을 사용해서 간단하게 실습을 한다. vue와 lodash cdn을 가져온다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
리스트 렌더링 ~ 컴포넌트(슬롯을 사용한 컨텐츠 배포 까지)
https://kr.vuejs.org/v2/guide/list.html
:key
리스트의 안에서만 고유하면 된다. 다른 리스트와 비교하지는 않음.
users 데이터에 일부러 id값을 중복시켰다. 중복된 값을 제거하는 방법을 .filter 와 .includes를 이용해서 만들어 볼 수 있다.
lodash라는 자바스크립트 라이브러리를 이용하면 간단하고 깔끔하게 중복값을 제거할 수 있다.
https://lodash.com/docs/4.17.15#uniqBy
<div id="app">
<ul>
<li v-for="user in youngUsers"
:key="user.id">
<ul>
<template v-for="email in user.emails">
<li v-if="hasGmail(email)" :key="email">
</li>
</template>
</ul>
</li>
</ul>
</div>
<script>
const users = [{
id: 'R1V9GFcnuy',
name: 'Neo',
age: 85,
emails: ['neo@gmail.com', 'neo@naver.com'],
isValid: true,
},
{
id: 'jjcuENuCDz',
name: 'Evan',
age: 99,
emails: ['evan@hanmail.net'],
isValid: true
},
{
id: 'QC3QFHt5gM',
name: 'Lewis',
age: 22,
emails: ['lewis@naver.com', 'lewis@hanmail.net'],
isValid: false
},
{
id: 'cbEM3BxZpr',
name: 'Lia',
age: 72,
emails: ['lia@gmail.com'],
isValid: false
},
{
id: 'WQ9clrJLiH',
name: 'Amy',
age: 41,
emails: ['amy@gmail.com', 'amy@naver.com'],
isValid: true
},
{
id: 'R1V9GFcnuy',
name: 'Neo',
age: 85,
emails: ['neo@gmail.com', 'neo@naver.com'],
isValid: true,
}
]
new Vue({
el: '#app',
data() {
return {
users
}
},
computed: {
uniqUsers() {
return _.uniqBy(this.users, 'id')
// const ids = []
// return this.users.filter(user => {
// if (ids.includes(user.id)) {
// return false
// }
// ids.push(user.id)
// return true
// })
},
youngUsers() {
return this.uniqUsers.filter(user => user.age < 80)
}
},
methods: {
hasGmail(email) {
// 간단한 정규표현식 사용. email 변수에 '@gmail'포함 여부를 불린으로 반환
return /@gmail\.com/.test(email)
}
}
})
</script>
이벤트 수식어
.self는 currentTarget과 target이 같을 때만 실행
See the Pen by kabinny (@kabinny) on CodePen.
키 수식어
<div id="app">
<input @keyup.page-down="handler">
<!-- 체이닝 가능 -->
<input @keyup.shift.enter="handler">
</div>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
handler(event) {
console.log(event)
}
}
})
</script>
폼 입력 바인딩
<div id="app">
<!-- 단방향 데이터 바인딩 -->
<!-- <input type="text" :value="msg"> -->
<!-- CJK 완벽 동기화 -->
<!-- <input type="text" :value="msg" @input="changeInput"> -->
<!-- 엔터나 탭, 블러 등 될 때 -->
<!-- <input type="text" v-model.lazy="msg"> -->
<!-- 숫자형으로 형변환 -->
<!-- <input type="text" v-model.number="msg"> -->
<!-- 문자 데이터에서 앞뒤 공백을 제거 -->
<!-- <input type="text" v-model.trim="msg"> -->
<input type="text" v-model.trim="msg">
<input type="checkbox" v-model="checked">
<button @click="log">Click me!</button>
<div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: 'Hello Vue!',
checked: true
}
},
methods: {
log() {
console.log(this.msg)
// console.log(typeof this.msg)
this.checked = !this.checked
},
changeInput(event) {
// 인풋 될 때 마다 수동으로 갱신하기. v-model 은 자동으로 해주지만 CJK 입력 이슈가 있다. 완벽 동기화를 위해 수동 연결.
this.msg = event.target.value
}
}
})
</script>
See the Pen vue_v-model test by kabinny (@kabinny) on CodePen.
폼 수정 예제
See the Pen vue-폼 수정 모드 예제 by kabinny (@kabinny) on CodePen.
javascript call stack
setTimeout 하려면 WebAPI에 요청해야함.. 0초를 설정해도 정확히 0초 후 실행되는 것은 아님. 자세한 것은 검색해보자.
컴포넌트 사용하기
https://kr.vuejs.org/v2/guide/components.html#컴포넌트-작성
컴포넌트를 등록하고 부모 자식 관계에서 데이터 주고 받기 해보기
부모 ⇒ 자식: props를 이용.
자식 ⇒ 부모: 커스텀 이벤트를 만든다.
See the Pen vue_props, $emit by kabinny (@kabinny) on CodePen.
슬롯
단일 슬롯
See the Pen vue_slot1 by kabinny (@kabinny) on CodePen.
이름을 가지는 슬롯
<div id="app">
<user-comp>
<p slot="second">slot에 이름을 붙일 수 있다.</p>
<h2 slot="first">슬롯!</h2>
</user-comp>
</div>
<script>
const UserComp = {
template:
`<div>
<h1>Slot</h1>
<slot name="first"></slot>
<slot name="second"></slot>
</div>`
}
new Vue({
el: '#app',
components: {
'user-comp': UserComp
}
})
</script>
vuetify
vue ui framework. 부트스트랩보다 기능이 많고 좋다.
Leave a comment