La différence entre template et el in vue & le processus d'extraction du template étape par étape dans les composants vue

Répertoire d'articles

1. Introduction

Nous voulons intégrer Vue dans l'environnement webpack, nous devons donc avoir des dépendances dessus, nous devons donc l'installer d'abord

Parce que nous utiliserons également vue dans des projets réels à l'avenir, nous ne sommes pas dépendants du développement, nous devrions l'utiliser --save, pas--save-dev
installation: npm install vue --save

Structure du répertoire de code, le code de démonstration de ce blog a un lien de téléchargement en bas de page (～￣ ▽ ￣) ～
Insérez la description de l'image ici

2. Démo de code

2.1 La relation entre el et template

fichier index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>

<div id="app">
  <h2>{
   
   {message}}</h2>
  <button @click="btnClick">按钮</button>
</div>

</body>
<script src="./dist/bundle.js"></script>
</html>

fichier main.js

//使用vue进行开发
import Vue from 'vue'

let app = new Vue({
    
    
  el: '#app',
  data:{
    
    
    message:'hello world'
  },
  methods:{
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }
})

Après un fonctionnement normal, considérons une autre question:

Si nous voulons afficher les données en data dans l'interface, nous devons modifier index.html
Si nous personnalisons le composant ultérieurement, nous devons également modifier index.html pour utiliser le composant
Mais dans le cadre du développement futur du modèle html, je ne souhaite pas le modifier manuellement fréquemment, est-ce possible?

templateAttributs définis :

Vue dans les exemples précédents, nous définissons les elattributs pour l'index.html et #appaprès la liaison, afin que l'instance Vue puisse gérer le contenu dont elle
Ici, nous pouvons supprimer le contenu de l'élément div dans le fichier index.html, en ne laissant qu'un élément div de base avec l'identifiant de l'application
Mais si je souhaite toujours afficher le contenu de { {message}}, que dois-je faire?
Nous pouvons définir un autre attribut de modèle, le code est le suivant:

let app = new Vue({
    
    
  el: '#app',
  template: `
    <div>
      <h2>{
     
     {message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `,
  data: {
    
    
    message: 'hello world'
  },
  methods: {
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }
})

Remballez, exécutez le programme et affichez le même résultat et la même structure de code HTML qu'auparavant.

Alors, quelle est la relation entre el et template?

el est utilisé pour spécifier le DOM à gérer par Vue, ce qui peut aider à analyser les instructions, la surveillance des événements, etc.
Et si le modèle est également spécifié dans l'instance Vue, le contenu du modèle de modèle remplacera le modèle el correspondant monté.

Comme le montre l'animation ci-dessous: le contenu du modèle de modèle remplacera le modèle monté correspondant à el

Insérez la description de l'image ici
Quels sont les avantages de faire cela? La réponse est la suivante: après cela, nous n’avons pas besoin de manipuler à nouveau index.html lors du développement futur, il suffit d’écrire les balises correspondantes dans le modèle.

2.2 Optimisation supplémentaire de l'extraction

Pour le code ci-dessus, il est très gênant d'écrire le module de modèle, que dois-je faire?

En utilisant l'idée de la composantisation, nous pouvons extraire le contenu dans le modèle.

main.js

//使用vue进行开发
import Vue from 'vue'

// 1.抽离出一个组件
let App = {
    
    
  template: `
    <div>
      <h2>{
     
     {message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `,
  data() {
    
    
    return {
    
    
      message: 'hello world'
    }
  },
  methods: {
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }
}

let app = new Vue({
    
    
  el: '#app',
  template: '<App></App>', // 3.使用
  components:{
    
     // 2.在Vue根实例中进行注册
    App
  }
})

2.3 Extraire à nouveau dans le fichier js

Nous pouvons également extraire le code suivant dans un fichier js et l'exporter.

Créer un fichier app.js

export default {
    
    
  template: `
    <div>
      <h2>{
     
     {message}}</h2>
      <button @click="btnClick">按钮</button>
    </div>
  `,
  data() {
    
    
    return {
    
    
      message: 'hello world'
    }
  },
  methods: {
    
    
    btnClick() {
    
    
      console.log('---');
    }
  }

Puis introduisez-le dans le fichier main.js

//使用vue进行开发
import Vue from 'vue'

import App from './vue/app'

let app = new Vue({
    
    
  el: '#app',
  template: '<App></App>',
  components:{
    
    
    App
  }
})

2.4 Continuer à extraire dans des fichiers .vue

Mais dans le code ci-dessus, il est très peu pratique d'organiser et d'utiliser un composant sous la forme d'un objet js

D'une part, l'écriture du module template est très gênante
Par contre, s'il y a un style, où doit-on l'écrire?

Maintenant, nous avons une nouvelle façon d'organiser les composants d'une vue: Créer un App.vuefichier
Insérez la description de l'image ici
App.vue file

<template>
  <div>
    <h2 class="title">{
    
    {
    
    message}}</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
  export default {
    
    
    name: "App",
    data() {
    
    
      return {
    
    
        message: 'hello world'
      }
    },
    methods: {
    
    
      btnClick() {
    
    
        console.log('---');
      }
    }
  }
</script>

<style scoped>
  .title {
    
    
    color: red;
  }
</style>

Importer dans le fichier main.js

import Vue from 'vue'

// import App from './vue/app'
import App from './vue/App.vue' //注意需要加 .vue 后缀

let app = new Vue({
    
    
  el: '#app',
  template: '<App></App>',
  components:{
    
    
    App
  }
})

Reconditionné et signalé une erreur. Astuce Nous avons besoin d'un chargeur approprié pour gérer les .vuefichiers
Insérez la description de l'image ici
installés vue-loaderetvue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

vue-loader est un chargeur Webpack, qui vous permet d'écrire des composants Vue dans un format appelé Single File Components (SFC).
vue-template-compiler compile les fichiers vue

Configuration

// webpack.config.js

module.exports = {
    
    
  module: {
    
    
    rules: [
      // ... 其它规则
      {
    
    
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

J'ai encore trouvé une erreur après le reconditionnement: fournissez-nous vue-loader et nous avons besoin d'un plug-in pour travailler avec lui.
Insérez la description de l'image ici
Raison: La version de vue-loader que j'ai installée est 15.9.6, et le site officiel de vue a écrit: Vue Loader La v15 a maintenant besoin d'un plug-in webpack pour l'utiliser correctement . La configuration de Vue Loader est différente des autres chargeurs. En plus d'appliquer vue-loader à tous les fichiers avec une extension .vue via une règle, assurez-vous d'ajouter le plugin Vue Loader dans la configuration du webpack VueLoaderPlugin.

Ce plugin est un must! Sa responsabilité est de copier et d'appliquer les autres règles que vous avez définies aux blocs de langue correspondants dans le fichier .vue. Par exemple, si nous avons une /\.js$/règle de correspondance , elle s'applique aux .vuedocuments du <script>bloc.

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    
    
  // ...
  
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
  ]
}

Remballez, normal!

2.5 Comment omettre le suffixe lors de l'importation de fichiers vue

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    
    
  // ...
  
 resolve: {
    
    
    extensions:['.js','.vue','.css'] //加一条配置
  }
}

3. Quelques informations

vue site officiel | qu'est-ce que vue-loader

vue site officiel | introduction de el et modèle

https://www.cnblogs.com/vickylinj/p/10941112.html

Lien de téléchargement du code de démonstration: https://webchang.lanzous.com/i9bBNkgdnre Mot de passe: 34bq