vue.js 스크립트 코드
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<개발자 도구에서 vue 들어가면 이렇게 뜸>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: "hello vue.js"
}
});
</script>
</body>
</html>뷰로 개발할때 필수로 생성해야 하는 코드가 인스턴스★
new Vue();이렇게 생성. 생성하고 나면 변수안에 인스턴스 담을수있음
var vm = new Vue();
이게바로 뷰에서 제공하는 API(기능)와 속성이다 ↑
<인스턴스>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
//인스턴스
//body에서 app이라는 애를 찾아서 인스턴스에 붙이겠다.
//그래야 뷰의 기능과 속성들이 유효해 집니다.
//엘리먼트가 없다면 데이터를 정의를 아무래해도 데이터를 사용할수없다.
//일리먼트 지정 -> 인스턴스를 특정태그에 붙여야(el: '#app'). 뷰 사용 가능
var vm = new Vue({
el: '#app',
data: {
message: "안녕"
}
});
</script>
</body>
</html><생성자 함수>
기본적으로 자바스크립트에서 함수를 이용하여 인스턴스를 생성하는 방법은 바로 생성자함수를 이용하는것
함수 이름 앞이 대문자로 시작하면 암묵적으로 동의한 생성자 함수를 의미한다.
왜 인스턴스를 생성해서 사용할까?
객체를 생성하는게 생성자함수의 객체생성 패턴.
왜 Vue를 생성자 함수로 찍어내는지, Vue 관점에서 보자.
생성자 함수를 이용해서 logText 라는 속성의 함수를 넣어놨다.
내가 vm(변수) 으로 객체를 생성할때 마다, 객체 안에는 내가 미리 정의한 logText 함수가 들어가있다.
따라서 매번 함수를 정의하는게 아니라 미리 정의된 함수를 가져다 사용할수잇다.
이렇기때문에 생성자 함수로 vue에서 API(기능)과 속성을 정의해놓고 우리는 갖다쓰거나 재사용하게 되는 패턴을 갖는것 이다.
이게바로 뷰를 사용하는 이유. !
<참고 ↓>
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
Function - JavaScript | MDN
Function 생성자는 새 Function 객체를 만듭니다. 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있습니
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