VueJs templating. Como carregar modelos externos

Sou novo no Vue.js, usei o AngularJS por algum tempo e, em termos angulares, costumávamos carregar modelos como

template: '/sometemplate.html', controller: 'someCtrl' 

Como podemos fazer uma coisa dessas no Vue, em vez de manter grandes modelos HTML dentro do JavaScript,

 new Vue({ el: '#replace', template: '

replaced

' })

Isso é bom para modelos pequenos, mas para modelos grandes isso é prático?

Existe uma maneira de carregar HTML de modelo externo ou usar um modelo HTML dentro de uma tag de script como no Vue?

 HTML template goes here 

Você pode usar o modelo de tag de script apenas referindo-se ao seu id .

 { template: '#some-id' } 

No entanto, eu recomendo usar o vueify (se você usar o browserify) ou o vue-loader (se você usar o webpack) para que você possa ter seus componentes armazenados em pequenos arquivos .vue como este.

arquivo vue

Além disso, o autor do Vue escreveu uma boa postagem sobre o tópico de URLs de modelos externos:

http://vuejs.org/2015/10/28/why-no-template-url/

David, esse é um bom exemplo, mas qual é a melhor maneira de garantir que o DOM seja compilado?

https://jsfiddle.net/q7xcbuxd/35/

Quando eu simular uma operação assíncrona, como no exemplo acima, funciona. Mas assim que eu carrego uma página externa “on the fly”, o Vue reclama porque o DOM não está pronto. Mais especificamente: Uncaught TypeError: Cannot set property ' vue ' of undefined Existe uma maneira melhor de fazer isso do que chamar $compile quando a página é carregada? Eu tentei com $mount , mas isso não ajudou.

ATUALIZAÇÃO: Não importa, eu finalmente descobri como fazer isso:

 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 }); }); }); 

E no modelo real, eu removi o

  

tags e só incluiu o html.

(Esta solução requer o carregador http de https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js )

Você pode tentar isso: https://github.com/FranckFreiburger/http-vue-loader

Exemplo:

  new Vue({ components: { 'my-component': httpVueLoader('my-component.vue') }, ... 

Você pode usar essa abordagem com superagente:

 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]); }); 

Basta colocar seu modelo baseado em tag dentro de something.html em seu servidor.

Se você estiver usando o jQuery, o .load deve funcionar.

Apenas certifique-se de que isso seja concluído antes que o DOM em questão seja compilado pelo Vue. Ou use $ mount para configurar manualmente as coisas.

Use o browserify para agrupar tudo assim:

 //Home.js import Vue from 'vue'; var Home = Vue.extend({ template: require('./Home.vue') }); export default Home; //Home.vue 

Hello

// And for your browserify bundle use a transform called stringify ... .transform(stringify(['.html', '.svg', '.vue', '.template', '.tmpl']));