VueJs 템플릿. 외부 템플릿을로드하는 방법
저는 Vue.js를 처음 사용하고 AngularJS를 얼마 동안 사용했으며 angular에서는 다음과 같은 템플릿을로드하는 데 사용했습니다.
template: '/sometemplate.html',
controller: 'someCtrl'
이렇게 큰 HTML 템플릿을 JavaScript 내부에 보관하는 대신 Vue에서 어떻게 할 수 있습니까?
new Vue({
el: '#replace',
template: '<p>replaced</p>'
})
작은 템플릿에는 괜찮지 만 큰 템플릿의 경우 실용적입니까?
외부 템플릿 HTML을로드하거나 Vue와 같은 스크립트 태그 내에서 HTML 템플릿을 사용하는 방법이 있습니까?
<script type="x-template" id="template>HTML template goes here</html>
스크립트 태그 템플릿은 id.
{
template: '#some-id'
}
하지만, vueify (브라우저를 사용하는 경우) 또는 vue-loader (웹팩을 사용하는 경우)를 사용하여 구성 요소를 .vue이와 같은 멋진 작은 파일에 저장할 수 있도록하는 것이 좋습니다 .
또한 Vue의 작성자는 외부 템플릿 URL 주제에 대한 멋진 게시물을 작성했습니다.
https://vuejs.org/2015/10/28/why-no-template-url/
이것을 시도해 볼 수 있습니다 : https://github.com/FranckFreiburger/http-vue-loader
예:
new Vue({
components: {
'my-component': httpVueLoader('my-component.vue')
},
...
David, 좋은 예이지만 DOM이 컴파일되었는지 확인하는 가장 좋은 방법은 무엇입니까?
https://jsfiddle.net/q7xcbuxd/35/
위의 예제와 같이 비동기 작업을 시뮬레이션하면 작동합니다. 그러나 외부 페이지를 "즉시"로드하자마자 Vue는 DOM이 준비되지 않았기 때문에 불평합니다. 보다 구체적으로 : 페이지가로드되었을 때 호출하는 것보다이 작업을 수행하는 더 좋은 방법이 있습니까? 로 시도했지만 도움이되지 않았습니다.Uncaught TypeError: Cannot set property 'vue' of undefined$compile$mount
업데이트 : 신경 쓰지 마세요 . 드디어 방법을 알아 냈습니다.
Vue.component('async-component', function (resolve, reject) {
vue.$http.get('async-component.html', function(data, status, request){
var parser = new DOMParser();
var doc = parser.parseFromString(data, "text/html");
resolve({
template: doc
});
});
});
그리고 실제 템플릿에서는
<script id="someTemplate" type="text/x-template"></script>
태그와 html 만 포함되었습니다.
(이 솔루션에는 https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js 의 http 로더가 필요합니다. )
1. Vue 2.x에서는 .vue 파일을 사용하여 규칙을 고수하는 대신 가져 오기 순서를 반대로하는 것이 좋습니다.
// template.vue
<template>
<div class="helloworld">
<h1>Hello world</h1>
</div>
</template>
<script>
import src from './src'
export default src
</script>
그리고 별도의 파일에
// src.js
export default {
name: 'helloworld',
props: {},
...
}
그런 다음 구성 요소 등록에서
import helloworld from './helloworld/template.vue'
new Vue({
components: {
'helloworld': helloworld
},
...})
이렇게하면 두 세계의 장점을 모두 얻을 수 있고 문자열 내에서 템플릿을 만들지 않아도됩니다.
2. 지연로드를 원하는 경우 Vue 2.x에서 수행 할 수있는 방법이 있습니다.
new Vue({
components: {
'helloworld': () => import(/* webpackChunkName: "helloworld" */ './helloworld/template.vue')
},
...})
그러면 브라우저에서 해당 페이지의 요청에 따라 helloworld.js (모든 구성 요소의 코드가 포함됨)가로드됩니다.
물론 위의 모든 내용은 ES6 import기능을 사용하고 있다고 가정합니다.
I've tried http-vue-loader and it works fine. This library is easy to use and has good documentation and examples
Although you can't load templates from filed directly you still can keep html in separate single-file components. You can even skip <script>...</script> part.
Usage (from loader's documentation)
my-component.vue
<template>
<div class="hello">Hello {{who}}</div>
</template>
index.html
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
Both files should be placed in one folder at the same level
You can use this approach with superagent:
var promise = superagent.get("something.html")
.end(function (error, response) {
if (error) {
console.error("load of something.html failed", error));
return;
}
var parser = new DOMParser()
var doc = parser.parseFromString(response.text, "text/html");
document.body.appendChild(doc.scripts[0]);
});
Just put your <script> tag based template inside of something.html on your server.
If you are using jQuery, .load should work.
Just make sure this completes before the DOM in question is compiled by Vue. Or use $mount to manually set things up.
Use browserify to bundle everything like this:
//Home.js
import Vue from 'vue';
var Home = Vue.extend({
template: require('./Home.vue')
});
export default Home;
//Home.vue
<h1>Hello</h1>
// And for your browserify bundle use a transform called stringify
... .transform(stringify(['.html', '.svg', '.vue', '.template', '.tmpl']));
Bill Criswell이 이미 언급 한 (x- 템플릿) 중 원하는 것을 달성하는 방법은 최소 2 가지가 있지만 예제를 추가 할 가치가 있다고 생각합니다.
다음과 같이 구성 요소를 정의하십시오.
Vue.component('my-checkbox', { // id of x-template template: '#my-template' });x- 템플릿과 함께 html 파일을 추가합니다 (ID는 구성 요소에서 지정한 것과 일치해야 함).
<script type="text/x-template" id="my-template">...</script>
또 다른 접근 방식은 인라인 템플릿을 사용하는 것입니다.
다음과 같이 템플릿을 정의하십시오.
Vue.component('my-template', {});구성 요소와 템플릿이 포함 된 html 파일을 내부에 추가합니다.
<my-template inline-template>place for your html</my-template>
inline-template속성 을 추가하는 것을 잊지 마십시오 . 그렇지 않으면 작동하지 않습니다.
참고 URL : https://stackoverflow.com/questions/31633573/vuejs-templating-how-to-load-external-templates
'IT박스' 카테고리의 다른 글
| Mountain Lion에 Simulator SDK 4.3을 Xcode 4.4에 설치합니다. (0) | 2020.12.13 |
|---|---|
| RStudio 프레젠테이션 / slidify / pandoc의 2 열 레이아웃 (0) | 2020.12.13 |
| Javac : 경고를 오류로 처리 (0) | 2020.12.13 |
| JUnit 테스트 케이스에 대해 MySQL 메모리 내에서 실행하는 방법이 있습니까? (0) | 2020.12.13 |
| angularjs ui-router-앱 전체에서 전역 인 마스터 상태를 빌드하는 방법 (0) | 2020.12.13 |