일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- queryset
- 싸피10기
- VITE
- SQL
- git
- sqld
- 셀프넘버
- 플로이드워셜
- 백준
- 머신러닝종류
- TypeScript
- db
- Python
- react
- SSAFYcial
- PWA
- 알고리즘
- 리액트
- QuerySetAPI
- vitepwa
- 데코레이터
- SSAFY
- unionfind
- 싸피셜
- 싸피
- pwa적용하기
- Javascript
- js
- 14658
- Django
- Today
- Total
목록FrontEnd/Vue (28)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sczM2/btszM2Craj0/tGCIVO4cADNhbkWfFeeOok/img.png)
# watch() 반응형 데이터를 감시하고 감시하는 데이터가 변경되면 콜백 함수를 호출 computed랑 비슷한 역할 구조 const countWatch = watch(count, (newValue, oldValue) => { consol.log(`newValue : ${newValue}, oldVlaue: ${oldValue}`) }) 이런 형식으로 쓴다 예시: message를 입력할 때마다 길이를 알려주기 const message = ref('') const messageLength = ref(0) const messageWatch = watch(message, (newValue, oldValue) => { messageLength.value = newValue.length }) watch는 자동으로..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Lid7r/btszTx9st5r/Agcy9kYaXq7C7Qf5kMEgzK/img.png)
# v-for 소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러번 렌더링 구조는 "alias(별칭) in expression"의 형식 인덱스에 대한 별칭을 지정할 수 있음 {{ item.text }} 객체에서는 갯수에 따라 순서가 정해져있음 1. 배열에서 v-for {{ index }} // {{item.name}} 2. 객체에서 v-for {{ index }} / {{ key }} / {{ value }} 3. template에서 v-for 여러 요소를 한번에 반복하려면 template을 이용 → 포장해주자 {{ item.name }} {{ item.age }} 4. 중첩 v-for 각 v-for 범위는 상위 범위에 접근 가능 const myInfo = ref([ { name: 'Alice', ag..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/t80tq/btszK8wBEkD/IvUvDcF65UMGjzNEk2x6Z1/img.png)
# v-if 표현식 값의 true/ false에 따라 요소를 조건부로 렌더링 v-else도 같이 쓸 수 있음 한번 써보기 const isSeen = ref(true) true일때 보여요 false일때 보여요 토글 v-else-if도 사용 가능 Alice입니다 Bella입니다 Cathy입니다 아무도 아닙니다. v-if는 directive이므로 단일 요소에만 연결 가능 여러개에 쓰려면 template요소에 v-if사용 Cathy입니다 나이는 30살입니다 template 요소가 뭔데? 페이지가 로드될 때 랜더링되지 않았지만 JavaScript를 사용하여 나중에 문서에서 사용할 수 있도록하는 HTML을 보유하기위한 메커니즘 보이지 않는 wrapper역할을 함 근데, 비슷한 녀석이 하나 더 있음 # v-show ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cGGgj2/btszJ0TEvU0/w6fMsCfHOqYEy22hCPrC81/img.png)
# Computed() 계산된 속성을 정의하는 함수 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고, 불필요한 반복 연산을 줄인다. 예를 들어, {{ todos.length > 0 ? '아직 남았다' : '퇴근!' }} 이런식으로 todos라는 object의 길이에 따라 메세지를 출력할 때, todos의 length를 계속 계산하게 됨 만약 이 계산을 템플릿에서 계속 쓴다면 복잡해짐 → 미리 계산을 해두고, 계속 가져오자 ▶ 그때 쓰는게 computed! 한번 computed로 바꿔볼까 const { createApp, ref, computed } = Vue computed를 쓰기 위해 가져오고 const restOfTodos = computed(() => { return todos.val..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BFQ82/btszClKcOF4/kqJSE9pk76nPco60jz0ogK/img.png)
Vue를 이용해서 TodoList를 만들어보자 0. 사전준비 작성하기 편하게 html과 js을 분리해준다. html에는 기본적인 형식과 vue의 cnd을 넣어주고, js에는 기본적인 틀을 만들어준다. const { createApp,ref } = Vue const app = createApp({ setup() { return { } } }) app.mount('#app') 1. Todo 항목 추가하기 해야하는 일을 담을 todos라는 배열과 새롭게 추가할 newTodo라는 항목을 만들어준다. 그리고 newTodo를 todos에 추가해줄 addTodo 함수도 정의해준다. (return에 추가하는건 생략) const todos = ref([]) const newTodo = ref('') const addTo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqrkfl/btszAZ0VB0o/bBjBdbPLc8876jaZqurPsK/img.png)
# Form Input Bindings form을 처리할 때 사용자가 input에 입력하는 값을 실시간으로 JavaScript 상태에 동기화해야하는 경우 = 양방향 바인딩 하는 방법? 1) v-bind와 v-on 함께 사용 2) v-model 사용 1) v-bind와 v-on 함께 사용 v-bind: input 요소의 value 속성 값을 입력 값으로 사용 v-on: input 이벤트가 발생할 때마다 input 요소의 value 값을 별도 반응형 변수에 저장하는 핸들러 호출 const inputText1 = ref('') const onInput = function (event) { inputText1.value = event.currentTarget.value } {{inputText1}} → 근데 너..
# v-on DOM 요소에 이벤트 리스너를 연결 및 수신 = addEventListener를 부착한거 v-on도 @로 대신 써도 됨 v-on:event="handler" @event="handler" handler의 종류 Inline handlers: 이벤트가 트리거될 때 실행 될 JavaScript 코드 Method handlers: 컴포넌트에 정의된 메서드 이름 1.lnline handlers 간단한 이벤트를 처리할 때 사용됨 const count = ref(0) Add 1 2. Method handlers Inline으로 불가능할 때(함수가 너무 길 때) const name = ref('Bok') const myFun = function (event) { console.log(`hello, ${na..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oc7to/btszAk5iy7I/CKRluPv7tvkORIOYB0zxK0/img.png)
# v-bind란? 하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩 1. Attiribute Bindings link link v-bind:에서 :만 써도 된다. Dynamic attribute name(동적 인자 이름) 대괄호로 감싸서 directive argument에 JavaScript 표현식을 사용할 수도 있음 JavaScript 표현식에 따라 동적으로 평가된 값이 최종 argument값으로 사용됨 .... ... const dynamicattr = ref('title') // 여기 카멜케이스 안됨 다 소문자로 const dynamicValue = ref('Hello') 2. Class & Style Bindings class와 style도 속성이므로 v-bind를 사용해서 동적..