반응형
render 함수 란?
-render 함수의 역할 : render 함수는template와 마찬가지로 html 템플릿을 만들지만
일부 장면에서 template로 실현하면 코드가 지루하고 번거로우며 대량으로 중복되기 때문에 이때 render 함수를 사용한다.
- render 방법의 실질은template 템플릿을 생성하는 것이다.
- 하나의 방법을 호출하여 생성하고 이 방법은render 방법의 매개 변수를 통해 전달한다.
- 이 방법은 세 가지 파라미터가 있는데 각각 라벨 이름, 라벨 관련 속성, 라벨 내부의 html 내용을 제공한다.
- 이 세 가지 파라미터를 통해 완전한 템플릿을 생성할 수 있다
- vue는 가상 DOM이기 때문에template 템플릿을 받을 때도 VNode 함수로 번역하고
render 함수로 DOM을 구축하면 vue는 번역 과정을 면한다.
- render 함수를 사용하여 가상 DOM을 설명할 때, vue는 함수를 제공합니다.
- 이 함수는 가상 DOM을 구축하는 데 필요한 도구입니다.
홈페이지에 그의 이름이create Element이라고 지어졌다.그리고 약속의 약자는 h라고 한다.
<App.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">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 인스턴스 영역 -->
<!-- <p>{{message}}</p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
message: 'hello vue ㅎㅎ'
},
// template: '<p>{{message}}</p>',
render: function(ctrateElement){
// return ctrateElement('태그 이름', '태그 속성', '하위태그 내용');
// return ctrateElement('p', 'message', 'hello vue');
return ctrateElement('p', this.message);
}
});
</script>
</body>
</html>
<main.js>
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 1
render: function(createElement){
return createElement(App);
}
// 2. h -> Virtual DOM (가상 돔) 을 지칭하는 용어
render: function (h) {
return h(App);
}
// 3.
render : h => h(App);
}).$mount('#app')반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 78. Netlify를 이용한 배포 실습 (0) | 2022.10.02 |
|---|---|
| 77. 서비스 배포를 위한 명령어 소개 및 실습 | CLI로 생성한 프로젝트 배포하기 (0) | 2022.10.02 |
| 75. 컴포넌트 디자인 패턴 (common, slot, Controlled, Renderless ) (0) | 2022.08.15 |
| 74. refs 속성 (0) | 2022.08.13 |
| 73. chart.js 라이브러리 사용 (0) | 2022.08.13 |