Vue로 화면을 개발하기 위해서는 Vue Instance는 꼭 생성해야 한다.
아래 와 같은 방법으로 Instance를 생성 할 수 있다.
<script>
let vm = new Vue({
// instance options
}
});
</script>new Vue 생성자 함수를 이용하여 인스턴스를 생성하면 root vue instance를 생성 할 수 있다. Root를 parent 클래스라고 생각하면 될거 같다. component 통신 방법에서 this를 사용 해보면 이해가 조금 더 잘된다.
Instance properties (인스턴스 속성)
아래와 같이 el, template, components, methods, data 등의 인스턴스 옵션 속성을 포함 할 수 있다.
<script>
<div id="app"></div>
new Vue({
el : '#app',
methods: {
increaseNumber : function(){
this.num++;
}
},
data: {
message: 'hello vuejs',
num : 10,
},
props:['propsdata'],
computed: {
doubleNum: function(){
return this.num *2;
}
},
watch : {}
...
</script>
});el (HTMLElement) : 화면에 그려지는 시작점
methods : 이벤드 함수, this를 인스턴스에 바인딩
data : View에 무언가를 보여주기 위해 정의
props : 부모 컴포넌트로부터 전달 받은 속성
computed : 계산된 속성
watch : data에서 정의한 속성이 변경 되는 시점에 호출
computed 속성
아래 코드에서는 data 값의 변화에 따라 computed 속성 값들도 같이 변화는 것을 확인 할 수 있기 때문에 validation, text, 연산 쪽에 사용하는게 좋을거 같다.
<body>
<div id="app">
<p>{{num}}</p>
<p>{{ doubleNum }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:10,
apple: 2,
},
//계산된 속성. data 값의 변화에 같이 변화는
computed:{
doubleNum : function(){
return this.num * 2;
},
tripleApple : function(){
return this.apple *3
}
}
});
</script>
</body>watch 속성
아래 예제 코드로 watch 의 기능을 확인 할 수 있다. watch는 data 값으 변화에 따라 특정 로직을 실행하며 watch는 데이터 요청시 사용성이 적합하다.
<body>
<div id="app">
<p>{{num}}</p>
<button v-on:click="increase">increase</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
num:10,
apple: 2,
},
computed:{
doubleNum : function(){
return this.num * 2;
},
tripleApple : function(){
return this.apple *3
}
},
watch:{
num: function(newValue, oldValue){
this.fetUserByNumber(newValue);
}
},
methods:{
fetUserByNumber: function(num){
axios.get(num);
}
}
});
</script>
</body>reference : Vue document , Vue.js 시작하기 인프런 강의
Jiujitsu_coder