Front-End/Vue.js
-
[Vue.js] import/export, component 사용해보기Front-End/Vue.js 2022. 11. 23. 10:20
vue 파일에서 < 꺽쇠 하나 친 다음에 엔터 누르면 기본 템플릿이 나온다. 📑 Vue에서 import , export 하기 📌 변수 1개일 때, A파일의 변수 B파일에서 사용하기 A파일 var apple =10; export default apple; B파일 import apple from './assets/data.js' 📌 변수 2개일 때, A파일의 변수 B파일에서 사용하기 A파일 var apple =10; var apple2 =100; export {apple,apple2}; B파일 import {apple,apple2 } from './assets/data.js' 📑 component - 사용해보기 component는 긴 HTML을 한 단어로 줄일 수 있는 문법이다. 컴포넌트를 사용하는 문법은 ..
-
[Vue.js] npm 방식 vue 기본 문법 (on:click, v-html, v-for, 데이터바인딩 ,,)Front-End/Vue.js 2022. 11. 22. 14:06
📌 node_modules : 프로젝트에 쓰는 라이브러리들 📌 src : 소스코드 다 담는 곳 📌 public : html 파일, 기타 파일 보관 📌 package.json : 라이브러리 버전, 프로젝트 설정 기록 📑 vue 데이터 바인딩 {{ }} {{products[0]}} xx원룸 {{price1}}만원 {{products[2]}} xx원룸 {{price2}}만원 📑 v-for 반복문 {{a}} vue 객체 생성을 export default로 진행한다. npm 방식에서는 !! 여기에 배열로 메뉴들 값을 지정해두고 반복문의 in 다음에 메뉴들을 넣으면 이 data 횟수만큼 값이 반복되며 출력된다. export default { name: 'App', data(){ //데이터는 object 자료로 저장..
-
[Vue] Vue.js npm 방식으로 설치하기 , VSCode 프로젝트 생성Front-End/Vue.js 2022. 11. 21. 10:56
📑 Node.js 설치하기 홈페이지에 들어가서 최신 버전 LTS로 다운 받기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 📑 명령 프롬프트 입력 📌 1. node.js를 설치했으면 확인해보자. node -v 📌 2. 폴더 생성하기 mkdir VueProjects 폴더를 만들어 준 후 cd VueProjects 로 해당 폴더로 이동한다. 📌 3. vue 설치하기 npm install vue 📌 4 vue-cli 설치하기 npm install -g @vue/cli 📑 최종 확인 일반 프롬프트 들어가서 npm과 vue 입력해보기 📑 VSCode에서 프..
-
[Vue.js] 기본 문법, watch와 computed 비교Front-End/Vue.js 2022. 11. 14. 09:17
📑 watch 란? 계산된 속성인 computed와 비슷한 역할을 하는 것이 있다. 바로 watch이다. VueJS 공식 문서에 이 둘을 비교한 세션을 따로 정리할 정도로 이 둘은 하는 역할이 비슷하다. 어떻게 사용하느냐에 따라 watch가 computed의 역할까지도 할 수 있다. watch는 말 그대로 특정 대상을 보고 있는 감시자의 역할을 한다고 보면 될 것 같다. 바로 예제로 한 번 살펴보자 {{count}} {{text}} 카운트 감소 기본적으로 @click 디렉티브를 사용해서 count가 1씩 감소하는 application 이고 JS 코드를 보면 watch가 있는 것을 볼 수 있다. watch: { count: function (newVal, oldVal) { this.text = oldVal..
-
[Vue.js] 양방향 데이터 바인딩 v-modelFront-End/Vue.js 2022. 11. 13. 13:12
VueJs의 꽃이라고 할 수 있는 v-model에 대해 정리하려 한다. 📑 양방향 데이터 바인딩 지금까지 앞에서 다룬 vue.js에 대한 내용들은 '단방향 데이터 바인딩'이었다. 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 그 값을 확인했다. methods 내의 함수로 데이터를 변경하면 변경하는 즉시 값이 변하는 것을 확인했다. 즉) Vue 인스턴스 -> Template와 같은 방향으로 한 방향으로 데이터에 접근할 수 있었다. 이게 바로 단방향 데이터 바인딩이다. 그렇다면 양방향 데이터 바인딩은?? 말 그대로 vue 인스턴스에서 초기값 설정과 같이 값을 저장해두면 화면에서 볼 수 있고, 화면에서 어떤 값을 입력한다면 그것이 Vue 인스턴스에 저장되는 것이다. 이렇게 양..
-
[Vue.js] 계산된 속성 computed vs methodsFront-End/Vue.js 2022. 11. 13. 12:51
vue를 사용하면서 el, data, method 값을 정의할 수 있었다. 만약 버튼 클릭 시 1씩 증가하는 로직이 있다고 했을 때 보통 method에 이러한 로직을 처리한다. 그러나 html 에서 {{ }} 내에서 js 로직을 처리할 수도 있고 와 같이 html 태그안에 직접 js 코드를 넣어줘도 가능하다. 하지만 이런 템플릿 내의 표현식은 단순한 연산에서만 사용이 가능하기 때무에 복잡한 계산식을 계산해서 값을 return 해주는 "계산된 속성"이라는 computed가 필요하다. 📑 computed 만약 count의 값이 1씩 증가할 때 값이 10보다 커지면 10보다 큽니다 라는 문구를 출력하도록 작성해보자. {{ isLargerThanTen }} 클릭 클릭 버튼을 4번째 누름과 동시에 10보다 큽니다..
-
[Vue.js] 기본 문법 (v-on 이벤트리스너)Front-End/Vue.js 2022. 11. 13. 12:11
이전엔 data를 이용해서 값을 적용할 수 있는 v-bind, v-once, v-html에 대해 정리해봤다. 이번 포스팅에선 이벤트와 관련된 v-on 디렉티브에 대해 정리해보려고 한다. 📑 이벤트 리스너, v-on v-on은 이벤트 리스너의 역할을 한다. 이벤트 리스너란? 예를들어 사용자가 로그인 페이지에 접속할 때, 아이디와 패스워드를 입력하고 로그인 버튼을 클릭하는 순간 로그인이 된다. 여기서 로그인 버튼은 자신이 클릭되는 순간에 로그인 이벤트를 실행시키게 된다. 바로 여기서 이벤트를 실행하기 위한 트리거( 여기서는 로그인 버튼 클릭)와 이벤트를 연결해주는 것을 이벤트 리스터라고 한다. 📌 주사위 던지기 예제 주사위 던지기로 이벤트 리스너에 대해 더 알아보겠다. 로직은 아래와 같이 작성한다. 1. 주..
-
[Vue.js] 기본 문법 (v-once, v-html)Front-End/Vue.js 2022. 11. 13. 11:30
앞서 vue.js의 기본 문법과 v-bind에 대해 정리해 보았다. 이번 포스팅에선 디렉티브의 다른 문법들을 정리해보자. https://wonisdaily.tistory.com/140 [Vue.js] 개념과 기본문법 살펴보기 (data, method) 📑 Vue.js란? 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page wonisdaily.tistory.com 📑 v-once 설명에 앞서 바로 코드를 살펴보자. {{text}} {{sayHello()}} 위의 코드를 살펴보면 sayHello 함수는 data에 선언된 text 값을 "..