먼저 Vue.js에 대해 전반적으로 살펴보자

우선 Vue.js를 사용하기 위해서는 아래 코드를 html문서에 삽입해주면 끝!

<script src="https://unpkg.com/vue"></script>

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는것!

//HTML
<div id="app">
  {{ message }}
</div>
//JavaScript
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

코드를 하나씩 살펴보면서 이해를 도와보자
{{ }} 는 데이터의 내용이 렌더링 되어 HTML 문서에 표현되기 위해 작성해주며
el은 element의 약자로 HTML 엘리먼트를 선택해주고
data 안에는 HTML문서의 {{ }}안에 작성된 변수(message)를 정의해 이를 HTML에 렌더링 시켜주며
이는 콘솔창에서 app.message = “”로 변경이 가능

이것이 가장 기초적인 Vue.js의 문법이며 앞으로 엄청 많은것들을 익힐 예정임!


자료 참고는 Vue.js 2.0 공식사이트 [https://kr.vuejs.org] 이며
공식 사이트 문서를 토대로 정리를 할 것이고,
혹시 이 글을 보시면서 정보가 부족하다 느끼시는 분들은 공식 사이트에서 해답을 얻으시면 좋을 것 같습니다.

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

오늘부터 꾸준히 Vue.js에 대해서 포스팅하면서 공부해 보려고 한다

Angular2, React, Vue 세가지 중 가장 끌렸던게 Vue.js였기 때문에

그냥 읽는 것만으로는 이해에 한계가 있어 직접 남기면서 익혀보려 함.


공식 홈페이지 문서는 다음과 같다  https://kr.vuejs.org/ 

영어를 잘하시는분들이 번역을 전부 해놔서 영어를 못하는 나도 한글로 읽을수 있다!


깃헙의 통계자료인데 보시다시피 'Vue.js 2.0'을 선보이고 나서 사람들의 관심이 대폭 상승했음을 보여주는 자료인 것 같다



사실 그냥 재밌어보여서 시작하는 것..

말을 잘 못해서 길게 쓸 말이 떠오르진 않고 Vue.js 중간에 안놓고 끝까지 할 수 있도록 해야겠다 !

보기쉽게 쓰기보다 공부한 내용을 혼자 정리하는 느낌이라 혹시라도 보시는 분들은 불편하실수도 있을 것 같지만

최대한 깔끔하게 정리해보려 함!

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

1. home brew 설치

homebrew는 mac OS 에서 윈도우의 프로그램 추가/제거와 비슷한?기능을하는 패키지 관리자입니다( git과 ruby 기반 )

homebrew를 사용하면 각종 패키지들을 코드 한줄로 뚝딱 다운이 가능해요

  • 설치방법

터미널에 아래의 명령어를 붙여넣어주세요

1
ruby -"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
cs

설치후에 내 mac에 homebrew가 잘 깔렸나 확인하기 위해 아래 명령어를 입력 후 의사님이 진단하신대로 따라하시면 됩니다

1
brew doctor
cs

homebrew설치 끝! (참고 사이트 : https://brew.sh/index_ko.html )


2. vim 8.0 설치

mac에는 기본적으로 vim (7.3~7.4)이 설치되어있지만 작년말에 나온 8버전을 설치해보자! 그냥 귀찮거나 구버전이 좋다하면 안깔아도 됩니다

  • 설치방법

터미널에 아래 명령어를 차례로 입력합니다

1
2
brew install mercurial
brew install vim --with-override-system-vim

cs


두번째 줄 이후에 이미 설치되어 있다는 에러가 난다면

1
2
brew unlink vim
brew install vim --with-override-system-vim
cs

다시 하란대로 명령어를 입력하고 아래의 명령어로 vim의 버전을 확인했을때 8.0이 나오면 성공!~!

1
vim --v
cs


3. plugin (Vundle) 설치

vim 그 자체로는 단축키가 많은 그저 하드코딩해야하는 도구일 뿐이지만 플러그인으로 이런저런기능을 넣어주면 아주아주아주 좋아져요

vim의 플러그인 매니저는 Vundle로 다음과 같이 설치합니다

  • 설치방법

아래의 명령어를 입력해 Vundle 설치 ( git이 설치되어 있어야 함! )

1
git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

cs



4. vimrc세팅

  • 설치방법

터미널에 아래 명령어를 입력합니다 ( vim으로 ~/.vimrc라는 파일을 열겠다는 명령어, 기존에 있던파일이 아니면 새로 만들어 열게됩니다)

1
vim ~/.vimrc
cs

내용( HTML,CSS 편집 기준으로 플러그인들을 넣었습니다 )

   

 set nocompatible              " be iMproved, required 

 filetype off                  " required


 set rtp+=~/.vim/bundle/Vundle.vim

 call vundle#begin()



 Plugin 'VundleVim/Vundle.vim'

 Plugin 'tpope/vim-fugitive'

 Plugin 'https://github.com/itchyny/lightline.vim'

 Plugin 'https://github.com/tpope/vim-surround'

 Plugin 'https://github.com/skammer/vim-css-color'

 Plugin 'https://github.com/Shutnik/jshint2.vim'

 Plugin 'git://git.wincent.com/command-t.git'

 Plugin 'rstacruz/sparkup', {'rtp': 'vim/'}

 Plugin 'mattn/emmet-vim'

 Plugin 'ascenator/L9', {'name': 'newL9'}

 Plugin 'scrooloose/nerdtree'

 

 call vundle#end()            " required

 filetype plugin indent on    " required


 imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>")

 set autoindent

 set smartindent

 set tabstop=2

 set shiftwidth=2

 set nu

 colorscheme default

 set backspace=indent,eol,start

 syntax enable



위와 같이 작성 후 :w로 저장후 :PluginInstall로 플러그인들을 설치합니다.


5. 플러그인 종류 및 설명


플러그인 위의 두줄은 다른 플러그인을 사용하기 위한 필수 플러그인 입니다


  • emmet-vim은 html:5 를 입력 후 ctrl y 를 누른 뒤 ,를 누르면 html폼이 완성되는 플러그인 이지만


아래의 imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>") 로 단축키를 탭키로 바꿔줬습니다


  • nerdtree는 디렉토리를 볼수있게 해주는 플러그인이며 :NERDTree로 실행할 수 있어요


다른 플러그인들은 저도 잘모르겠으니 알려주세요 하하 


set autoindent  " 자동 들여쓰기
set smartindent " 스마트한 들여쓰기

set tabstop=2 "탭 2칸

set shiftwidth=2 " 자동 들여쓰기 2칸
set number " 행번호 표시, set nu 도 가능

colorscheme default  "  vi 색상 테마 설정
set backspace=eol,start,indent "  줄의 끝, 시작, 들여쓰기에서 백스페이스시 이전줄로
syntax enable " 문법강조 on



끝! 안되시는 부분 댓글로 남겨주세요 끝까지 읽어주셔서 감사합니다


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

+ Recent posts