dev_0hoon

개요- 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 }}

로컬스토레지에 저장하는 방식으로 진행한다. v-model은 vue의 인스턴스안에 바로바로 저장하는 역할을 한다.- 양방향 바인딩   data 안의 변수에 연결해주면 실시간으로 입력하는 값 으로 바뀌게 된다. 값 확인을 하기 위한 메소드 작성  add   그 다음 localStorage에 저장해보자https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDNlocalStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. lo..

scoped를 붙이면 해당 컴포넌트에만 영향을 받음