티스토리 뷰
😸 Vue TIL
😽 Done it
😼 Vue 시작
vue는 data가 바뀌면 화면이 바뀌는 반응성 프레임 워크입니다.
(반응성을 가진 data를 반응형 data라고 합니다.)
vue를 살펴 보기 전에 this
에 대해 조금 더 공부하면 좋을 것 같습니다.
<style>
.orange {
color: orange;
}
</style>
<div id="app">
<div v-bind:class="{orange: active}">{{counter}}</div>
</div>
<script>
const App = {
data() {
return {
counter: 0,
active: true,
};
},
};
const app = Vue.createApp(App).mount('#app');
v-...
디렉티브
v-bind
는data
를 연결해서 사용 할 수 있다.
a
속성에다가 b
데이터를 넣는다.
<div v-bind:a="b"></div>
v-on
는click, scroll, mouseenter...
과 같은 JS 이벤트를 붙여줄 수 있다.
<button v-on:click="increase">hello</button>
<script>
const App = {
...,
methods: {
increase() {
...
}
}
}
...
</script>
v-model
<input>
, <select>
요소 같은 양식을 지정하는 html
요소에 연결하는 디렉티브(양방향)
v-if
조건문,v-for
반복문
😼 Vue Application & instance
createApp
: Application instance를 반환하며 이 instance는 application 컨테스트를 제공합니다.
mount
: Application 루트 컴포넌트의 템프릿을 렌더링하여, 제시된 DOM element의innerHTML
을 치환한다.
😼 Vue tip
script
태그 안에서는 파스칼 표기법
,카멜 표기법
그냥 보통 html
요소에서는 dash case
로 사용 됩니다
created
:vue
application 생성 후mounted
:html
구조 연결 후{{}}
: 선언해 놓은 data 출력v-once
: data가 변경되어도 갱신 되지 않고 원래의 data 출력v-html
:html
구조로 출력(XSS 조심)v-bind
: 속성을 사용하도록 하는 디렉티브("" 안에는 data가 쓰이고 그냥 문자열을 넣고 싶을 때는 ''로 묶어서 넣는다.)
😺 Feeling
뭔가 진도를 잘 따라가고 있지만... 숙련도가 살짝 아쉬운 느낌이 듭니다. 특히 코드리뷰 반영이 쫌 밀렸습니다. 빨리 문제점을 파악해서 진화를 해야 하는데 아쉽습니다.
그런데 복습 기간에 확실히 문제점을 한번 싹다 정리를 할려고 합니다. 그때도 바쁠려나? 조금 미루고 있는 감이 있지만. 화이팅 해봐야 겠습니다. :)
📖 REF
반응형
'활동 > Dev Course TIL' 카테고리의 다른 글
05.08.2022-2 TIL (0) | 2022.05.08 |
---|---|
05.08.2022-1 TIL (0) | 2022.05.08 |
05.02.2022 TIL (0) | 2022.05.02 |
05.01.2022 TIL (0) | 2022.05.01 |
04.30.2022 TIL (0) | 2022.04.30 |
공지사항
최근에 올라온 글