전체 글 586

vue.js form 사용법

Input data bind basicinput tag에 데이터를 바인딩 하기 위해서는 v-model이 필요하다. v-model을 사용하면 아주 쉽게 데이터를 바인딩 시킬 수 있다.App.vueApp.vue에 email input 필드를 추가한 후, email 데이터를 만들고 v-model="email"로 해당 인풋 필드와 연결시켜준다. Email Mail: export default { data() { return { email: "" } } } 이제 input 필드에 값을 입력하면 아래 `` 데이터에 바인딩 되는 것을 볼 수 있다.v-model.lazyv-model은 기본적으로 모든 key stroke가 발생할 때마다 값을 업데이트 시킨다. 이를 방지하고 싶다면 v-model.lazy를 사용하면 된다..

frontend/vue.js 2018.01.23

vuejs: Filter, Mixins 심화

Filtersvue.js는 default filter가 없기 때문에 사용하기 위해서는 직접 만들어야 한다.Local filter 만들기methods를 만드는 것처럼 아주 간단하게 만들 수 있다.lower case를 모두 upper case로 만들어 주는 필터를 만들어보겠다. export default { data() { return { text: 'Hello There!' } }, filters: { toUppercase(value) { return value.toUpperCase(); } } } 이제 HELLO THERE라고 출력되는 것을 볼 수 있다.Global filter 만들기, Filter chainglobal filter도 비슷하게 만들 수 있다. main.js에 Vue.filter()로 등록..

frontend/vue.js 2018.01.22

CSS 색상 단위 -Name, RGB, RGBA, HSL, HSLA

Sass에서는 다음의 우선순위를 따라서 색을 입력하라고 얘기한다. 인간의 두뇌로 이해하기 쉽고 작성자가 색을 변경하기 쉬운 순서대로 사용하라고 하는 것 같다.CSS 색키워드: 여기서 모든 목록을 확인 가능하다. (ex black, red …)HSL 표기법 : hue, saturation, lightness를 사용. ({backgrount-color: hsl(120, 100%, 50%)})RGB 표기법: 우리가 알고있는 그 RGB. (ex. rgb(255, 0, 0))RGB 표기는 0~255 숫자 혹은 0%~100%의 백분율을 사용한다. rgb(100%, 0%, 0%)는 rgb(255, 0, 0)과동일16진법 표기법: #000추가적으로 Alaph(투명도)가 추가된 RGBA, HSLA가 있다.HSLA: hu..

frontend/html & css 2018.01.21

vue.js custom Directives 만들기

vue는 v-for, v-text 등 13가지 vue Directive들 이외에도, 커스텀 directive를 만들 수 있다는 큰 장점이 있다. 이는 여러 방면에서 유용하게 사용이 가능하다.vue의 기본 directive들은 이 글에서 다루었다.vue directive 만들기vue directive는 main.js에서 전역으로 만든다.Vue.directive();로 등록이 가능하다.main.js에서import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', {}); new Vue({ el: '#app', render: h => h(App) } hooks위의 directive 정의 객체는 5가지 훅 함수를 제공한다. 어떤 상황에서..

frontend/vue.js 2018.01.21

vue.js 동적 컴포넌트 사용법 (component, keep-alive)

를 사용해서 컴포넌트 파트를 동적으로 변화시킬 수 있다.컴포넌트를 변경하면 매번 컴포넌트가 Destory되고 새로 생성된다.App.jsApp.js에서 selectedComponent라는 데이터를 생성하고, 3개의 컴포넌트를 해당 데이터에 바인딩해주는 버튼을 생성.를 이용해서 동적으로 템플릿에 뿌려주는 component를 변화시킬 수 있다. Quote Author New Default content dynamic component 동작원리위에서 언급했듯이, dynamic component를 사용하여 다른 컴포넌트로 전환하면 항상 해당 컴포넌트는 destory되고, 새 컴포넌트가 create 된다. destroyed lifecycle로 이를 확인해 볼 수 있다.couter 데이터를 증가시키는 간단한 방법으로..

frontend/vue.js 2018.01.20

vue.js directives(디렉티브, 지시문) 알아보기

Direcitve: “지시문”이라는 뜻으로 vue 엘리멘트에 사용되는 특별한 속성이다. 지금까지 다뤄온 v-model, v-for 등이 모두 지시문.디렉티브는 총 13가지가 있다. vue 2.0의 모든 디렉티브 리스트는 vue.js 공식 문서의 directives에서 자세한 확인이 가능하다.v-text내부의 값이 Vue 엘리멘트의 변수로 지정된다. ``와 v-text="text"는 동일하다고 볼 수 있다.v-htmlvue의 테이터는 태그 자체가 html에 표시된다. vue 엘리먼트의 데이터에 Hello를 넣고 html에 뿌려보면 그대로 출력되는 것을 볼 수 있다.이를 렌더링해서 Hello로 출력하고 싶을 때 v-html 디렉티브를 사용하면 된다.v-show해당 엘리멘트의 display: none을 활성화..

frontend/vue.js 2018.01.19

vue.js 컴포넌트 사용법 및 기초

Vue Components 사용법기초 세팅 (main.js, App.vue)이번 component 예제에는 webpack을 사용하였다. 자세한 내용은 vue webpack에서 다룰 예정.src 디렉토리에 main.js와 App.vue를 만들고, main.js에 App.vue를 등록해 주어야 한다.index.html main.jsimport Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }) Vue components 만들기vue component는 template, script, style 크게 세가지로 구성된다.다음은 vue component의 예시. App.vue에 다음과 같이 입력한다.App.v..

frontend/vue.js 2018.01.18

vue slot 사용법

vue.js에서 부모 컴포넌트에서 자식 컴포넌트 내부의 데이터를 추가하고 싶은 경우, 을 사용하면 된다.App.vueApp.vue에서 아래 있는 Quote 컴포넌트를 호출하여 해당 컴포넌트에 태그를 넣어보자. Quote Test import Quote from './components/Quote.vue'; export default { components: { appQuote: Quote } } Quote.vuetemlpate 안에 을 추가 해 주면 자동으로 데이터가 들어온다. export default { } Scope 특징1. Style은 자식 컴포넌트에서만 적용된다.위의 Quote에 스타일을 적용시키고 싶다면 자식 컴포넌트인 Quote.vue에서 style을 적용시켜야만 적용된다. export de..

frontend/vue.js 2018.01.17

Downloading youtube in terminal: youtube-dl

요즘은 유투브 영상을 쉽게 다운로드 받을 수 있는 다양한 프로그램, 익스텐션 등이 있어서 쉽게 영상을 다운받을 수 있다.터미널에서도 유투브 영상을 다운받을 수 있는 흥미로운 라이브러리가 있어서 소개해본다.이름은 youtube-dl.설치맥의 경우에는 brew, 리눅스는 pip로 설치할 수 있다. (물론 curl로 직접 다운받아 설치해도 된다.)# mac os의 경우 brew 사용 $brew install youtube-dl # pip로 설치 $ sudo -H pip install --upgrade youtube-dl # 직접 설치 $ sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl $ sudo ch..

tools/terminal 2018.01.16