VueJS

Node.js를 다운받은 후 Vue CLI 패키지를 다운로드 할 수 있습니다.다운이 받아졌는데 동일 경로상에 버전확인 명령어를 입력합니다.해당 명령어를 입력하면 브라우저에 새 창이 나타납니다.링크 : Vue참고정말 잘 정리해주셔서 따라하기가 쉬웠습니다!대략 두 달 뒤에

프론트 엔드 프레임워크 대표적인 3가지가 존재합니다.React.js vs Vue.js vs Angular.js그 중 Vue.js를 다뤄보려고 합니다.컴포넌트 기반의 SPA를 구축 할 수 있게 해주는 프레임 워크입니다.컴포넌트(Component)웹을 구성하는 탭, 버튼

영상 참고 : 1시간에 vue.js 배우기VS Code를 사용할 때는 확장기능으로 vue를 설치하는 것이 좋습니다.router에 대한 설명은 각 각의 역할에 대해서는 해당 링크를 참고하는 것이 좋다고 생각합니다.Vue도 별도의 Bootstrap이 존재합니다.링크 : B

링크 : Vue.jsbeforeCreate : 가장 먼저 호출created : Vue 컴포넌트에서 다양한 메서드를 만들거나 옵션에 대한 설정을 완료할 때 호출beforeMount : 컴포넌트가 DOM에 추가되기 직전에 호출mounted : 컴포넌트가 DOM에 추가된 후

Home.vue결과vue는 2way-binding을 지원하기 때문에 양방향으로 데이터 핸들링이 가능합니다.기존에는 <input value="abc"> 였다면 v-model을 사용하여 반환하는 값도 가능하게 됩니다.또한 반환 받기 위하여 button을 클릭하면 반환

watch 기존의 onkeyup에서 데이터를 console.log 찍는 것과 동일 한데, Vue에서는 watch로 손 쉽게 감시할 수 있습니다. list형태의 데이터 선택창 다음과 같이 options: [ ] 라는 리스트형태의 데이터를 선언했습니다. 여기서 주목

Vue 강의 참고 영상 1\. public-index.html부트스트랩 CSS 이용 2\. vue cli 전체 코드1\. todo githubEnter 누를 시, input 내용이 비어있을 경우 예외처리style 바인드를 통해서 displayAlert의 string 데

A.js 와 B.js의 파일이 두개가 존재 했을 때,A.js 파일 내용들을 내보내고 ---------------> B.js가 가져오는 방식을 뜻한다.가져올 수 있는 방식은 CommonJS 와 ESM 방식이 있다.require(), module.exports를 이용해서

웹 어플리케이션을 구성할 때 도움을 주는 도구들이다.웹팩은 모듈들을 다룬다.여러가지 모듈들을 의존성을 안전하게 유지시키면서, 하나의 파일로 묶어준다. 이 과정은 bundle이라 칭한다. Entry : 의존을 가진 모듈들의 참조관계에 의존성 그래프를 만들고, 어떤 모듈을

: Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리입니다.Vuex를 사용하지 않았을 때, App.vueApp.vue에서 데이터를 선언하여 받아오면 다른 참조하는 vue 컴포넌트들은 emit이나 해당 데이터들을 App.vue를 거쳐서 가져와야한다. 그럼 어

axios는 비동기적으로 요청과 응답을 받게 해줍니다.명령어 : npm i axiosimport axios from 'axios';state에서 데이터가 들어갈 공간을 만듭니다.actions는 데이터를 비동기적으로 요청, 응답 받는 공간입니다.axios.get( url

Vuex에서 일반직으로 state의 데이터들을 components로 가져오고 싶으면 코드를 다음과 같이 작성해야합니다.하지만 매번 이렇게 가져오는 것을 막아주기 위해 vuex에서는 mapState를 제공합니다.구조 분해를 사용해 'vuex'에서 원하는 모듈만 가져오게

vue.config.js해당 타겟이 되어지는 것을 eGovFramework인 sfc 프로젝트로 연결하였습니다.sfc 프로젝트는 사내 프로젝트이며 추가적인 정보는 작성을 하지 않겠습니다.타겟이 된 :8080 PORT를 가진 url을 다음과 같이 변경하여 재요청되어집니다.

vue 개발자들을 위한 다양한 UI 컴포넌트와 API를 제공해주는 플러그인이다.네비게이션 UI 컴포넌트 중 하나이며, 상단 이미지 처럼 보라색 카테고리 부분을 나타낸다.vuetify 소스코드 클릭!

Vue-CRUD 작업환경 front-end : vsCode, @vue/cli 4.5.8 back-end : @egovFramework 3.9.0, JavaSDK 1.8 PostgreSQL 화면구성 1. 로그인

computed는 vue 공식 홈페이지에서 잘 설명이 되어있다.제가 computed를 사용해야한 이슈로는 총 3개의 컴포넌트가 존재했습니다.1\. 메뉴 추가 컴포넌트에서 메뉴를 추가시킨다.2\. 해당 메뉴는 메뉴 컴포넌트와 메뉴수정 컴포넌트에 반영되어야 한다.기존의 v

사이트Github : 소스코드 확인Web : Netlify를 활용한 결과 WebSiteNetlify : 무료 정적 호스팅 서비스작업도구VSCodeVueJscore-js : ^3.6.5vue : ^2.6.11vue-router : ^3.2.0vuex : ^3.4.0구성1

여러 개의 체크박스의 경우 단순히 "선택 되었다"가 아니라 여러 개가 선택되었다는 집합의 성격을 나타낸다.v-model로 바인딩 하게 되면 다음과 같이 checkedValues의 데이터 값은 배열(Array)가 된다.모든 버튼들이 일제히 선택되며 불리언(boolean)

radio버튼을 반드시 하나의 요소만 담기 때문에 v-model로 연결시킨 데이터는 value 값을 가지게 됩니다.

셀렉트는 라디오, 체크박스와 같이 기본적으로 문자열 또는 불리언 형의 값을 가지지만 v-bind 디렉티브를 사용하면 다양한 자료형의 값을 바인딩 할 수 있습니다.

tree-list는 보통 홈페이지의 관리자 모드에서 자주보이죠.사용자가 쉽게 컨트롤할 수 있고 DOM을 빠르게 파악 하기 위해 이용합니다.본 피드는 모든 소스코드를 제공하지 않습니다.↗바로가기npm i vue-tree-list이번에 사용한 npm은 vue-tree-li