반응형 IT/Vue12 Vue.js 기본정보 링크 📚Vue 기본Vue 인스턴스 Icon LibrariesVue-AwesomeVue UniconsVue Material DesignVuetify Vue Frontend 참고 사이트vue 로 만든 Admin 관리 페이지 https://github.com/caiya/vuejs-admin/blob/master/src/main.jsVuex에서 Store 활용방법Vue.js 에서 axios 통신 https://ux.stories.pe.kr/138?category=770389Vue Backend 참고 사이트AWS IAM 관리 js https://gist.github.com/intxparts/40fbff470c27d8f35a9b103bf34b9c31AWS IAM manager js https://github.com/ne.. 2022. 9. 20. VueX 사용법 정리 Vuex란Vuex 공식사이트Vuex 는 vue 의 상태관리 라이브러리 입니다일반적인 vue 에서 상태관리는 State 에 데이터를 저장하고 Actions 으로 State 를 변경합니다단순한 경우에는 사용이 가능하지만여러 Vue 가 상태를 공유해야 할 경우 ( 예 ) 로그인 여부, 로그인 아이디 ) 유지보수 하기 어려워집니다Vuex 는 일반 vue 의 상태관리를 확장해서 Mutations 라는 개념이 추가 되었습니다 (Actions 이 State 를 직접 변경하지 않고 Mutations 을 호출해서 State 를 변경하는 방법)Mutations 으로 변경하면 Vuex 가 State 를 관리해줍니다 단순한 Vue APP 은 Vuex 를 사용하지 않고 단순한 상태관리나 글로벌 이벤트 버스를 사용하고중대형 규모.. 2022. 8. 30. Vue Directive & Instance Properties 학습정리 Directive디렉티브설명예제비고v-textinnerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자그대로 보여줌v-htmlinnerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면에 구현함XSS(Cross Site Scripting) 공격에 주의v-showcss의 display 와 동일한 기능v-ifif 조건문을 구현함v-elseelse 조건문을 구현함v-else-ifelse if 조건문을 구현함v-forfor 반복문을 구현함 ... v-on엘리먼트에 이벤트 리스너를 연결합니다. v-on 은 생략 가능하다 v-on:click ⇒ @click 로 사용가능@속성 으로 단축해서 표현 가능하다v-bind태그와 태그사이의 값을 다루는 것이 아니라 태그의 속성을 변경할 때 사용함 v-bind 는 생.. 2022. 8. 25. Vue Lifecycle 학습정리 Lifecycle Hooks라이프사이클 훅설명beforeCreateVue인스턴스가 생성되었지만 데이터관찰, 이벤트 감시가 설정 되기 전에 호출 됨createdVue인스턴스가 생성되고 데이터관찰, 계산형 속성, 메서드, 감시의 설정이 끝나면 호출 됨beforeMountDOM인 el 요소에 vue 인스턴스가 마운트 되기 전에 호출 됨mountedDOM인 el 요소에 vue 인스턴스가 마운트 된 후에 호출 됨beforeUpdate가상 DOM이 생성되기 전에 데이터가 변경될때 호출 됨updated데이터의 변경으로 인해 가상 DOM이 다시 렌더링된 후에 호출 됨. DOM에 종속성이 있는 계산은 이 단계에서 수행해야 함beforeDestroyVue 인스턴스가 제거 되기 전에 호출 됨destroyedVue 인스턴스가.. 2022. 8. 25. Vue Event 학습정리 Vue.js 에서는 이벤트를 v-on 디렉티브를 사용해서 처리합니다.v-on 을 줄여서 @ 로 사용할 수 있습니다좋아요 좋아요 이벤트명설명click마우스를 클릭했을 때 실행함dblclick마우스를 더블 클릭했을 때 실행함mouseover마우스의 포인트가 요소 위로 올라왔을 때 실행함mouseout마우스의 포인트가 요소 밖으로 벗어났을 때 실행함mousemove마우스의 포인트가 이동했을 때 실행함mousedown마우스의 버튼을 눌렀을 때 실행함mouseup마우스의 버튼을 놓았을 때 실행함keydown키보드의 키를 눌렀을 때 실행함keyup키보드의 키를 놓았을 때 실행함keypress키보드의 키를 눌렀다가 놓았을 때 실행함change요소가 변경될 때 실행함submit이 제출될 때 실행함reset이 재설정될 .. 2022. 8. 25. Vue Template Syntax 학습정리 문자표현콧수염 태그 {{ }} 를 사용한다Message: {{ msg }}HTML을 그대로 표현v-html 디렉티브를 사용한다 Using v-html directive: Using mustaches: {{ rawHtml }}HTML 속성표현v-bind:속성 또는 :속성 을 사용한다콧수염 태그 {{ }} 에서는 HTML 속성을 표현할 수 없다 boolean 속성은 표현 방식이 다르다ButtonisButtonDisabled 가 null, undefined, false 이면 disabled 속성이 button 에 포함되지 않는다Javascript 표현식콧수염 태그에 {{ }} 자바스크립트를 한 줄만 넣을 수 있다. 조건문은 넣을 수 없다 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }}.. 2022. 8. 25. Vue Component 학습정리 Template 는 순수 HTML 코드만을 가지고 있다Component 는 HTML 템플릿과 데이터 세팅, 함수 정의 등 다양한 작업을 할 수 있다Component 를 활용하여 재사용성을 강화 할 수 있다Component 는 HTML 태그 같이 사용한다 Component 내부의 data 는 function 으로 만들어야 한다 Uploaded by N2T 2022. 8. 25. Vue Rendering 학습정리 v-if : 조건부 랜더링a2는 100입니다 a2는 100이 아닙니다template 태그에서도 사용이 가능하다 (v-show 는 불가) data1 data2 v-show조건부 랜더링 인데 태그는 표시하고 display 속성으로 처리한다a7은 100입니다 a7은 100이 아닙니다v-if 와 다른 점은 태그가 전부 적용된다 display:none 속성으로 관리된다template 태그로 사용 못 한다 v-for반복 랜더링 {{idx}} : {{a1}} Uploaded by N2T 2022. 8. 25. Vue Routing 학습정리 Getting Started | Vue RouterNote We will be using ES2015 in the code samples in the guide. Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details here. Creating a Single-page Application with Vue + Vue Router is dead simple.https://router.vuejs.org/guide/vue-routerhttp://jeonghwan-kim.github.io/2018/04/07/vue-router.html Upload.. 2022. 8. 25. Vue Mixin 학습정리 Vuejs 에서 제공하는 Vue 객체에 필요한 기능을 재활용 할 때 사용한다한번 만든 기능을 여기 저기의 객체에서 공통으로 사용하고 싶을 때 쓴다 재사용 라이브러리라고 생각하면 된다 count 를 더하는 js 를 Mixin.js 파일로 만들고count 를 빼는 vue 파일에서 Mixin 을 선언하면 count 를 더하는 기능까지 사용할 수 있다 // Test.vue // countMixin.js let countMixin = { props: { count:{ default: 0 } }, methods:{ onClick(){ this.data++; } } }; export default countMixin; Uploaded by N2T 2022. 8. 25. Vue Data 학습정리 data 속성으로 설정한 변수만 웹브라우저에서 감시를 하고 변경사항을 적용시켜준다var vm1 = new Vue({ el : '#test1', data : { value1 : 100, obj1 : {} } }) vm1.value2 = 1000 value1 : {{value1}} value2 : {{value2}} value2value1 은 표시 되지만 value2 는 웹브라우저에 표시되지 않는다value2 는 button 을 클릭해서 action 을 주면 웹브라우저에 표시된다 data 속성으로 표시 하지 않는 변수를 웹브라우저가 감시하고 적용할 수 있게 하려면 Vue.set 을 사용해서 data 안에 넣어주는 방식으로 해결한다//vm1.value2 = 1000 Vue.set(vm1.obj1, 'value.. 2022. 8. 25. vue.js 용량 줄이기 🌐vue.js 나 react 를 사용하다보면 여기저기 라이브러리들 설치하고 사용하니점점 사이즈가 커져버리고 있다 사이즈 줄이기 위한 노력은 지속적으로 하는 게 맞는 것 같다 1. 번들 현황 보고vue-cli 를 사용하여 번들 리포트 작성# package.json # script 추가한다 "build-report": "vue-cli-service build --report" # 위에서 만든 스크립트 실행 npm run build-report2. 번들 사이즈 줄이기echarts (stat size: 2.7mb, parsed: 814kb, gzipped: 270.7kb)bootstrap-vue (stat size: 772kb, parsed: 297kb, gzipped: 69kb) 더 작은 대체 라이브러리 찾기.. 2022. 8. 25. 이전 1 다음 반응형