기타/vue js (22) 썸네일형 리스트형 Vuex getters 사용하는 방법과 이유 vuex의 getters를 사용하는 이유는 자주 처리해야 하는 state의 데이터를 캐시를 통해 코드의 반복을 줄여주기 때문입니다. state에 배열 데이터가 있고, 우리는 이것중 일부를 슬라이스해 화면에 표시해야 한다고 가정해봅시다.어떻게 하면 될까요?아래와 같이 vuex store에 배열 데이터가 있을 때 이것을 app.vue에서 슬라이스하여 보여주려고 합니다. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { data : new Array('balmostory','hostory','jistory') } }) computed를 통해 할 수 있습니다. store.state... vue js 이벤트 핸들러, event.preventDefault(), event.stopPropagation()란? vue에는 클릭하거나 버튼을 눌렀을 때 특정 동작을 실행하는 이벤트 핸들러가 있습니다.예시를 통해 알아보도록 하겠습니다.추가적으로 자주 사용되는 event.preventDefault(), event.stopPropagation()과 데이터에 message : 'hello'가 있습니다.change버튼을 누르면 hello가 hi로 바뀝니다.이를 메서드에 구현했습니다. {{message}} change 코드를 실행해보면 제대로 동작한다는 것을 알 수 있습니다. 버튼 클릭 이외에도 . enter,. tab,. delete,. esc 등 다양한 키에 대응하는 이벤트를 만들 수 있습니다. event.preventDefault(), event.stopPropagation()에 대해 알아보겠습니다.웹 프론트를 개발할 .. vue js 조건문, 반복문 vuejs의 조건문, 반복문 문법에 대해 알아보도록 하겠습니다.조건문은 사용하고자 하는 태그에 v-if="bool자료형"을 넣으면 됩니다.true라면 태그가 나오고 false면 나오지 않습니다.예시를 통해 살펴보도록 하겠습니다.balmo에 false를 넣으면 story는 나오지 않습니다. story 아래와 같이 하나하나 모두 li태그로 생성된 것을 볼 수 있습니다. 이렇듯 vuejs는 코드의 반복을 줄일 수 있는 for문을 제공합니다.잘 활용하면 보다 쉽게 구현할 수 있어 보입니다.감사합니다 ㅎㅎ보다 정확한 내용은 공식 문서를 확인해주세요.도움이 되셨으면 합니다 veevalidate로 회원가입페이지 구현 예시 vlavalidate를 사용하는 이유는 예를 들어 회원가입 시 필수 항목에 제대로 입력을 했는지, 이메일 형식은 올바른지 바로바로 오류를 표시해 주기 위함이다. npm i vee-validate 1. npm을 통해 모듈을 다운로드해주어야 합니다. 2. 다운한 모듈을 불러와야 합니다. import{extend, localize} from 'vee-validate'; import{required,email,min} from 'vee-validate/dist/rules'; import en from 'vee-validate/dist/locale/en.json' 해당 모듈안에도 여러 가지 도구가 있으니 그중 필요한 것만 불러오도록 하겠습니다. 3. 불러온 모듈 사용 선언하기. localize('en',en) e.. vuex actions, getters, map helper 간단 정리 오늘은 vuex의 actions, getters, map helper에 대해 공부해보도록 하겠습니다. actions : 비동기 처리할 때 사용하는 부분이다. 예를 들어 api를 사용한다고 했을 때 비동기 처리가 반드시 필요합니다. 이때 actions에 비동기 처리를 할 수 있습니다. 아래코드는 mutations와 actions입니다. actions에서 jsonplaceholder에 users라는 값을 요청하면 요청 값이 반환되었을 때 그것을 res에 담고 그 후 commit을 통해 GETUSERS를 호출해줍니다. 동기적으로 진행한다면 GETUSERS에 데이터가 전달되지 않을 것입니다. actions는 아래와 같이 axios와 같이 사용하는 경우가 많습니다. then뒤에 mutation을 호출해 state.. vue js vuex의 필요성 state, mutations 부모-자식-손자 컴포넌트가 있다고 할 때, 손자에서 부모로 데이터를 보낸다고 하자. 그렇게 되면 손자에서 자식으로 데이터를 보내고 자식에서 부모로 데이터를 보내야 한다. 이는 매우 비효율적이다. 코드도 매우 복잡해진다. 이런 불편함을 겪는 분들에게 vuex는 신세계를 열어준다. vuex는 데이터를 담아두는 store를 사용하기 때문에 데이터를 효율적으로 관리할 수 있다. vuex의 state에서 데이터를 관리할 수 있다. props를 더 이상 사용할 필요가 없게 된다. computed안에서 사용하면 된다. mutations로 어떤 컴포넌트에서도 store의 state에 접근할 수 있다. 아래 코드는 store이다. state에 데이터가 있고 해당 데이터를 mutations에서 접근할 수 있다. impor.. vue js todo 리스트 튜토리얼(2) 오늘은 체크박스를 누르면 줄이 그어지고 삭제 버튼을 누르면 리스트가 사라지는 기능을 구현해보도록 하겠습니다. 아래와 같이 체크 박스를 누르면 중간에 줄이그어지고 색이 변합니다. 삭제 버튼을 누르면 사라집니다. 아래 코드는 todo.vue 자식 컴포넌트입니다. {{todo.text}} Delete app.vue 부모 컴포넌트입니다. Todo App 흐름은 다음과 같습니다. 자식 컴포넌트에서 체크박스가 체크되면 emit을 통해 부모 컴포넌트로 데이터를 보내고 checked:false를 true로 바꾼다. 그러고 나면 다시 자식 컴포넌트에서 부모 컴포넌트로부터 props를 통해 데이터를 받아 todo.checked가 true가 되고 span 태그 안의 class, style binding에서 앞에 있는 'te.. vue js todo 리스트 튜토리얼(1) vue js를 이용해 todo 리스트를 만들어보도록 하겠습니다. vue js와 bootstrap을 통해 만들어보도록 하겠습니다. 해당 튜토리얼은 vuejs의 아주 기초적인 개념은 알고 계셔야 할 수 있습니다. v-for, components 등 기본적인 개념을 숙지하신 분들에게 권하고 싶네요. cmd에서 vue create todo를 입력해 프로젝트를 생성해주세요. 설정은 default를 선택해주시면 됩니다. 다 생성되면 아래와 같은 파일들이 생성됩니다. 오늘 구현할 내용입니다. 기본 todolis가 체크 박스로 나오고 input 태그에 값을 입력하고 엔터를 누르면 해당 값이 todolist에 나옵니다. vuejs는 프론트앤드에서 작동하는 언어이다 보니 데이터 베이스에 변화는 없습니다. 다시 껐다 키면 .. 이전 1 2 3 다음
