Vue란 MVVM 패턴의 뷰모델(ViewModel)레이어에 해당하는 화면 (View)단 라이브러리이다.
사용자에게 보여지는 html 부분 DOM 이라는 것들을 이용해서 자바스크립트로 조작을 할 수 있게끔 구성되어져있다.
Vue의 가장 큰 특징은 DOM Listeners 인데
자바스크립트에 있는 값을 바꿔주거나 특정 로직에서 실행을 하게 된다.
자바스크립트에서 값이 바뀌었을 때 data bindings을 통해 바뀌게 된다.
< !-- 단축키 --!>
! + Tab : html 기본 코드가 생성된다.
div#app id가 app 인 div 태그가 자동완성 된다.
$('app');
document.querySelector('#app');위와 아래는 같은 코드이다.
html은 태그 DOM의 정보를 넣는 것이고
자바스크립트의 역할은 해당 태그나 DOM 의 내용을 조작하는 것이다.
Objext.defindProperty() 라는 API는 객체의 동작을 재정의 하는 API이다.
Vue의 핵심은 데이터의 변화를 라이브러리에서 감지하여 알아서 화면으로 그려주는 것이다.
자바스크립트 즉시 실행함수
function () {
statements
})();뷰 인스턴스
인스턴스는 뷰로 개발할 때 필수로 생성해야하는 코드
인스턴스를 생성한다는 것은 new Vue(); 한다는 말
엘레멘트를 무조건 붙여줘야 사용이 가능하다
뷰를 생성자 함수 형태로 찍어냄
인스턴스 안에서 활용할 함수들과 속성들이 있다.
객체는 key, value 형태로 들어오는 것이 중요함.
모던 프레임워크들은 영역별로 코드를 관리하고 그것이 바로 컴포넌트 방식을 사용한다는 말
컴포넌트 끼리 하위, 상위라는 관계가 생긴다.
화면을 구분지어서 관리하는 것이 뷰 컴포넌트다 => 재사용성이 올라감
<script *src*="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 를 쓰는 이유
좋은 질문이네요..! :) 질문 주신 script 태그는 라이브러리를 사용하기 위해 필요한 코드입니다. 이 스크립트 코드를 넣으면 HTML 파일을 브라우저가 해석하다가 해당 주소 "https://cdn.js...."로 GET 요청을 보내 파일을 얻어옵니다. 그 파일이 HTML 파일에 주입이되면 자바스크립트 영역에 해당 라이브러리를 사용할 수 있는 변수나, 기능들이 생기게 되죠. 결론적으로 이 스크립트 태그로 하려는 건 new Vue()라는 인스턴스를 생성하기 위해서입니다 :)
다음 글은 한번 참고로 알아놓으시면 좋을 것 같네요. https://d2.naver.com/helloworld/59361
Vue.component('컴포넌트 이름', 컴포넌트 내용);전역 컴포넌트 등록
template : 컴포넌트가 표현되는 마크업이나 스타일을 의미한다.
components:{
'컴포넌트 이름' : 컴포넌트 내용 //키, 값
}지역 컴포넌트
전역, 지역 두개 똑같은 내용
인스턴스를 생성할 때마다 컴포넌트를 등록해줘야하는 것이 지역컴포넌트
전역으로 등록하면 인스턴스르 생성할 때마다 등록할 필요가 없음
하지만 실제로 서비스를 구현하실때는 인스턴스 하나를 붙이고 컴포넌트를 붙여나가는 방법으로 함
(그냥 차이점을 보여주기 위해서)
컴포넌트는 각각 고유한 데이터 유효범위를 갖는다.
각각의 컴포넌트는 데이터를 각각 관리하는데 그것들을 공유하려면 컴포넌트 통신 방식이 있음
상위에서 하위로 데이터를 내려줌 : props 속성
하위에서 상위로는 이벤트를 올려줌 : 이벤트 생성
일방적인 n 방향 통신에서는 오류룰 찾기가 어려움 (ex MVC패턴에서 주로 그랬음 )
컴포넌트 통신 방식이라는 규칙이 생기면 데이터의 흐름을 추적할 수 있다.
항상 데이터가 내려오고 아래에서 위로는 이벤트가 올라가기때문!
내려가는 데이터는 props 라고 할거고
아래에서 위로 올라가는 데이터는 event 라고 할 거다.
template : '<hi>{{ propsdata }}</h1>', <=에 또 들어감
props: ['propsdata'] <= data에 있는 hi가 들어가고
data:{
message:'hi'
}