JS/Vue.js5 인스턴스 ■ 인스턴스 ( Instance ) "인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다" -- 출처 : Vue.js 입문 ( 장기효 ) □ Vue 인스턴스 생성자 Vue 생성자는 뷰 라이브러리를 로딩하면 접근 할 수 있음. 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의 편리하게 사용하기 위함 임 □ Vue 인스턴스 옵션 속성 설명 el 뷰로 만든 화면이 그려지는 시작점. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정. data 새로운 속성( ex. message)을 추가하고 해당 속성에 값을 주게되면, 화면에 렌더링 할 때 해당 데이터를 보여줌. template 화면에 표시할 HTML, CSS 등.. 2018. 8. 3. 디렉티브 ■ 디렉티브 ( Directive ) 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. □ 단방향 디렉티브 뷰(HTML 요소)에서 값을 변경하더라도 모델 객체의 값이 변하지 않는다. v-text `` innerText 속성에 연결된다. 태그 문자열을 HTML 인코딩하여 나타내기에 화면에는 태그 문자열이 그대로 나타난다. {{ }} 머스텟취와 같은 기능. data를 text로 표현하는데 사용된다. ex) v-html innerHTML 속성에 연결된다. 태그 문자열을 파싱하여 화면에 나타낸다. HTML 인코딩과 디코딩을 수행하지 않기에, XSS 공격에 취약하다. ( v-text 사용이 권장된다. ) jav.. 2018. 7. 26. 개발환경 구성 ◆ Node.js https://nodejs.org/en/ ◆ Chrome 브라우저 https://www.google.co.kr/chrome/browser/desktop/index.html ◆ Vue.js 크롬 플러그인 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd ◆ Github 공식 사이트 https://github.com/ ◆ Github 학습 발표자료 https://milooy.wordpress.com/2017/06/21/working-together-with-github-tutorial/ ◆ Github Source Tree https://www.sourcetreeapp.com/ ◆.. 2017. 9. 5. ATOM ■ ATOM 공식사이트 https://atom.io/ ■ ATOM 플러그인 https://joshuajangblog.wordpress.com/tag/%EC%95%84%ED%86%B0-%ED%95%84%EC%88%98-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/ □ Plug-in Theme settings 에서 install Theme에서 검색 후 install -. UI Theme: seti-ui ( 폴더를 만들고 해당 폴더에 들어있는 파일의 확장자를 구분하는 이미지등이 쉽게 표기 되어 있음 ) -. Syntax Theme: Atom-material-syntax-dark Theme에서 해당 명으로 검색 후 install 하면 됨. ( 이후 선택 하면 됨 ) □ Plug-in Pac.. 2017. 9. 5. Vue.js The Progressive JavaScript Framework Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. MVVM 패턴의 ViewModel 레이터에 해당하는 View 단 라이브러리 -. 데이터 바인딩과 화면 단위를 컴포넌트(Component) 형태로 제공하며, 관련 API를 지원하는데에 궁긍적인 목적이 .. 2017. 8. 3. 이전 1 다음