개발/Vue (6) 썸네일형 리스트형 [Vue] v-if 와 v-show 차이점 v-if: 조건을 만족하지 못하는 요소는 dom레벨에서 제거됨. 자주 변경되지 않는 경우에 v-if를 사용하는게 좋다. v-show: 조건을 만족하지 못하는 요소는 display:none; 스타일이 적용됨. 스타일만 변경됐을 뿐 눈에보이지 않더라도 항상 렌더링되고 dom에 남아 있다. 조건에 따라 자주 변경되는 버튼 같은 경우에는 v-show를 사용하는게 좋다. 태그에 v-if 가능 , v-show 불가능 [Vuex] Vuex actions란? actions 이해하고 사용하기 actions란? - 비동기 처리 로직을 선언하는 메서드 - 데이터 요청, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언 mutations에는 동기적인 메소드를 넣고 actions에 비동기 메서드를 넣는다. 뮤테이션은 commmit api를 호출해서 실행, 액션은 dispatch api를 호출해서 실행시킨다. //store.js state: { num: 10 }, mutations: { doubleNumber(state) { state.num *2; } }, actions: { delay(context) { //actions의 첫번째 인자 context // actions에서 mutations을 접근 할 수 있다. // actions에서 mutations에 접근하는 경.. [Vuex] Vuex mutations란? mutations 이해하고 사용하기 mutations 란? - state의 값을 변경할 수 있는 유일한 방법이자 메서드 (state가 뷰에서 data라면, mutations는 뷰에서 methods와 같은 역할을 한다.) commit() : 뮤테이션을 동작시키는 명령어 [ commit('뮤테이션명', .... ) ] 첫번째 인자는 항상 state, state를 변경하기 위해 다른 인자들을 함께 전달할 수 있다. //store.js state: { num : 10 } mutations: { printNumber(state) { return state.num }, sumNumber(state, num) { return state.num + num }, updateState(state, payload) { return state.num += pa.. [Vuex] Vuex getters란? getters 이해하고 사용하기 getters란? state 값을 접근하는 속성이자, 뷰의 computed()처럼 미리 연산된 값을 접근하는 속성 //store.js state: { num: 10, }, getters: { dobuleNumber(state) { return state.num *2; } } {{ this.$store.getters.doubleNumber }} state: { message: 'hello vue.js!' } {{ this.$store.state.message }} // this.$store.state.message 까지 하면 코드가 많아질수록 번거로울 수 있다. // 헬퍼함수를 쓰게되면 getters로 this.getMeesage 처럼 쉽게 접근 가능하다. [Vue] Vuex state란? state 이해하고 사용하기 state란 여러 컴포넌트 간에 공유할 데이터 뷰의 데이터랑 똑같이 사용하는데, 여러 컴포넌트에 데이터가 공유가 된다는 점이 다르다. //vue data: { message: ‘hello Vue.js’ } //vuex state: { message: ‘hello vue.js!’ } //vue {{ message }} //vuex {{ this.$store.state.message }} 1. 간단한 데이터 사용 store.js에 state코드를 추가한다. Test.vue(실제 사용하는 뷰파일)에서 state를 사용가능하다. 뷰개발자도구에서 확인 가능하다. 2. 배열 사용 store.js state에 배열을 저장한다. TodoList.vue App.vue에서 v-bind:propsdata="todoItems.. [Vue] Vuex 설치 및 처음 사용하기 https://vuex.vuejs.org/installation.html#direct-download-cdn Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vuex@4.0.0/dist/vuex. vuex.vuejs.org 1. 터미널에서 아래 명령어를 입력하여 설치한다. (라이브러리 버전 명시 해줘야한.. 이전 1 다음
