Web/Vue.js6 [Vue.js] - HTML5 WebSocket(웹 소켓) 소스코드 및 데모 사이트 웹소켓 클라이언트가 필요해서 bootstrap+vuejs로 간단하게 만들어봤습니다. jQuery에서 vuejs로 넘어오면서 익숙하지 않은게 힘들었는데, 조금씩 익숙해지니 개발하는데 훨씬 편리함을 느끼네요. 웹소켓 또한 이벤트핸들러와 메소드로 간단히 만들 수 있습니다. 핵심 부분은 아래가 전부입니다. ... //소켓 연결 this.socket = new WebSocket(this.address) ... this.socket.onopen = 소켓 연결 이벤트 헨들러 ... this.socket.onerror = 소켓 에러 이벤트 헨들러 ... this.socket.onmessage = 데이터 수신 이벤트 헨들러 ... this.socket.onclose = 소켓 해제 이벤트 헨들러 ... // 소켓 데이터 .. 2020. 11. 13. Vue.js 뷰 템플릿 정리 (5) 1. 뷰 템플릿2. 데이터 바인딩 (Data Binding)3. 자바스크립트 표현식4. 디렉티브5. 이벤트 처리 (v-on)6. 고급 템플릿 기법 (computed, watch)6-1 computed 속성6.2 watch 속성6.3 computed 와 watch 속성의 차이1. 뷰 템플릿뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성라이브러리 내부적으로, 가상 돔 기반의 render() 함수로변환변환된 render() 함수는 최종적으로 사용자 화면에 표시변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해짐JSX 기반의 render() 함수에 더 익숙한 리액트 개발자라면 템플.. 2020. 5. 7. Vue.js 뷰 라우터 정리 (4) 1. 뷰 라우터2. 뷰 라우터 실습2.1 뷰 라우터 기초2.2 중첩 라우터 (Nested routes)2.3 네임드 라우터 (Named Routes)2.4 네임드 뷰 (Named View)1. 뷰 라우터라우팅(Routing) 이란?원래는 네트워크에서 사용되는 용어로, 어떤 네트워크 안에서 통신 데이터를 보낼 최적의 경로를 선택하는 과정을 뜻함웹에서의 라우팅웹 페이지 간의 이동 방법을 뜻함예시브라우저 URL을 입력하면 해당 페이지로 이동링크를 클릭하면 해당 페이지로 이동뒤로가기를 누르면 히스토리의 이전 페이지로 이동 뷰 라우터 Vue.js의 공식 라우터Vue.js 코어와 긴밀하게 연결되어 SPA를 쉽게 구축 할 수 있음화면 간의 이동 시, 깜빡거림 없이 매끄럽게 전환 주요 기능Nested route/vie.. 2020. 4. 29. Vue.js 컴포넌트 (3) 1. 컴포넌트2. 컴포넌트 등록2.1 전역 컴포넌트 등록2.2 지역 컴포넌트 등록2.3 지역컴포넌트와 전역컴포넌트 동작 비교3. 컴포넌트 통신3.1 부모 → 자식 컴포넌트로 데이터 전달 (props)3.2 자식 → 부모 컴포넌트로 데이터 전달 (v-on, $emit)3.3 부모 ↔ 자식의 관계가 아닌 컴포넌트 통신 (이벤트버스)1. 컴포넌트컴포넌트는 Vue의 가장 강력한 기능 중 하나기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움뷰컴포넌트는 뷰인스턴스이기도 하기 때문에, 모든 옵션 객체와 라이프사이클 훅 사용 가능 2. 컴포넌트 등록컴포넌트를 등록하는 방법은 두 가지가 있음전역 등록: 특정 인스턴스에서만 사용 가능지역 등록: 뷰로 접근 가능한 모든 범위 사용 가능 2.1 전역 .. 2020. 4. 23. Vue.js 뷰인스턴스 (2) 1. 뷰인스턴스(Instance)2. 뷰인스턴스 라이프 사이클3. 실습 예제1. 뷰인스턴스(Instance)뷰 인스턴스는 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위Vue 생성자는 미리 정의 된 옵션으로, 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있음xxxxxxxxxxvar vm = new Vue({ // 옵션}) 뷰 인스턴스를 생성할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 options 객체를 전달 해야함API Referencexxxxxxxxxx//옵션 예시var vm = new Vue({ el: '#app', //마운트할 엘리먼트 data{ message: 'Hello Vue.js!' //데이터 }}).. 2020. 4. 21. Vue.js란 무엇인가? (1) 1. Vue.js란?2. Vue.js의 장점3. Vue.js의 특징1. Vue.js란?Vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크점진적인 프레임워크다른 단일형 프레임워크와 달리, 점진적으로 채택할 수 있도록 설계코어 라이브러리 → 컴포넌트 기반 → 클라이언트 사이드 라우팅 → 상태관리뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 제공프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 2. Vue.js의 장점배우기 쉬움다른 프레임워크는 타입스크립트, ES6, 웹팩 등을 함께 학습해야 함Vue.js는 먼저 배우고 나중에 학습에도 상관없음React와 Angular에 비해 속도가 빠르고 가벼움성능 비교 글https://blog.lo.. 2020. 4. 20. 이전 1 다음
