Inflearn [ Vue.js 시작하기 - Age of Vue.js ] 강의 기록입니다.
What is Vue?
MVVM 패턴의 뷰모델 레이어에 해당하는 화면(view)단 라이브러리.
view는 html영역이고 DOM으로 관리함
view에서 사용자가 발생시킨(키보드, 마우스 등) 이벤트를 중간에서 DOM Listener가 이벤트를 청취(?)함 -> js의 데이터를 변경시키거나 js의 로직에서 이벤트를 실행시킴 -> js에서 변경된 데이터를 Data Bindings를 이용해서 다시 view화면에 반영하게 됨.
vue의 특징 중 하나. Reactivity(반응성) - javaScript의 상태 변화에 따라 자동으로 결과값을 추적, 변환하여 보여줄 수 있다.
Vue 인스턴스
뷰 개발에 필수 생성 단위
인스턴스 생성 -> var vm = new Vue({ 내용 })
생성 하고 나면 변수 안에 값을 담을 수 있다.
인스턴스 안에 사용 가능한 key값은 정해져 있다.(el, data, methods, created 등)
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// vue 인스턴스 생성 : vue 사용에 필수적인 인스턴스 생성
var vm = new Vue({
el : '#app', //el은 elemnet의 약자 -> body태그 안에서 app이라는 id를 가진 태그를 찾아서 인스턴스를 붙여서 해당 태그 안에서 vue의 기능과 속성을 쓰겠다.
data : {
message : 'hi'
},
methods : {
},
created : function(){
}
});
</script>
</body>
Vue 생성자함수
미리 Vue 생성자 함수를 정의해두면, new Vue()로 인스턴스를 어떤 객체(var vm)에 생성할 때마다 객체(vm)안에는 미리 정의한 생성자 함수들을 코드에서 바로 사용할 수 있ek.
매번 함수를 정의 하는 것이 아닌 그냥 가져다 쓰면 되는 것.
즉시실행함수
<script>
var div = document.querySelector('#app');
var viewModel = {}; //객체 선언
// 즉시실행함수 - 로직이 직접적으로 노출되지 않도록 함
(function(){
// 라이브러리화 하려면? 함수형으로 만들기
function init(){
// Object.defineProperty : 객체의 동작을 재정의하는 api | Object.defineProperty(대상객체, 객체의 속성, { 정의할 내용 })
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작 정의 : get
get : function(){ // viewModel.str에 접근
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작 정의 : set
set : function(newValue){ // viewModel.str에 값 할당
console.log('할당',newValue);
//div.innerHTML = newValue; // 값을 바꿀 때마다 화면 데이터가 변화 => reactivity의 핵심!
render(newValue);
}
});
}
function render(value){
div.innerHTML = value;
}
init();
})();
</script>
[ 참고 ]
https://vuejs.org/guide/introduction.html#what-is-vue
Introduction | Vue.js
vuejs.org
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
Function - JavaScript | MDN
Function 생성자는 새 Function 객체를 만듭니다. 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval (en-US)과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
Object.prototype.constructor - JavaScript | MDN
인스턴스의 프로토타입을 만든 Object 함수의 참조를 반환합니다. 이 속성값은 함수 자체의 참조임을 주의하세요, 함수 이름을 포함하는 문자열이 아니라. 그 값은 1, true 및 "test"와 같은 원시(primi
developer.mozilla.org
'공부하자 > Vue.js' 카테고리의 다른 글
| #4. Vue 싱글 파일 컴포넌트, Vue CLI (0) | 2023.10.05 |
|---|---|
| #3. HTTP 라이브러리, Ajax, Axios (0) | 2023.09.26 |
| #2. Vue 컴포넌트, props, event (0) | 2023.09.21 |