vue.js

가장 먼저 vue.js를 설치하기 위하여, node.js가 필요하다.node.js 홈페이지작성일(2022-07-17 기준으로 버전이 다를 순 있지만 node.js를 설치한다.node.js의 설치화면이다. next를 누른후에 설치를 진행한다.설치가 완료 된 후 cmd 창

vue.js를 사용하는데는 여러가지 툴을 이용할 수 있지만 필자는 vscode를 사용하기로 하였다.Visual Studio Code 홈페이지.본인의 OS에 맞는 installer를 선택하여 다운로드 받는다.Visual Studio Code 설치화면이다. '다음'을 클릭

해당 포스트는 추가적인 extension인데 자주 사용하는 prettier와 esLint에 대하여 다루어보려고 한다. 사용자에 따라 코드가 자동으로 변환되기 때문에 싫어하는 사람도 있기에 따로 포스팅 하였다.먼저 extension에서 prettier를 검색하여 설치한다

vue CLI는 vue.js 프로젝트를 쉽게 셋팅해주는 아주 유용한 존재이다.설명의 위의 밑줄로 대신한다...!!vue CLI 홈페이지.위 홈페이지를 접속한다.Get Started 클릭!Installation 선택.친철하게 어떻게 하는지 설명이 되어 있다.먼저 위의 코

터미널을 연다.위 코드를 cmd(power shell) 창에 입력한다.설정을 선택하라고 뭔가가 나온다. 여기서 eslint나 prettier를 선택하신 분들은 본인이 원하는 버전의 vue2, vue3 버전의 default를 선택하면 되지만 일단 해당 포스트는 vue.j

폴더의 구조이다. 그외 기타 설정들은 모두 다루지 않고 package.json 부분만 간단하게 다룬다.먼저 public의 favicon.ico와 index.html은 프로젝트의 파비콘, 그리고 처음 진입페이지이다.해당 tag를 기반으로 vue.js가 실행된다.다음 sr

출처 : https://v3.ko.vuejs.org/guide/instance.html 위의 다이어그램은 vue.js 홈페이지에서 참조한 다이어그램이다. 해당 라이프 사이클을 확인해보도록 하자.

vue.js는 이렇게 template, script, style로 구성되어 있다.template는 DOM 즉 HTML을 작성하는 공간이다.script의 영역의 vue.js의 javascript를 작성하는 영역으로 해당 영역에 로직에 대한 부분을 작성한다.style은 c

data는 위의 모습처럼 사용할 수 있다.message에 Hello World를 넣어보았다.다음은 template에 mustache문법으로 쓰여진 {{message}}를 주목하자.해당 위치에 data에 넣은 message에 관련된 내용이 출력되게 된다.data는 이렇게

1. 데이터 출력 a. 데이터 출력 (mustache) 이전에도 다루었으며 가장 기본적으로 데이터를 출력하는 방법이다. mustache 표기법으로 감싸게 되면 데이터를 출력할 수 있다. b. v-html 다음은 HTML 출력이다. tag의 내용을 그대로 반영할수

form에 양방향 바인딩 하기 위해서는 "v-model" 디렉티브를 사용한다.v-model을 사용하면 입력받은 값이 data의 message에 바로 입력되는걸 알 수 있다.이렇게 입력하면 숫자를 처리 할 수 있다.현재 number의 형태는 숫자형이다.이 방법외에 이렇게

v-bind v-bind 디렉티브는 동적으로 사용되는 각종 태그들의 속성값들을 바인딩해준다. Vue.js (9) 데이터 바인딩(v-model) 에서 예시로 사용한것과 비슷한 형태이다. 다만 v-bind:value를 사용하였는데, 저렇게 입력하게 되면 value를 동

모든 프로그래밍 언어에서 반복문을 사용하는것처럼 vue에도 반복적인 데이터를 렌더링 할 수 있다.반복적인 데이터란, 배열 혹은 object를 뜻한다고 생각하면 된다.먼저 배열에 대한 렌더링을 살펴보자.위의 v-for="(item, index) in list" 의 문법이

조건부 렌더링은 조건에 따라 render를 할지 말지 결정하는 디렉티브이다. 아래의 예제를 살펴보자.다른 프로그래밍 언어를 써봤다면 이해가 쉬울텐데 크게 다른 부분은 없다.v-if="조건"v-else-if="조건"v-else이런식으로 작성하면 된다.다음은 v-show이

이벤트처리는 v-on또는 @를 통하여 처리할 수 있다. 1. Click button에 v-on:click를 주고 methods를 입력해주면, message가 변경된다. 다음은 카운터를 구현해보자. 해당 형태로 카운터를 구현해보았다. 2. Change ![](

computed란 '함수'안에서 사용되는 data에 포함된 변수들을 감시하여 변화될때 실행되는 '함수'라고 할 수 있다.위의 정의에서 주목해야 할 내용은 함수라는 개념이다. 함수는 사실 값을 리턴하는것이다. return값이 없는 형태는 프로시져기 때문에 computed

watch 역시 computed처럼 감시를 하는 메소드 묶음이다. 해당 변수를 감시하고 변화가 되면 해당 메소드를 실행한다.먼저 watch를 선언하기 위해서는 data에 있는 변수명 그대로 watch에 선언하면 된다. 나머지는 로그처럼 진행이 된다.위의 형태는 간단한

vue-router란 페이징 처리 기능이라고 생각하면 될 것 같다.url에 따라 화면을 전환하는 방법이다.먼저 vue 프로젝트를 새로 생성하는걸 추천한다.해당 내용을 터미널에 입력한다.Y를 입력한다. use history mode를 Y로 입력하게 되면 url에 설치가

먼저 부모의 컴포넌트에서 자식컴포넌트를 사용하는 코드를 작성해보자. 부모 컴포넌트이다. 사실 처음 vue를 생성했을때 보이는 화면이랑 비슷하다. 다음은 자식 컴포넌트이다. props에 message라는 props에 관한 값을 정의하였다. type은 props로 받

15에서 보았던 props로 부모와 자식간에 데이터를 전달 하는것을 보았는데 부모컴포넌트와 자식컴포넌트 이렇게 하나의 depth만 존재한다면 그렇게 불편하지 않을수 있다. 하지만 1depth가 아닌 2depth 부모 - 자식 - 자식의 자식 이런식으로 구성이 된다면 p

slot은 한마디로 정의하자면, 부모에서 자식 컴포넌트의 일부를 정의하는 내용이라고 생각하면 된다.화면RootView.vueModalView.vue코드가 엄청 복잡해보이지만 사실 간단하다.위의 네모친 부분이 slot의 전부이다.먼저 자식컴포넌트에 slot을 선언하고 이

mixin 이란 공통으로 사용되는 함수나 변수등을 모아두고 필요한 곳에 사용할 수 있게 해준다. 간단하게 예를 보도록 하자.먼저 mixin이라는 항목을 만들고 Date를 yyyy-MM-dd HH:mm:ss 형태로 바꿔주는 메소드를 만들었다.HomeView.vue 에서

axios란 통신을 위하여 필요한 라이브러리의 개념이다. 사실 axios는 vue.js에서만 사용하는것은 아니며, 광범위(react, angular 등)하게 사용하는 비동기 방식의 HTTP 클라이언트이다.AXIOS 홈페이지에 접속해보면 설치하는 방법들이 잘 안내되어 있

vue.js를 사용하다 보면 전역적으로 사용되는 것들이 있다. vuex는 이러한 것들을 쉽게 사용하게 해주는 상태관리 라이브러리이다.먼저 프로젝트를 생성하고 vuex를 설치하도록 하자.해당 내용을 입력하면 vuex를 설치할 수 있다.vuex를 설치하면 store/ind

vuex 모듈은 간단하다. 저번 블로그와 똑같이 사용하면 되는데 다만 분류라는 개념이 들어갔다고 보면 될 것 같다. 전에 배운대로 vuex를 만들다 보면 한곳에 여러가지가 정의될 가능성이 있는데 정의되는게 많을 수록 난감해진다. vuex의 module은 이러한 것을 분

vuetify란 UI 컴포넌트 프레임워크이다. UI를 좀더 편하게 만들수 있게 도와준다.https://vuetifyjs.com/ <- vuetify 홈페이지이다. 설치 방법이 나와있다. 참고로 vue3는 vuetify가 제대로 지원하지 못한다.위 항목 선

먼저 vue project를 생성한다.본인이 원하는 형태의 vue.js를 생성한다. 해당 경로로 이동한 후 터미널을 open차례로 입력해준다. /tailwind.config.cjs /assets/css/tailwind.css @tailwind를 인식하지 못한다고 나올