공부 정리 공부 정리

Vue

• Vue.js 조건문과 반복문

  Vue/Vue.js 문법 2021. 7. 7. 18:14

  조건문 v- 으로 시작하는 속성을 디렉티브(Directive) 라고 부름 {{ count }} 4보다 큽니다 반복문 {{ fruit }} 합쳐진 예제 {{ count }} 4보다 큽니다 {{ fruit }} 컴포넌트(components) 활용 예제 예제 - App.vue 내용을 컴포넌트를 활용하여 리팩토링 - components 내부에 Fruit.vue 생성 {{ name }} {{ count }} 4보다 큽니다 {{ fruit }}

  Read More
• Vue.js 선언적 렌더링과 입력 핸들링

  Vue/Vue.js 문법 2021. 7. 7. 17:19

  예제 반응성 (Reactivity) - 데이터를 갱신하면 화면도 바뀐다 {{ count }}

  Read More
• Vue.js ESLint 구성

  Vue/Vue.js 문법 2021. 7. 7. 08:18

  ESLint ECMAScript/JavaScript 코드에서 코딩 품질과 스타일을 검사하는 정적 코드 분석 도구 설치 및 구성 1. 패키지 설치 $ npm i -D eslint eslint-plugin-vue babel-eslint 2. 루트 경로에 .eslintrc.js 파일 생성 후 구성 옵션 추가 module.exports = { env: { browser: true, node: true, }, extends: [ // vue 코드 검사 규칙, 레벨이 높을수록 엄격함 //'plugin:vue/vue3-essential', // Lv1 "plugin:vue/vue3-strongly-recommended", // Lv2 //'plugin:vue/vue3-recommended', // Lv3 // js ..

  Read More
• Vue.js 웹팩을 기반으로 하는 프로젝트 구성

  Vue/Vue.js 문법 2021. 7. 7. 07:19

  프로젝트 구성 순서 1. 터미널에서 프로젝트를 생성할 디렉토리로 이동 (dir ,cd 활용) 2. npx degit 깃-저장소이름 폴더명 ## 예시 ## ## 버전 내역이 삭제가 된 상태로 복제 ## $ npx degit HyungJun-Yoo/webpack-bundler vue3-webpack-template 3. vscode 에서 생성한 폴더 열기 (기존 js 폴더 제거, HTML body 내용 제거) 4. 루트 경로에 src 폴더 생성, 내부에 main.js 파일 생성, App.vue 파일 생성 4-1. static 내부 image 폴더를 .src 내부로 이동 (폴더명 assets로 변경) 5. Vue 설치 $ npm i vue@next 6. Vue 패키지 설치 $ npm i -D vue-loade..

  Read More
• Vue.js

  Vue/Vue.js 문법 2021. 7. 7. 04:16

  Vue.js 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스프로그레시브 자바스크립트프레임워크이다. 다른자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다. 한편 Vue.js는 고성능의싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다. 설치 ## NPM ## ## Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM를 이용한 설치를 권장 ## $ npm install vue@next ## CLI ## # Vue 3의 경우 npm에서 @vue/cli로 제공되는 Vue CLI v4.5를 이용 # 업그레이드를 하려면 최신버전의 @vue/cli를 전역으로 ..

  Read More