📍computed()- 다른 반응형 상태(ref)에 기반한 새로운 반응형 상태를 만듬const filteredTodos = computed(() => { return hideCompleted.value // ref ? todos.value.filter((t) => !t.done) // ref : todos.value})- computed property를 만드는데 사용된 반응형 상태가 변경되면 computed property도 자동으로 업데이트됨- 전체 코드 Add Todo {{ todo.text }} X {{ hideCompleted ? 'Show all' : 'Hide completed' }}

📍v-for directive- v-for 를 사용하여 배열에 기반한 엘리먼트 리스트를 렌더링할 수 있다 {{ todo.text }} - 위 예시에서 todo는 지역 변수로, source array의 원소 엘리먼트를 나타내며,- v-for 엘리먼트 내부에서만 접근 가능 (함수 스코프처럼)- 나열되는 엘리먼트의 key 어트리뷰트에 유니크한 값을 전달해야 함📍리스트 렌더링을 업데이트하는 방법 2가지1. source array에 mutating 메서드 호출todos.value.push(newTodo)2. array 교체todos.value = todos.value.filter(/* ... */) - 초간단 todo list 예시- @submit.prevent => e.preventDefault(..

📍v-if directive- v-if 를 사용하여 조건부 렌더링 가능Vue is awesome!- 위 예시에서 awesome 변수가 truthy일 때만 엘리먼트가 렌더링됨- v-else, v-else-if 문으로 분기 처리 가능Vue is awesome!Oh no 😢- v-if directive가 있는 엘리먼트 아래의 v-else에 인자를 전달하지 않아도 됨

📍v-model directive- v-bind, v-on directive를 함께 사용하면 엘리먼트에 양방향 바인딩을 만들 수 있다- 즉, value와 컴포넌트의 state가 동기화된다function onInput(e) { // a v-on handler receives the native DOM event // as the argument. text.value = e.target.value} - 양방향 바인딩을 단순화하기 위해, v-model directive를 사용할 수 있다 - v-model은 자동으로 value와 바인딩된 state를 동기화한다- 따라서 v-model을 사용하면 별도의 이벤트 핸들러를 부착하지 않아도 된다- v-model은 text input, checkbox, ra..

📍v-on directive- DOM 이벤트를 감지하기 위해 v-on directive를 사용한다- 아래 코드에서는 increment라는 이름의 click 이벤트 핸들러를 부착했다{{ count }} - v-on directive는 아래와 같은 축약 문법을 가짐{{ count }}

📍v-bind directive- mustaches 문법({{ }})은 오직 tex를 표시하기 위해 사용한다- 동적인 값을 어트리뷰트로 바인딩하기 위해서 v-bind directive를 사용한다 - directive는 v- 접두사로 시작하는 특별한 어트리뷰트이다- directive 값은 컴포넌트의 state에 접근할 수 있는 JS 표현식이다- 위 예시에서 :id는 directive의 인자에 해당하며, 컴포넌트의 상태에서 dynamicId 프로퍼티에 동기화된다- v-bind는 자주 사용되므로 아래와 같은 단축된 문법을 갖는다

📍Reactive state: reactive()- state가 바뀌면 HTML도 자동으로 업데이트됨- 이 state는 reactive 성격을 띔- Vue.js의 reactive() API를 활용하여 reactive state 선언 가능- reactive() API로 만들어진 객체들은 JS 프록시 객체들이고 일반 객체들처럼 작동함import { reactive } from "vue";const counter = reactive({ count: 0,});console.log(counter.count); // 0counter.count++; 📍Reactive state: ref()- reactive()는 객체에 대해서만 작동(배열, Map, Set 포함)- 반면 ref()는 어떤 타입에든 자유롭게 사용..

📍SFC 문법- HTML과 유사한 구문을 사용하여 Vue 컴포넌트를 만드는 포맷- *.vue 파일 확장자를 사용- HTML문법을 그대로 사용 가능 .vue 파일의 최상단에는 아래 블럭들이 올 수 있음 (선택적으로 커스텀 블럭 사용 가능)- - -  예시 📍Language Blocks- .vue 파일에서 최상단에 1개만 존재- 에 작성한 내용은 @vue.compiler-dom에 전달되고,- JS render 함수로 pre-compile된 후,- export 되는 컴포넌트에 render 옵션으로 첨부됨 - .vue 파일에서 최상단에 1개만 존재 ( 과 별개로 카운트)- ES Module 처럼 실행됨- 내부에 default export를 작성할 수 있는데, 이때 반환값은 일반 객체 or defineComp..