vue 3 그리고 composition api
주요 특징
composition api
multiple root element
suspense
typescript support
multiple v-model
@
그리고 :
display 속성
inline-block
flex
display: flex;
align-items: center;
justify-content: space-between;
standard browser javascript event naming
vue 3이 html과 연결되는 지점
import { createApp } from 'vue'
let data = () => { return { title : '', text : '', pages : null }}
let method = { method1 : () = > {}, method2 : () => {} }
let obj = { data, method, }
app = createApp(obj)
app.mount('#app')
template tag 내부의 script 영역
tag 외부: {{ }}
tag 내부
- vue directive 내부:
" "
- html 속성 내부:
v-bind:
를 추가한 " "
- html 속성 중 class의 경우에는 아래와 같이 사용
v-bind:class = "{ fav: true }"
Array.prototype.filter( () => { })
css tips
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin: 100px auto; //(top bottom) (left right)
border-radius: 10px;
import './assets/global.css' //in main.js
- 태그 선택자 / 클래스 선택자(.) / 아이디 선택자(#) / 하위 선택자( ) / 자식 선택자(>) / 인접형제 선택자(+) / 일반형제 선택자(~) / 속성 선택자([...]) / 가상클래스 선택자(:)
TEMPLATE REFS
<input type = "text" ref = "name"> ... </ ... >
<button @click="hC">click</button>
... hC(){ this.$refs.name.classList.add('active')}
... hc(){ this.$refs.name.focus()
teleport
<div class = "modals" /> //in index.html
<teleport to="modals"> //in vue components
PROPS
- 부모 컴포넌트 tag 속성값 => 자식 컴포넌트 script 변수
<Modal header= " ... " text = " ... " :abc = "['a', 'b', 'c']" /> // in 부모 컴포넌트 tag
props: ['header', 'text', 'abc'] // 자식 컴포넌트 Modal.vue script export 영역
<div :class = "{ sale: text === ''}">// 자식 컴포넌트 Modal.vue tag 영역
커스텀 이벤트
<Modal @close = " ... " /> // 부모 컴포넌트 tag 영역
this.$emit("close") // 자식 컴포넌트 script 영역
event modifier
click.self
click.prevent
click.alt
SLOT
- 슬롯은 일반적으로 opening tag와 closing tag 사이의 공간을 의미
<Modal > ... </Modal> //부모 컴포넌트
<slot> fallback </slot> //자식 컴포넌트
<Modal><template v-slot = "link"> ... </template></Modal>
<slot name = "link"> fallback </slot>
vue router
- router param
path: '/jobs/:id
$route.params.id //this 영역에 있지 않음
<router-link :to="{name: 'Jobs', params: { id: 3}}"
this.$router
this.$router.go(-1)
this.$router.push({ name: 'Home' })
- etc.
path: '/catchAll(.*)'
redirect: '/...'
FETCH
mounted() { fetch('...').then(res=>res.json()).then(data=>this.jobs= data).catch(err => console.log(err.message))}