dev_0hoon

- 블록 단위 {} 로 변수의 범위가 제한되었음- const : 한번 선언한 값에 대해서 변경할 수 없음 (상수 개념)- let : 한번 선언한 값에 대해서 다시 선언할 수 없음 (하지만 하나의 함수블록단위 내에서만 다시 선언 불가한 것임 예를 들면 이프문, function이 있겠네 (지역변수 같음), 같은 블록안에서 재 선언 불가)위 특징들에 대해서 자세히 알아보기 전에 ES5 특징 2가지를 리뷰 해야함기존 var는 좋게 말하면 유연했지만, 애매모호하기도 했다. 새로운 애매모호한 부분을 방지하기 위해 나왔다.

개요- ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습- const & let, Arrow Function, Enhanced Object Literals, Modules 학습 ES6 란?- ECMAScript 2015와 동일한 용어- 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해- 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식- ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음 ES6에는 Babel을 뺄 수가 없다.모든 브라우저가 ES6로 호환될 수 있게 ES5로 변환하는 컴파일러 이다.

https://v2.vuejs.org/v2/guide/migration.html?redirect=true#transition-Attribute-replaced Migration from Vue 1.x — Vue.jsVue.js - The Progressive JavaScript Frameworkv2.vuejs.org https://vuejs.org/guide/built-ins/transition.html#the-transition-component Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orgTransition 태그는 법칙이 있다.  {{ todoItem.item }} ..

modal을 공통으로 사용하기 위해 가져왔다.여기에서 slot을 이용하게 되는데  Modal.vue default header default body default footer OK ..

test.vue q-tabs 안에 q-tab의 name 값을 누르면 q-tabs v-model에 반응 하는 것 같다.  test.ts 에 다음과 같이 스토어를 만들었다.import { defineStore } from "pinia";export const useTestStore = defineStore({ id: "testList", actions :{ async testMethod(){ console.log("호출"); } }})defineStore 함수는 Pinia 라이브러리에서 제공하는 함수로, Vuex 스토어를 정의하는 데 사용됩니다. Pinia는 Vue.js 애플리케이션의 상태 관리를 위한 간단하고 강..

$emit은 상위 컴포넌트에 이벤트를 보낼 수 있다.  this.$emit('이벤트 이름', 인자1, 인자2 ...); methods : { addTodo(){ this.$emit('addTodoItem',this.todoItem); this.removeTodoItem(); }, removeTodoItem(){ this.todoItem = ""; } }만약 하위컴포넌트에서 addTodo메소드가 발생할 경우 상위 컴포넌트의 addTodoItem함수를 발동 시키려면  ... ... methods : { addOnItem : function(){ ..

{{ todoItem }}  storage에서 remove하면 화면이 바뀌지 않기 때문에배열에서도 지워줘야 한다.splice문법은 (2,1) 2번 순서의 1개를 없앤다는 소리다.

{{ todoItem }}