인생은 양탄자의 무늬짜기

.vue파일 이해하기 html에서 위처럼 사용하던 것을 js파일에서 $mount로 아래처럼 사용 // new Vue() -> vue인스턴스 new Vue().$mount('#root'); html에서 위처럼 사용하던 것을 .vue에서 아래처럼 바꿈

연산자 연산자는 프로그래밍 로직을 구현할 때 논리식이나 산술식을 표현하기 위해 사용하는 기호들을 의미 주로 코드에서 흔하게 마주치는 아래와 같은 기호들을 의미함 👉 산술 연산자 : +, -, *, /, % 👉 논리 연산자 : ||, && 👉 조건 연산자 : ? : 👉 관계 연산자 : >,

인스턴스 생성 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작함 var vm = new Vue({ // 옵션 }) 관례적으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용 Vue 인스턴스를 생성할 때는 options 객체를 전달해야 함 Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됨

동적 Props 정규 속성을 표현식에 바인딩하는 것과 비슷하게, v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩 할 수 있음 데이터가 상위에서 업데이트 될 때마다 하위 데이터로도 전달됨 v-bind에 대한 단축 구문을 사용하는 것이 더 간단함 객체의 모든 속성을 props로 전달하려면, 인자없이 v-bind를 쓸 수 있음(v-bind:prop-name 대신 v-bind). 예를 들어 todo 객체가 있다면, todo: { text: 'Learn Vue', isComplete: false } 그런 다음, 이것은 다음과 같은 동작을 함 리터럴 vs 동적 초보자가 흔히 범하는 실수는 리터럴 구문을 사용하여 숫자를 전달하려고 시도하는 것임 그러나 이것은 리터럴 prop이기 때문에 그 값은 실..

Props로 데이터 전달하기 모든 컴포넌트 인스턴스에는 자체 격리 된 범위가 있음 즉, 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조 할 수 없으며 그렇게 해서는 안됨 데이터는 props 옵션 을 사용하여 하위 컴포넌트로 전달 될 수 있음 prop는 상위 컴포넌트의 정보를 전달하기위한 사용자 지정 특성임 하위 컴포넌트는 props 옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해야함 Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며 // vm의 this.message로 사용할 수 있습니다. template: '{{ message }}' }) 그런 다음 일반 ..

전역 등록 전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용 등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트, 로 사용할 수 있음 루트 Vue 인스턴스를 인스턴스화하기 전에 컴포넌트가 등록되어 있는지 확인하기 // 등록 Vue.component('my-component', { template: '사용자 정의 컴포넌트 입니다!' }) // 루트 인스턴스 생성 new Vue({ el: '#example' }) 다음과 같이 렌더링 됨 사용자 정의 컴포넌트 입니다! 사용자 정의 컴포넌트 입니다! 지역 등록 모든 컴포넌트를 전역으로 등록 할 필요는 없음 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수있..

컴포넌트란 컴포넌트는 Vue의 가장 강력한 기능 중 하나 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됨 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있음 Vue 컴포넌트는 Vue 인스턴스이기도 함 그러므로 모든 옵션 객체를 사용할 수 있음 (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있음 컴포넌트 작성 컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위한 것임 컴포넌트 A는 자체 템플릿에서 컴포넌트 B를 사용할 수 있음 그들은 필연적으로 서로 의사 소통이 필요함 부모는 자식에게 데이터를 전달해야 할 수도 있으..

Vue.js Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며, 재사용이 가능한 UI들을 묶어서 사용할 수 있음 Vue.js는 다른 프에임워크와는 달리 유연하고 가벼움 일부 화면만 적용하는 것이 가능하며, SPA(Single Page Application : 단일 페이지 애플리케이션)개발도 지원 Vue.js는 개발자를위한 학습 곡선을 고정시키고 HTML 및 ES6에 대한 기본 지식만을 사용하여 개발 시간 절약 간단한 Vue 프로젝트는 태그로 등록하여 별도의 변환작업 없이 사용할 수도 있고 Vue-router를 이용하여 SPA도 개발할 수 있음..