반응형
DOM에 삽입할 때 Vue 컴파일
컴파일된 요소를DOM그러나 그것은 문서와 같이 미리 정의된 위치가 아닌 임의의 장소에 삽입될 것이다...
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
모든 접근 방법V-for,V-if/show사전 정의된 요소도 필요하기 때문에 작동하지 않는다.
이런 걸 해봤는데...
document.getElementById('elPai').insertAdjacentHTML('beforeend', Vue.compile('<div><span>{{ msg }}</span></div>'));
'렌더'와 'StaticRenderFns'를 포함하는 개체를 반환하지만, 이러한 개체에 대해 컴파일된 결과를 찾지 못했기 때문에, 'DOM'에서 요소가 사전 정의되었을 때 트리거되는 'Promisse'에 기록되어 있는 것으로 보인다.
마지막으로, 'Vue 2'로 컴파일된 요소를 DOM에 삽입하는 방법이 있는가?
이것을 사용해 보십시오.
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
new MyComponent().$mount('#app')
예: https://vuejs.org/v2/api/#vm-mount
거의 맞췄지만 장착할 때는 (@Wszerad의 대답에서처럼) 다음을 사용한다.
console.clear();
var res = Vue.compile('<div><span>{{ msg }}</span></div>');
console.log(res);
var vm = new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
});
vm.$mount('#app')<script src="https://unpkg.com/vue@2.5.5/dist/vue.js"></script>
<body>
<div id="app"></div>
</body>참조URL: https://stackoverflow.com/questions/47392337/vue-compile-when-inserting-in-dom
반응형
'IT이야기' 카테고리의 다른 글
| Vue.js에서 v-on과 같은 사용자 지정 지시어를 생성하는 방법 (0) | 2022.04.12 |
|---|---|
| Vue에 제공된 Vuex에서 인스턴스/서비스에 액세스(Vue.js 3) (0) | 2022.04.12 |
| Vuex의 개체 어레이에 v-bind 사용 (0) | 2022.04.12 |
| vuejs에서 라디오 버튼을 기본적으로 선택하도록 하는 방법? (0) | 2022.04.12 |
| 데이터를 최신 상태로 유지하기 위해 Vuex를 통해 API에서 데이터를 다시 가져오는 시기 (0) | 2022.04.12 |