본문 바로가기

Vue.js

[Javascript+Vue.js] Scrollbar 여부에 반응하는 엘리먼트 만들기(with Class and Style Binding) INTRO 웹 페이지를 개발하다보면, 유효성 체크를 위해 기존 엘리먼트에 별도의 아이콘을 배치하는 경우가 있다. 본 포스팅에서는 아이콘과 스크롤바가 겹치는 현상을 해결한 경험을 공유한다. 1. 하고자 했던 것 - 위의 네이버 예시를 보면, 자물쇠 모양은 해당 필드의 유효성 통과 유무에 따라 달라진다. - 프로젝트 진행 도중, - input 이 아닌 text area에 해당 기능을 똑같이 구현해야 할 일이 생겼다. - 그래서 v-model로 바인딩 된 변수를 감지하며 유효성 체크 로직을 적용하였고, - 유효성 검증 통과 여부에 따라 동적으로 style을 다르게 적용하여 해결. :class="{ 'check-ok': isValid === true, 'check-false': isValid === false,.. 더보기
[Firebase] Google Login 붙여보기(With Vue.js, Github Pages) INTRO Google API 에서 지원하는 소셜 로그인 기능을 Vue.js에 적용해보기 1. Vue.js 프로젝트 생성 --> create 명령어를 통해 vue 프로젝트를 생성한다. --> 생성 방법은 아래 글 참고 rangsub.tistory.com/82?category=966512 [vue.js] vue.js란? 개발 환경 만들기 Evan you가 만들었다. 2014년 릴리즈를 시작으로 꾸준히 발전하는 자바스크립트 프레임워크. github.com/vuejs/vue vuejs/vue 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for bu.. rangsub.tistory.com 2. google cloud platfo.. 더보기
[vue.js] vue.js란? 개발 환경 만들기 Evan you가 만들었다. 2014년 릴리즈를 시작으로 꾸준히 발전하는 자바스크립트 프레임워크. github.com/vuejs/vue vuejs/vue 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - vuejs/vue github.com 발음 그대로 뷰(View)에 최적화된 프레임워크 컨트롤러 대신 View모델을 가지는 패턴으로 디자인.(M V VM 패턴) SPA(Single Page Application이다.) index.html이 1개. Routing 화면전환(Router가 따로 필요하다) 특징 1. Virtual DOM으로 빠른 렌더링 2. 경량 라이브러리(작은 용.. 더보기

반응형