web-dev-qa-db-fra.com

Comment charger un fichier HTML externe dans un modèle dans VueJs

Je suis nouveau à la vue js. Je crée juste un projet simple dans lequel je viens d’ajouter vuejs via CDN. ne pas utiliser node/npm ou cli.

Je garde tout mon balisage HTML en HTML simple, qui a l'air malpropre à mesure qu'il grandit. J'ai essayé de scinder le html en vues et je voulais l'inclure avec quelque chose d'analogue à ng-include of angularJs

J'ai travaillé précédemment dans angular où il y a ng-include pour charger des fichiers HTML externes. Je cherche quelque chose de semblable à cela en vue. le but est de scinder mes fichiers html en plusieurs fichiers distincts maintenables. 

ont rencontré <template src="./myfile.html"/> mais cela ne fonctionne pas Quelqu'un peut-il m'aider? 

vue.jsvuejs2vue-componentvue-router
8
Khaleel

Vous ne pouvez pas. Vous devez utiliser des composants asynchrones - lisez le guide ici

2
user6748331

C'est en fait remarquablement facile, mais vous devez garder quelque chose à l'esprit. Dans les coulisses, Vue convertit votre balise de modèle HTML en code. Autrement dit, chaque élément défini en HTML est converti en une directive javascript pour créer un élément. Le gabarit est pratique, vous ne pouvez donc pas utiliser le composant à fichier unique (fichier vue) sans compiler avec quelque chose comme webpack. Au lieu de cela, vous devrez utiliser un autre moyen de créer des modèles. Heureusement, il existe d'autres moyens de définir des modèles qui ne nécessitent pas de pré-compilation et qui sont utilisables dans ce scénario.

1 - littéraux chaîne/modèle

exemple: template: '<div>{{myvar}}</div>'

2 - fonction de rendu ????

exemple: render(create){create('div')}

Vue a plusieurs autres façons de créer des modèles, mais ils ne correspondent tout simplement pas aux critères.

voici l'exemple pour les deux:

AddItem.js - utilisation du rendu ???? les fonctions

'use strict';
Vue.component('add-item', {
  methods: {
    add() {
      this.$emit('add', this.value);
      this.value = ''
    }
  },

  data () {
    return {
      value: ''
    }
  },

  render(createElement) {
    var self = this
    return createElement('div', [
      createElement('input', {
        attrs: {
          type: 'text',
          placeholder: 'new Item'
        },
        // v-model functionality has to be implemented manually
        domProps: {
          value: self.value
        },
        on: {
          input: function (event) {
            self.value = event.target.value
            // self.$emit('input', event.target.value)
          }
        }
      }),
      createElement('input', {
        attrs: {
          type: 'submit',
          value: 'add'
        },
        on: {
          click: this.add
        }
      }),
    ])
  }
});

ListItem.js - utilisation de littéraux de modèle (ticks arrière)

'use strict';
Vue.component('list-item', {
  template: `<div class="checkbox-wrapper" @click="check">
    <h1>{{checked ? '☑' : '☐'}} {{ title }}</h1>
  </div>`,
  props: [
    'title',
    'checked'
  ],
  methods: {
    check() {
      this.$emit('change', !this.checked);
    }
  }
});

et le html 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
  <script src="ListItem.js"></script>
  <script src="AddItem.js"></script>
</head>
<body>
<div id="app">
  <add-item @add='list.Push({title:arguments[0], checked: false})'></add-item>
  <list-item v-for="(l, i) in list" :key="i" :title="l.title" :checked="l.checked" @change="l.checked=arguments[0]"></list-item>
</div>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {
    newTitle: '',
    list: [
      { title: 'A', checked: true },
      { title: 'B', checked: true },
      { title: 'C', checked: true }
    ]
  }
});
</script>
</body>
</html>


TL; DR;

Voir en action à: https://repl.it/OEMt/9

2
Daniel

ng-include était vraiment génial pour le chargement des modèles pour le routeur. Une alternative consiste à utiliser fetch et à mettre en œuvre votre propre promesse.

0
domih