Vueλ 무μμΈκ°?
MVVM ν¨ν΄μ λ·°λͺ¨λΈ(ViewModel) λ μ΄μ΄μ ν΄λΉνλ νλ©΄(View)λ¨ λΌμ΄λΈλ¬λ¦¬μ΄λ€.
View
λΈλΌμ°μ μμ μ¬μ©μμκ² λΉμ³μ§λ νλ©΄μ΄λ€.
μ λ ₯λ°μ€, λ²νΌ λ±μ΄ viewμ ν΄λΉνκ³ ,
htmlμ domμ μ΄μ©ν΄μ javascriptλ‘ μ‘°μμ ν μ μκ²λ ꡬμ±μ΄ λμ΄ μλ€.
Vue
νΉμ μ¬μ©μκ° ν€λ³΄λλ₯Ό μ λ ₯νκ±°λ λ§μ°μ€λ₯Ό ν΄λ¦νλ©΄ μ΄λ²€νΈκ° λ°μνκ² λλ€.
κ·Έ μ΄λ²€νΈλ₯Ό μ€κ°μ viewμμ dom listenersλ‘ μ²μ·¨νκ² λλ€.
κ·Έλ° μ΄λ²€νΈλ₯Όμ‘μμ javascriptμ μλ λ°μ΄ν°λ₯Ό κ°κ³ μ μ£Όκ±°λ νΉμ
μ΄ javascriptμ μ§μ νλ νΉμ λ‘μ§μμ μ€ννκ² λλ€.
κ·Έλμ javascript λ°μ΄ν°κ° λ³νμ λλ data Bindingsλ₯Ό νκ²λλλ°
λ§μ½, λ¬Έμμ΄μ΄ λ°λκ±°λ μ«μκ° λ°κΌμ λ λ°λ‘ data Bindings μ΄μ©ν΄ viewμ μ μ©ν΄ μ€λ€.
κ·Έλ¦¬κ³ μ μ½λλ₯Ό μ€ννλ©΄ μλ‘κ³ μΉ¨ νμ λ λ°λ‘ λ°μμ΄ λλ κ±Έ λ³Ό μ μλ€.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script>
var div = document.querySelector('#app');
console.log(div);
div.innerHTML = 'hello world!!!';
</script>
</body>
</html>
DATA BINDINGSμ μλ₯Ό μ΄ν΄λ³΄μ.
Object.defineProperty()
κ°μ²΄μ λμμ μ¬μ μ νλ APIμ΄λ€.
(μνλ κ°μΌλ‘ μ¬μ μ ν μ μλ€.)
Object.defineProperty() - JavaScript | MDN
The Object.defineProperty() static method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
developer.mozilla.org
<script>
Object.defineProperty(λμ κ°μ²΄, κ°μ²΄μ μμ±, {
// μ μν λ΄μ©
})
</script>μ΄λ° μμΌλ‘ μμ±νλ©΄ λλ€.
<script>
Object.defineProperty(viewModel, 'str', {
// get : μμ±μ μ κ·Όνμ λμ λμμ μ μ
get: function () {
console.log('μ κ·Ό');
},
// μμ±μ κ°μ ν λΉνμ λμ λμμ μ μ
set: function (newValue) {
console.log('ν λΉ', newValue);
}
})
</script>
μ΄λ°μμΌλ‘ μ¬μ©ν μ μλ€.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
Object.defineProperty(viewModel, 'str', {
// get : μμ±μ μ κ·Όνμ λμ λμμ μ μ
get: function () {
console.log('μ κ·Ό');
},
// μμ±μ κ°μ ν λΉνμ λμ λμμ μ μ
set: function (newValue) {
console.log('ν λΉ', newValue);
div.innerHTML = newValue
}
})
</script>
</body>
</html>
μ½μμ°½μ κ°μ μ λ ₯ν λλ§λ€ appλΆλΆμ κ°μ΄ λ³κ²½λλ κ±Έ λ³Ό μ μλ€.
Reactivity μ½λ λΌμ΄λΈλ¬λ¦¬ν νκΈ°
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
// μ¦μ μ€νν¨μ
(function () {
function init() {
Object.defineProperty(viewModel, 'str', {
// get : μμ±μ μ κ·Όνμ λμ λμμ μ μ
get: function () {
console.log('μ κ·Ό');
},
// μμ±μ κ°μ ν λΉνμ λμ λμμ μ μ
set: function (newValue) {
console.log('ν λΉ', newValue);
render(newValue);
}
})
}
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
</body>
</html>
λ·° κ°λ°μ λꡬ
κ°λ°μ λꡬ > vue ν΄λ¦
data > message μ κ°μ μ λ ₯νλ©΄ νμ΄μ§μμλ λ³νλ κ±Έ λ³Ό μ μλ€.
Visual Studio κΏν!
div#app λ£κ³ μν°λ₯Ό λλ₯΄λ©΄
μλμΌλ‘ μμ±μ΄ λλ€.
'π΅πππππππ > π ππ.ππ' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [Vue.js] νλ‘κ·Έλ¨ μ€μΉ / Visual Studio νλ¬κ·ΈμΈ μ€μΉ (0) | 2023.06.25 |
|---|
