Web/vue
[VUE] vue.js 에서 swiper 사용하기
친절한 분이 IE에서 동작하는 팁을 알려줬다😊 감사한 마음에 캡쳐! 다른 분들도 참고 하면 좋을 것 같다. 슬라이드 플러그인 중에서 swiper를 자주 쓰고 좋아하는데 이걸 vue에서도 쓸 수 있나 검색해봤더니 vue-awesome-swiper라고 만들어져 있어서 그걸 쓰기로 했다. 1. vue cli 작업 환경에서 swiper 패키지를 다운로드한다. 이때, swiper 6 이상 버전은 vue3에 최적화되어 있는데, 현재(2021.03 기준)로 vue3는 아직 버그가 많다고 해서 vue 2.x 버전에서 사용할 수 있는 swiper 5.3.7을 다운로드한다. yarn add 'swiper@5.3.7' --save-dev yarn add 'vue-awesome-swiper' --save-dev 2. swip..
[VUE] 조건부 렌더링
조건부 렌더링 v-if #객체 구문클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.일반 class 속성과 공존할 수 있다.예제보기
[VUE] 클래스와 스타일 바인딩
클래스와 스타일 바인딩 HTML 클래스 바인딩하기 #객체 구문클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.일반 class 속성과 공존할 수 있다.예제보기 #배열 구문배열을 v-bind:class 에 전달하여 클래스 목록을 지정할 수 있다.예제보기 목록에 있는 클래스를 조건부 토글 하려면 삼항 연산자를 이용할 수 있다. 이는 항상 errorClass를 적용하고 isActive 가 true 일 때만 activeClass를 적용한다.예제보기 그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있어서 배열 구문 내에서 객체 구문을 사용할 수 있다.예제보기 #컴포넌트와 함께 사용하는 방법사용자 정의 컴포넌트로 class 속성을 사용하면, 클래스가 컴포넌트의 루트 엘리먼트에 추..
[VUE] computed와 watch
computed와 watch computed 속성 템플릿 내에 너무 많은 연산을 넣으면 코드가 비대해지고 유지보수가 어렵다. #기본예제예제보기 예제를 보면, vm.reverseText의 값은 항상 vm.text의 값에 의존한다. 일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딜 할 수 있다. Vue는 vm.reverseText가 vm.text에 의존하는 것을 알고 있기 때문에 vm.text가 바뀔 때 vm.reverseText에 의존하는 바인딩을 모두 업데이트 할 것이다. 그리고 가장 중요한 것은 우리가 선언적으로 의존 관계를 만들었다는 것이다. #computed 속성의 캐싱 vs 메소드computed 속성 대신 메소드와 같은 함수를 정의할 수도 있다. 최종 결과에 대해 두 가지 접근 방식..
[VUE] 템플릿 문법
템플릿 문법 보간법[각주:1](Interpolation) #문자열 데이터 바인딩의 가장 기본 형태는 "mustache"구문(이중 중괄호.. 수염 닮아서?)을 사용한 텍스트 보간이다. v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다. 예제보기 #원시 HTML {{}}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. 예제보기 #속성 {{}}는 HTML 속성(인라인)에서 사용할 수 없다. 쓰고 싶으면 v-bind 디렉티브를 사용. #JavaScript 표현식 사용 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현..
[VUE] vue.js 시작하기
https://jsfiddle.net/Kimara/ka8cbyxm/ model : DB / 데이터 view : HTML5, CSS3, JavaScript ... controller : 중간자 MVC ==> MVVM json과 node.js(rest api) 의 발전으로 인해 FED의 영역이 늘어남 -프레임워크 : 앵귤러 -라이브러리 : react, vue(vue 사이트에서는 프레임워크라고 말함) 라이브러리 에서 가상 DOM을 만들어 부하량을 줄임(스크립트가 알아서 변경되는 부분만 찾아서 바꿔줌) ecma script6 - 바벨, 웹팩 - CLI(dos) - let, const - vue.js를 쓸 때 ecma script6와 호환이 가능하지만 ecma6가 아직 브라우저를 타기 때문에 vue만 따로 공부 ..