La diferencia entre template y el in vue y el proceso de extraer la plantilla paso a paso en componentes vue

Directorio de artículos

1. Introducción

Queremos integrar Vue en el entorno del paquete web, por lo que debemos tener dependencias en él, por lo que debemos instalarlo primero

Debido a que también usaremos vue en proyectos reales en el futuro, no dependemos del desarrollo, debemos usarlo --save, no--save-dev
instalación: npm install vue --save

Estructura de directorio de código, el código de demostración de este blog tiene un enlace de descarga en la parte inferior de la página (～￣ ▽ ￣) ～
Inserte la descripción de la imagen aquí

2. Demostración de código

2.1 La relación entre el y template

archivo 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>

archivo main.js

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

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

Después del funcionamiento normal, consideremos otra pregunta:

Si queremos mostrar los datos en datos en la interfaz, debemos modificar index.html
Si personalizamos el componente más tarde, también debemos modificar index.html para usar el componente
Pero en el futuro desarrollo de la plantilla html, no quiero modificarla manualmente con frecuencia. ¿Se puede hacer?

templateAtributos definidos :

Vue en ejemplos anteriores, definimos los elatributos para el index.html y #appdespués del enlace, para que la instancia de Vue pueda administrar el contenido del que
Aquí, podemos eliminar el contenido del elemento div en el archivo index.html, dejando solo un elemento div básico con la identificación de la aplicación
Pero si aún quiero mostrar el contenido de { {message}}, ¿qué debo hacer?
Podemos definir otro atributo de plantilla, el código es el siguiente:

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

Vuelva a empaquetar, ejecute el programa y muestre el mismo resultado y la misma estructura de código HTML que antes.

Entonces, ¿cuál es la relación entre el y template?

el se usa para especificar el DOM que será administrado por Vue, lo que puede ayudar a analizar las instrucciones, el monitoreo de eventos, etc.
Y si la plantilla también se especifica en la instancia de Vue, el contenido de la plantilla reemplazará la plantilla el correspondiente montada.

Como se muestra en la animación a continuación: el contenido de la plantilla de plantilla reemplazará la plantilla montada correspondiente a el

Inserte la descripción de la imagen aquí
¿Cuáles son los beneficios de hacer esto? La respuesta es: después de hacer esto, no es necesario que vuelva a manipular index.html en el desarrollo futuro, simplemente escriba las etiquetas correspondientes en la plantilla.

2.2 Mayor optimización de la extracción

Para el código anterior, es muy problemático escribir el módulo de plantilla, ¿qué debo hacer?

Usando la idea de la componentización, podemos extraer el contenido de la plantilla.

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 Extraer en el archivo js nuevamente

También podemos extraer el siguiente código en un archivo js y exportarlo.

Crea un archivo app.js

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

Luego introdúzcalo en el archivo 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 Continuar con la extracción en archivos .vue

Pero en el código anterior, es muy inconveniente organizar y usar un componente en forma de objeto js

Por un lado, escribir el módulo de plantilla es muy complicado
Por otro lado, si hay un estilo, ¿dónde deberíamos escribirlo?

Ahora, tenemos una nueva forma de organizar los componentes de un vue: crear un App.vuearchivo
Inserte la descripción de la imagen aquí
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>

Importar en el archivo 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
  }
})

Reempaquetado e informado de un error. Sugerencia Necesitamos un cargador adecuado para manejar los .vuearchivos
Inserte la descripción de la imagen aquí
instalados vue-loaderyvue-template-compiler

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

vue-loader es un cargador de paquetes web, que le permite escribir componentes de Vue en un formato llamado Componentes de archivo único (SFC).
vue-template-compiler compila archivos vue

Configuración

// webpack.config.js

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

Encontré un error nuevamente después de reempaquetar: bríndenos con vue-loader y necesitamos un complemento para trabajar con él.
Inserte la descripción de la imagen aquí
Razón: La versión de vue-loader que instalé es 15.9.6, y el sitio web oficial de vue escribió: Vue Loader v15 ahora necesita un complemento de paquete web para usarlo correctamente . La configuración de Vue Loader es diferente a la de otros cargadores. Además de aplicar vue-loader a todos los archivos con una extensión .vue a través de una regla, asegúrese de agregar el complemento Vue Loader en la configuración del paquete web VueLoaderPlugin.

¡Este complemento es imprescindible! Su responsabilidad es copiar y aplicar otras reglas que haya definido a los bloques de idioma correspondientes en el archivo .vue. Por ejemplo, si tenemos una /\.js$/regla de coincidencia , se aplica a los .vuedocumentos del <script>bloque.

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

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

¡Reempaque, normal!

2.5 Cómo omitir el sufijo al importar archivos vue

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

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

3. Alguna información

sitio web oficial de vue | que es vue-loader

sitio web oficial vue | introducción de el y plantilla

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

Enlace de descarga del código de demostración: https://webchang.lanzous.com/i9bBNkgdnre Contraseña: 34bq