Vue.js 입문 수업 02 - 데이터와 메소드 https://start-vue.js-web.app

1. Vue.js 입문
데이터와 메소드
Instance options : data, methods, computed

2. 메소드
(data 옵션과 유사합니다!)
methods란 옵션 속성에 메소드들로 정의된 객체를 전달

3. <div id="app">
<h1>
반지름이 {{ radius }}cm인 둘레의 길이는 {{ circumference(radius) }}cm이고,
원의 넓이는 {{ circleArea(radius) }}cm²입니다.
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var dataOptionsObject = { radius: 10 };
var methodsOptionObject = {
circumference: function( r ){
return Math.round( 2*Math.PI*r *100)/100;
},
circleArea: function( r ){
return Math.round( Math.PI*r*r *100)/100;
}
};
var vueConfigOptions = {
el: '#app',
data: dataOptionsObject,
methods: methodsOptionObject
};
var app = new Vue( vueConfigOptions );
</script>

4. TODO 결과 화면 추가

5. 데이터와 메소드의 바인딩
데이터 옵션과 메소드 옵션은 그대로
Vue 인스턴스의 데이터와 메소드가 됩니다!

6. <div id="app">
<h1>웹 브라우저의 JS 콘솔을 열어 Vue 인스턴스를 확인하세요</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
data1: "dummy", data2: "dummy", data3: "dummy", data4: "dummy", data5: "dummy"
},
methods: {
testMethod1(){ // ES6 문법 == testMethod1: function(){
return "dummy"
},
testMethod2(){ return "dummy" }, testMethod3(){ return "dummy" },
testMethod4(){ return "dummy" }, testMethod5(){ return "dummy" }
}
});
console.log( app );
</script>

8. 메소드의 바인딩과 화살표 함수
메소드를 화살표 함수(ES6+)로 정의할 때는
lexical this 특성에 주의해야 합니다.

9. 데이터 옵션의 특징
데이터는 Vue 인스턴스에게서 감시(?!)당합니다.
데이터가 변경되면 화면을 다시 그립니다.
(Render)

10. <div id="app">
<h1>dataPropertyIsReactive = "{{ dataPropertyIsReactive }}"</h1>
<button onclick="changeData();">변해라!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: { dataPropertyIsReactive: "dummy" }
});
function changeData(){
const now = new Date();
app.dataPropertyIsReactive = now.toLocaleString();
};
</script>

11. 계산된 속성 (Computed)
메소드 수행 결과가 캐싱됩니다.
메소드 속성처럼 정의하고 데이터 속성처럼 사용합니다.

12. <div id="app">
<h1>{{ computedProperty }}</h1>
<h1>{{ computedProperty }}</h1>
<h1>{{ computedProperty }}</h1>
<button onclick="changeData();">변해라!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
computed: {
computedProperty(){
console.log("recompute?!");
return new Date();
}
}
});
function changeData(){
app.computedProperty = new Date();
};
</script>

13. TODO 결과 화면 추가

14. 그리고 계산된 속성은
메소드 내부에
데이터 옵션으로 정의된 프로퍼티를 사용하면
계산된 속성 또한 반응형이 됩니다.

15. <div id="app">
<h1>{{ computedProperty }}</h1>
<button onclick="changeData();">변해라!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
int: 10
},
computed: {
computedProperty(){
console.log("recompute?!");
return this.int + 1;
}
}
});
function changeData(){
app.int = Math.round(Math.random()*10);
};
</script>

16. TODO 결과 화면 추가