공부 정리 공부 정리

Vue/Vue.js 문법

• Vue.js 문법 - Computed

  Vue/Vue.js 문법 2021. 7. 12. 22:44

  Computed 속성 - 계산된 속성, 읽기 전용(Readonly) - 종속 대상을 따라 저장(캐싱) - data 속성에 변화가 있을때 자동으로 다시 연산 예제1 Fruits {{ fruit }} Reverse Fruits {{ fruit }} 결과 Computed 캐싱 {{ reverseMessage() }} {{ reverseMessage() }} {{ reverseMessage() }} {{ reverseMessage() }} {{ reversedMessage }} {{ reversedMessage }} {{ reversedMessage }} {{ reversedMessage }}

  Read More
• Vue.js 문법 - 템플릿 문법

  Vue/Vue.js 문법 2021. 7. 12. 19:23

  템플릿 문법 Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석할 수 있는 유효한 HTML입니다. 보간법(Interpolation) 문자열 - 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation) - Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체 - msg 속성이 변경될 때 마다 갱신 (반응성) 메시지: {{ msg }} - v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행 결코 변하지 않을 것입니다:..

  Read More
• Vue.js 문법 - 인스턴스와 라이프사이클

  Vue/Vue.js 문법 2021. 7. 9. 10:46

  인스턴스 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다 const app = Vue.createApp({ /* options */ }) const vm = createApp(App).mount('#app') 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있습니다. 에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야합니다: 라이프사이클 다이어그램 예제 /* App.vue */ {{ count }} 참고 https://v3.ko.vuejs.org/guide/introduction.html 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신..

  Read More
• 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