Web/Vue.js8 Vue 에서 FontAwesome 사용하기(npm 설치) https://www.npmjs.com/package/@fortawesome/vue-fontawesome @fortawesome/vue-fontawesome Official Vue component for Font Awesome 5 www.npmjs.com 참고한 사이트 1. FontAwsome 설치 vscode 하위 터미널에서 아래의 명령어를 사용하여 설치를 진행해준다. $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons 나는 2.x 버전의 Vue를 사용하여 아래의 명령어를 사용하여 추가로 설치를 진행해 주었다. $ npm i --save @fortawesome/vue-fontaw.. 2021. 5. 21. Vue filter Vue filter filter를 이용하여 표현식에 새로운 결과 형식을 적용한다. 중괄호 보간법 또는 v-bind 속성에서 사용이 가능하다. {{ msg | count2('문자를 넣어보세요') }} 값이 바뀔 때 마다 val.length 값이 갱신되는 것을 확인할 수 있다. 2021. 5. 16. v-show 와 v-if 의 차이점 ※ v-show VS v-if v-show v-if false인 경우 display:none 엘리먼트 삭제 template 지원 X O 렌더링 항상 false인 경우 X DOCTYPE html> Vue.js v-if VS v-show v-if div v-show div const vm = new Vue({ el: "#app", data: { condition: false } }); 확인해 보면 v-if는 false인 경우 생성되지 않았고 v-show는 display:none이 적용된 것을 확인해 볼 수 있다. 2021. 5. 16. Vue Directives v-model 양방향 바인딩 처리를 위해 사용 v-html 실제 HTML 을 출력하기 위해서 출력 v-bind 엘리먼트의 속성과 바인딩 처리를 위해서 사용 v-bind는 약어로 : 로 사용가능 v-show 조건에 따라 엘리먼트를 화면에 렌더링 v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지않는 일회성 보간을 수행 v-if,v-else-if,v-else 조건에 따라 엘리먼트를 화면에 렌더링 v-for 배열이나 객체의 반복에 사용 v-for="요소변수이름 in 배열" v-for="(요소변수이름,인덱스) in 배열" v-cloak 뷰 인스턴스가 준비될 때 까지 mustache 바인딩을 숨기는데 사용한다. vue instance가 준비되면 v-cloak은 제거된다. 2021. 5. 16. Vue Instance Life Cycle Life Cycle은 크게 4단계로 나뉜다. Instance 생성 -> 생성된 Instance를 화면에 부착 -> Instance의 내용이 갱신 -> Instance 제거 Life Cycle description beforeCreate 뷰 인스턴스가 생성되고 각 정보의 설정 전에 호출 created 뷰 인스턴스가 생성된 후 데이터들의 설정이 완료된 후 호출 인스턴스가 화면에 부착하기 전이라서 template 속성에 정의된 요소는 접근할 수 없다. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다. beforeMount 마운트가 시작되기 전에 호출 mounted 뷰 인스턴스 데이터가 마운트된 후에 호출한다. template속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행한다.. 2021. 5. 16. Vue Instance 생성하기 Vue Instance 생성해보기 {{msg}} ※ vue를 사용하기 위해서 script로 삽입하거나 NPM,CLI를 사용하는 경우가 있는데 일단 script로 삽입해주었다. 이렇게 인스턴스를 생성해 주었다. 속성 설명 el Vue가 적용될 요소를 지정해준다. data Vue에서 사용되는 정보를 저장한다. 객체 또는 함수의 형태이다. template 화면에 표시할 HTML , CSS등의 마크업 요소를 정의하는 부분이다. methods 로직 제어와 관계된 methods를 정의한다. created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의한다. 2021. 5. 16. Vue computed 와 method의 차이점 Vue computed? 특정 데이터의 변경사항을 실시간으로 처리해준다. setter와 getter를 이용하여 자동으로 this 컨텍스트를 Vue인스턴스에 바인딩 해준다. 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용한다. 1.computed 사용한 경우 reversedMsg가 총 3번 호출되었음에도 불구하고 console창에 한번만 출력이 된 것을 확인할 수 있다. 2.method사용한 경우 reversedMsg가 3번 호출 되어진 만큼 console 창에도 3번 호출된 것을 확인할 수 있다. computed 속성은 뷰 인스턴스가 생성될 때, data의 msg값을 받아 reversedMsg를 계산하여 저장해 놓는다. 반면 method 속성은 reversed.. 2021. 5. 11. Vue.js 관련 vscode Extension 추천 1.Live Server 코드 변경 시 페이지를 새로고침하지 않아도 자동으로 새로고침된다. 2. Prettier 코드를 자동으로 정렬해준다. 3. Bracket Pair Colorizer 괄호에 색상을 지정해주는 extension이다. 4. Indent-rainbow 들여쓰기 별로 색상을 지정해주는 extension이다. 5.Vetur .vue 파일에 코드생성, 문법강조, 자동완성, 디버깅을 지원하는 extension이다. 6.Vue 2 Snippets vetur에서 지원하지 않은 자동완성까지 적용시켜준다. vue2 말고 3버전을 사용해도 된다. 2021. 5. 10. 이전 1 다음
