본문 바로가기

개발/Vue.JS

(11)
Sequence, Progression 수열, 시퀸스, 시퀀스 1. 수열(Sequence) 이란? ㅇ 어떤 규칙에 따라 순서화된 요소들의 열(列) 2. 수열의 표기 ㅇ { x[n] } 또는 { xn } 또는 {x1,x2,...} 또는 x1,x2,... 등 - x[n],xn : 항 또는 원소(term), 수열에서 각각의 수 - n : n 번째 수/값/항, n 은 자연수 - { } : 집합(Set)과 표현기호는 같지만, 문맥적으로 다르게 표현됨 - [ ] : 이산 함수에서의 독립변수를 나타냄 . 한편, ( ) 는 연속 함수에서의 독립변수를 나타냄 3. 수열의 쓰임새 ㅇ [목록] 어떤 규칙에 따라 순서화된 `요소 열(列) 또는 리스트(List)` - 例) 문자열,숫자열,비트열 등 ㅇ [함수] 자연수(N)를 정의역으로하고, 실수(R)를 공역으로하는 `함수` ㅇ [컴퓨터] ..
DOM Property DOM 프로퍼티 1. DOM 노드 특징 ㅇ DOM API는 웹페이지 문서 내의 모든 것을 노드 객체로 바라다 봄 2. DOM 노드(Node) 정보 프로퍼티 ㅇ 노드 정보 프로퍼티 (node information property) - nodeName, nodeValue, nodeType, childNodes ㅇ 노드 종류 : 총 12 가지 - element(요소 노드), attribute(속성 노드), text(텍스트 노드), comment(주석 노드), document(문서 노드) 등 ㅇ 노드 종류 프로퍼티 (nodeType) - element 1, attribute 2, text 3, comment 8, document 9 등 . text node : 자식노드가 없으나 그 안에 글을 읽을 수 있는 프로퍼티가 있음 ㅇ ..
첫 번째 Vue.js 앱 빌드 | Vue.js 2.0 튜토리얼 Vue.js는 사용자 인터페이스를 구축하기위한 빠르고 인기있는 자바 스크립트 프레임 워크입니다. MVC 모델에서 View를 처리합니다. 다른 자바 스크립트 라이브러리와 함께 사용하거나 단독으로 SPA (단일 페이지 응용 프로그램)를 작성하는 데 사용할 수 있습니다.이 튜토리얼에서는 다음과 같은 가정을합니다.HTML 및 CSS기본 자바 스크립트Vue.js 프로젝트 설치이 튜토리얼을 시작하기 전에 vue.js 프로젝트를 설치하는 방법을 보여주는 자습서를 작성했습니다 . 이 튜토리얼을 먼저 참조하여 프로젝트를 시작하십시오. 참고 :이 프로세스는 위 비디오 처음 부분에서 다룹니다.Bulma CSS 프레임 워크 통합하기Bulma는 비교적 새로운 반응 형 플렉스 박스 기반 프레임 워크입니다. 이 과정에서 Boots..
Vue.js 설치 방법 Vue.js 프로젝트를 시작하고 실행하는 것은 매우 간단합니다. 다른 자바 스크립트 프레임 워크와 마찬가지로 여러 가지 방법을 통해 Vue.js를 설치할 수 있습니다.따라서이 튜토리얼에서는 시작하는 데 필요한 모든 단계를 다룰 것입니다. CDN을 통해 Vue.js 설치컨텐츠 전송 네트워크를 사용하면 HTML 스크립트 태그를 사용하여 프로젝트에서 Vue를 사용할 수 있습니다. 그것은 빠르고 쉽게 시작하고 실행할 수있는 방법입니다.Vue가 npm으로 게시되는 순간 최신으로 유지되므로 사용하는 것이 권장되는 CDN은 https://unpkg.com/vue 입니다.위의 줄에서 URL을 복사 하고 HTML 스크립트 태그 의 src 속성 으로 지정하기 만하면됩니다 .이것은 페이지의 닫는 body 태그 바로 아래에 ..
Vue 라우터 자습서 - Vue의 라우터 라이브러리 사용 Vue는 Vue 응용 프로그램 내에서 페이지 경로와 경로를 설정하는 데 사용할 수있는 자체 라우터 라이브러리 인 vue-router를 제공 합니다. 이 튜토리얼에서는 vue-router를 통합하고 두 가지 구성 요소로 간단한 탐색을 설정합니다. Vue 라우터 설치Vue CLI를 사용하여 프로젝트를 시작했을 때 우리는 vue-router 패키지를 포함하지 않았습니다 . 이 옵션은 수동 구성 옵션을 선택하여 프로젝트를 시작할 때 지정할 수있는 옵션입니다.걱정하지 않아도, 우리는 라우터를 라우터에 추가 할 수 있습니다.먼저 콘솔에서 프로젝트 폴더를 방문하여 다음 명령을 실행하십시오.> yarn add vue-router참고 : 우리 프로젝트는 원사를 사용하고 있지만 npm을 사용하는 경우 npm install..
Vue Animation Tutorial - Vue의 애니메이션 시스템 사용법 배우기 Vue 2는 상태 전환과 함께 입력 및 이탈 애니메이션을 통합하는 기능을 제공합니다. 이 레슨 전반에 걸쳐 Vue 애니메이션을 기본 컨텍스트에서 살펴보고 자체 애니메이션을이 과정에서 수행해 온 프로젝트와 통합 할 것입니다. Vue에 애니메이션 입력 및 종료아마도 Vue 애니메이션의 가장 큰 사용 사례는 주어진 요소가 DOM에 들어가고 떠날 때를 기반으로합니다. 이러한 애니메이션이 제대로 수행되면 요소를 즉시 표시하는 대신 UI에 멋진 터치를 추가하십시오.애니메이션 입력 및 종료를 시연하려면 /src/components/Skills.vue를 열고 템플릿을 다음과 같이 수정하십시오. {{ errors.first('skill') }} 여기에서 주목해야 할 중요한 부분은 전환 래퍼 구성 요소입니다. alert-..
Vue 양식 자습서 - 사용자 입력 캡처 및 유효성 검사 Vue.js로 사용자 입력을 처리하는 것은 상당히 간단합니다. 상기의 도움으로 V 모델 지침 및 양식 유효성 검사에 대한 몇 가지 VUE 검증 플러그인 중 하나.우리가 만들고있는 앱은 하나의 텍스트 요소 만 포함 할 것이지만 Vue로 양식 입력 필드를보다 잘 이해할 수 있도록 잠깐 다른 양식 요소를 살펴 보겠습니다. Vue V- 모델 지시문사용자 입력을 캡처해야하는 경우 양방향 데이터 바인딩을 가능하게하는 양식 입력 및 텍스트 영역에 v-model 지시문을 사용할 수 있습니다 . 사용하기가 매우 쉽습니다./src/components/Skills.vue 파일을 열고 다음을 포함하도록 템플릿 섹션을 조정하십시오. {{ skill }} 그런 다음 섹션에서 참조 된 스킬 속성을 데이터 섹션에 추가합니다 . da..
Vue CSS Tutorial - 클래스 및 스타일 바인딩 Vue.js를 사용하면 CSS를 쉽게 처리 할 수 ​​있습니다. Vue 지시어를 사용하여 템플릿 내에서 클래스 및 스타일 바인딩을 모두 처리 할 수 ​​있으며 구성 요소 내에 인라인 CSS를 작성하거나 더 많은 조직을 위해 외부 CSS 파일에 연결할 수 있습니다.이 튜토리얼에서는 Vue CSS와 관련된 모든 관련 주제를 다룰 예정입니다. Vue에서 스코프 이해하기 작업중인 /src/components/Skills.vue 구성 요소 파일 을 보면 아래쪽에 다음 줄이 있습니다.즉,이 구성 요소에 정의 된 모든 CSS는이 구성 요소의 템플릿에만 적용됩니다.이를 실제로 보려면 /src/App.vue 파일을 방문 하여 다음을 입력하십시오.저장하면 앱의 배경색이 밝아집니다.범위 를 브라우저를 보면 노란색 사각형이 ..