Vue es súper detallado desde la entrada hasta los cursos de dominio.

Vue2.0

1. Conoce Vue

1. Fundador e historia de desarrollo

EvanTú

chino americano

Fundador de Vue Technology LLC

Escuela secundaria: escuela secundaria afiliada a la Universidad de Fudan, Shanghái

Universidad: Universidad Colgate, Nueva York

ruta de desarrollo

1. febrero 2014

You Yuxi abrió una biblioteca de desarrollo front-end Vue.js. Vue.js es una biblioteca de JavaScript para crear interfaces web y un sistema que proporciona un enlace de datos eficiente y componentes flexibles a través de una API concisa.

2. septiembre 2016

En la JSConf en Nanjing, You Yuxi anunció oficialmente que se unirá al equipo de Alibaba Weex como consultor técnico para integrar Vue y el tiempo de ejecución de JavaScript de Weex. El objetivo es permitir que todos usen la sintaxis de Vue en tres terminales.

abril 2020

Lanzamiento de prueba de la versión Vue3.0beta.

2. ¿Qué es Vue?

Vue.js es un marco JS de front-end, liviano y basado en datos que proporciona enlaces de datos eficientes y sistemas de componentes flexibles a través de una API concisa .

3. ¿Cuáles son las ventajas técnicas en comparación con Jquery?

Antiguo: Jquery

Manipular elementos DOM

jQuery usa un selector ($) para seleccionar objetos DOM y realiza operaciones como asignación, recuperación de valores y enlace de eventos en ellos. De hecho, la diferencia con el HTML nativo es que los objetos DOM se pueden seleccionar y manipular de manera más conveniente, mientras que los datos y las interfaces están juntas

Las páginas complejas son costosas de mantener

jquery necesita obtener el nodo del elemento dom y agregar una etiqueta al dom.Si la estructura dom es particularmente complicada, o los elementos agregados son muy complicados, el código se volverá muy complicado y la legibilidad será baja.

Difícil de lograr páginas en componentes

La mayor parte del código en la era JQuery es código fideo, y el acoplamiento es serio

pérdida de rendimiento

Consumo de recursos del navegador

Nuevo: Vue.js

Separación de datos y vistas

Vue separa completamente los datos y la vista a través de los objetos de Vue. Ya no es necesario hacer referencia al objeto DOM correspondiente para operar sobre los datos, se puede decir que los datos y la Vista están separados, y están vinculados entre sí a través de la vm del objeto Vue. Este es el legendario MVVM.

Enlace bidireccional de datos

Esta es la mayor ventaja de vue.js. El enlace bidireccional de datos se realiza a través de la idea de MVVM, de modo que los desarrolladores ya no necesitan operar objetos DOM y tienen más tiempo para pensar en la lógica comercial.

Componentización flexible

Vue.js divide varios módulos en una aplicación de una sola página en componentes individuales a través de componentes. Solo necesitamos escribir primero varias etiquetas de componentes en la aplicación principal y escribir los componentes que se pasarán en las etiquetas de componentes. Ingrese los parámetros de los componentes , y luego escriba la implementación de varios componentes por separado, y luego se completará toda la aplicación.

DOM virtual, corre más rápido

El DOM virtual es un tipo de cálculo que se puede realizar a través de JavaScript por adelantado para calcular y optimizar la operación DOM final. Dado que esta operación DOM es una operación de preprocesamiento y en realidad no opera el DOM, se denomina DOM virtual.

4. Disposición de puntos técnicos

5. Aprende los puntos de conocimiento que necesitas dominar

marco ligero

Puede realizar un seguimiento automático de las expresiones de plantilla dependientes y las propiedades calculadas, proporciona enlace de datos MVVM y un sistema de componentes componibles, y tiene una API simple y flexible, lo que facilita que los lectores comprendan y comiencen más rápido.

enlace de datos bidireccional

La representación declarativa es la realización principal del enlace de datos bidireccional y también es el núcleo de Vue.js, que permite la integración de la representación declarativa de datos en DOM con una sintaxis de plantilla concisa.

enrutamiento del cliente

Vue-router es el complemento de enrutamiento oficial de Vue.js, que está profundamente integrado con Vue.js y se utiliza para crear aplicaciones de una sola página. Las aplicaciones de una sola página de Vue se basan en enrutamiento y componentes. El enrutamiento se utiliza para establecer rutas de acceso y mapear rutas y componentes.

instrucción

Vue.js interactúa con la página principalmente a través de instrucciones integradas. La función de la instrucción es aplicar ciertos comportamientos al DOM en consecuencia cuando cambia el valor de su expresión.

Componentización

Se puede hacer referencia en cualquier momento, y se pueden realizar diferentes páginas pasando parámetros, que pueden ser referenciados por niños y padres.

administración del Estado

La administración de estado es en realidad un flujo de datos unidireccional. El estado impulsa la representación de la vista, y el usuario opera la vista para generar una acción, lo que hace que el estado cambie, de modo que la vista se vuelve a representar para formar una vista separada. componente.

2. Construya el proyecto Vue2.0

1. Npm, entorno de nodo cnpm para construir andamios vue

1. Instale el entorno node.js

1. Ingresa al sitio web oficial

https://nodejs.org/en/

2. Instale msi, instale el directorio en la unidad C

Después de la instalación, use cmd para ejecutar node-v npm -v para ver si se muestra el número de versión

3. Cree una carpeta nodejsFile además de la unidad C, cree dos carpetas node_global y node_cache y luego ejecute el siguiente comando

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

4. Verifique si la ruta de la ruta se llama C:\ProgramFiles\nodejs\node_modules en las variables del sistema actual

Si la hay, cree una letra de unidad con la carpeta de ruta del mismo nombre fuera de la unidad C, si no, no se preocupe.

5. Configure su ruta C:\Program Files\nodejs\node_modules en la variable de ruta

2. Instale el espejo Taobao cnpm

Función: igual que npm, npm se descarga del almacén espejo en el extranjero, cnmp se descarga del almacén espejo Ali Taobao

npm install -g cnpm --registry=https://registry.npm.taobao.org

Una vez completada la instalación, use: cnpm -v para ver la versión

3. Instalar paquete web

npm install webpack -g

Una vez completada la instalación, use: npm webpack -v para ver la versión

4. Descargar andamios vue

1. Descargar recursos de andamiaje

cnpm install -g [email protected]

2. Vaya a su directorio gloab para ver si hay archivos que comienzan con vue

3. Cree una carpeta vacía debajo de otra carpeta, presione y mantenga presionado shift + botón derecho del mouse en la carpeta, haga clic aquí para abrir la ventana de pwershell

4. Abra la ventana e ingrese: vue init webpack

5. Inicializar y construir andamios vue

6. Ejecute el proyecto vue

Mantenga presionado shift + botón derecho del mouse en el directorio raíz del proyecto, haga clic aquí para abrir la ventana de pwershell y ejecute npm run dev

3. Use VSCode para construir el proyecto Vue

Descargar VsCode

https://code.visualstudio.com/

Descarga de componentes

Crear un proyecto vue

1. Crear una carpeta de proyecto vacía
2. Abra esta carpeta con vsCode
3. Establecer el idioma de vsCode: ctrl+shift+P Comando de entrada: Mostrar idioma, primero seleccione inglés para reiniciar, luego seleccione chino y luego reinicie.
4. terminal abierta

vue init webpack

Aparecerá un error: no promete. . . . La consola de terminal vsCode no tiene permisos de escritura del sistema

Use la ventana cmd que viene con esta máquina para comenzar con privilegios de administrador

Salta el directorio a la ruta del proyecto y ejecuta el comando vue init webpack

5. Iniciar el proyecto

npm ejecutar dev

6. Deja de correr

ctrl+c

4. Escriba el primer archivo vue

<!-- Dom页面 -->
<template>
	<!-- 所有的页面元素都要卸载div之内 -->
  <div id='UserIndex'>
    
  </div>
</template>

<!-- 组件js -->
<script>
export default {
    name:'UserIndex',
    data(){

    }
}
</script>

<!-- CSS代码 -->
<style scoped>

</style>

Cree un fragmento de código personalizado con VSCode

Archivo – "Preferencias - "Configurar fragmentos de código de usuario

{
    
    
	"Print to console": {
    
    
		"prefix": "myvue",// 代码段名称
		"body": [ //代码内容
			"<!-- Dom页面 -->",
			"<template>",
			"<div id=''>",
			"",
			"</div>",
			"</template>",
			"",
			"<!-- 组件js -->",
			"<script>",
			"export default {",
			"name:'',",
				"data(){",
				"",
				"}",
			"}",
			"</script>",
			"",
			"<!-- CSS代码 -->",
			"<style scoped>",
			"",
			"</style>"
		],
		"description": "myvue"
	}
}

5. Archivo App.vue

Función: la página de inicio del proyecto vue, puede escribir el estilo público en el proyecto global

Nota: Generalmente, si el proyecto integra la función de enrutamiento, app.vue solo escribirá una etiqueta de enrutamiento

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  
}
</style>

6.main.js- archivo de entrada principal

Rol: configurar la introducción de componentes comunes, configuración general vue

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
// 创建vue，绑定主视图
// 脚手架项目中vue实例只会有一个，存在main.js中
new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>'
})

instancia de vue

Cada aplicación Vue.js se inicia creando una instancia raíz de Vue a través del constructor Vue

7. El ciclo de vida de los componentes de Vue (vue2.0)

1. Fase de creación de componentes - crear

1. componente instanciado
   1. beforeCreate antes de la creación
2. Habilitar el monitoreo de datos
3. Inicializar el método interno de vue
   1. creado creado

Usar la función de gancho en vue

<template>
  <div class="hello">
    123
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  },
  //创建前的钩子
  beforeCreate(){
     console.dir("beforeCreate");
  },
  //创建后
  created(){
    console.dir("created");
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2. Fase de representación de componentes - montaje

1. Vue elige renderizar la plantilla, ya sea para usar el componente vue para renderizar o simplemente para renderizar parte del html

   ​ 1.beforeMount: antes de que se represente el elemento dom

2. comenzar a renderizar

   1. montado - montaje dom completado

<template>
  <div class="hello">
    123
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  },
  //创建前的钩子
  beforeCreate(){
     console.dir("beforeCreate");
  },
  //创建后
  created(){
    console.dir("created");
  },
  //Dom挂载之前
  beforeMount(){
    console.dir("beforeMount");
    
  },
  //dom挂载完成
  mounted(){
    console.dir("mounted");
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

3. Fase de ejecución del componente - actualización de datos - actualización

1. El oyente monitoreará todos los cambios de valor de datos

   ​ 1.beforUpdate - antes de la actualización de datos

2. Use VDom para renderizar html dinámicamente

   1. actualizado: la representación de datos está completa

<template>
  <div class="hello">
    {
   
   { name }}
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       name:"蔡徐坤"
    }
  },
  //创建前的钩子
  beforeCreate(){
     console.dir("beforeCreate");
  },
  //创建后
  created(){
    console.dir("created");
  },
  //Dom挂载之前
  beforeMount(){
    console.dir("beforeMount");
    
  },
  //dom挂载完成
  mounted(){
    console.dir("mounted");
  },
  //数据更新之前
  beforeUpdate(){
    console.dir("beforeUpdate");
  },
  //数据更新完成
  updated(){
    console.dir("updated");
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

4. Fase de destrucción de componentes - destruir

Nota: De forma predeterminada, el componente no se destruirá activamente. Debe usar la instrucción v-if o Vue.$destroy() para activar el proceso de destrucción de vue.

1. Si el componente entra en el proceso de destrucción (instrucción v-if o Vue.$destroy())
   1. beforeDestroy - antes de destruir
2. Destruir: todas las cachés de valores de datos en el componente desaparecerán y la caché de vdom también se borrará
   1. destruido - destruido

8.main.js para configuración global

#取消 Vue 所有的日志与警告 - 开发不要配，生产环境配
Vue.config.silent = true


#配置是否允许 vue-devtools 检查代码 - 开发不要配，生产环境配
Vue.config.devtools = true 

#指定组件的渲染和观察期间未捕获错误的处理函数-全局异常处理回调
Vue.config.errorHandler = function (err, vm, info){
    
    } 

#设置为 false 以阻止 vue 在启动时生成生产提示 - 开发不要配true，生产环境配
Vue.config.productionTip = false

9. Sintaxis Vue

1. Tipo de texto de expresión de interpolación (número, booleano, cadena, carácter, tipo de texto en objeto)

Sintaxis: { { nombre de la variable de datos }}

Es representar los datos vinculados por vue a la vista para generar una asociación y realizar un enlace bidireccional.

<template>
  <div class="hello">
    <h1>大家好我叫:{
   
   { name }}</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       name:"蔡徐坤456"
    }
  }

}
</script>

directiva v-once

Posición de escritura: en la etiqueta de inicio donde existe la expresión de interpolación

Función: el valor en la expresión de interpolación no se representará de acuerdo con el cambio de datos, y el valor cargado por primera vez siempre se mantendrá

<template>
  <div class="hello">
    <h2>{
   
   { name }}</h2>// 蔡徐坤123
    <h2 v-once>大家好我叫:{
   
   { name }}</h2> // 蔡徐坤
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       name:"蔡徐坤" // 蔡徐坤123
    }
  }

}
</script>

2. Insertar dinámicamente texto HTML

Nota: El proceso de análisis de { { XXX }} solo se analizará en texto sin formato. Si desea analizar el segmento de código html y cargarlo en el dom, debe usar el comando v-html

directiva v-html

<template>
  <div class="hello">
    <!-- 加载html是以纯文本的方式加载 -->
    <!-- <h2>{
   
   { person.myhtml }}</h2> -->
    <!-- 将person.myhtml中的html代码加载到当前标签的子标签中 -->
    <h2 v-html="person.myhtml"></h2> // XXX.html("xxx")
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       person:{
         name:"蔡徐坤",
         myhtml:"<span>123</span>"
       }
    }
  }

}
</script>

3. Vinculación dinámica de valores de atributos de etiquetas (énfasis de uso frecuente)

Nota: title={ { xxxx }} no funciona, las expresiones de interpolación no se pueden usar en valores de atributos y nombres de atributos, y las expresiones de interpolación no se pueden usar en posiciones de etiquetas

Entonces, ¿qué sucede si necesita vincular dinámicamente un dato al valor del atributo de la etiqueta? Para usar el comando v-bind

directiva v-bind

<template>
  <div class="hello">
    <h1 v-bind:title="person.title" >欢迎访问网站</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       person:{
         name:"蔡徐坤",
         title:"点击给我充值50块！"
       }
    }
  }

}
</script>

El comando v-bind se puede abreviar como ":"

 <h1 :title="person.title" >欢迎访问网站</h1>

4. Expresiones de enlace dinámico

Enlace dinámicamente una pieza de código js cuando se hace clic

Con la ayuda de v-bind para lograr

<template>
  <div class="hello">
    <h1 :οnclick="person.text" >欢迎访问网站</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       person:{
          //表达式字符串
          text:"javascript:var c=0;alert(c)"
       }
    }
  }

}
</script>

5. comando vue

Posición escrita: escriba en la posición del atributo de la etiqueta en la etiqueta de inicio

1. v-once (no renovable)

2.v-bind (valor de atributo de enlace dinámico)

3.v-html (agregar dinámicamente subelementos para analizar html)

4.v-on (enlace de evento)

Escritura complicada:

<template>
  <div class="hello">
    <!-- 点击h1标签跳转到百度首页 -->
    <h1 v-on:click.prevent="toBaidu(1)" >欢迎访问网站</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       person:{
          //表达式字符串
          text:"color:red"
       }
    }
  },
  //当前组件的所有方法
  methods:{
    //跳转到百度
    toBaidu(a){ // toBaidu:function(){}
      console.dir(a);
      location.href = "https://www.baidu.com"
    }
  }

}
</script>

Escritura simple: v-on se reemplaza por @

Tales como: función de activación @click="función" cuando se hace clic

<template>
  <div class="hello">
    <!-- 点击h1标签跳转到百度首页 -->
    <h1 @dblclick="toBaidu(1)" >欢迎访问网站</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       person:{
          //表达式字符串
          text:"color:red"
       }
    }
  },
  //当前组件的所有方法
  methods:{
    //跳转到百度
    toBaidu(a){ // toBaidu:function(){}
      console.dir(a);
      //location.href = "https://www.baidu.com"
    }，
      ...
    aa(){
       this.toBaidu();// this调用别的方法
       this.person.text = "123"; // this访问data值
	}
  }

}
</script>

Entrada de teclado: implementar la activación de eventos

Presiona Enter para realizar la llamada al método

<template>
  <div class="hello">
    <!-- 键盘键入回车就跳转到百度首页 -->
    <h1>欢迎访问网站</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       person:{
          //表达式字符串
          text:"color:red"
       }
    }
  },
  mounted(){//dom渲染完成
    //添加一个监听键盘操作的监听器
    window.addEventListener('keydown', this.mykey);
  },
  //当前组件的所有方法
  methods:{
    //绑定到监听键盘输入的回调方法
    mykey(param){
      if(param.keyCode == 13){// 13 代表敲击回车
        this.toBaidu();
      }
    },
    //跳转到百度
    toBaidu(){ // toBaidu:function(){}
      location.href = "https://www.baidu.com"
    }
  }

}
</script>

Lista de todos los códigos clave en js

https://blog.csdn.net/fghyibib/article/details/120670221?utm_medium=distribute.pc_relevant.none-task-blog-2 _{predeterminado} baidujs_baidulandingword~default-1-120670221-blog-122497397.pc_relevant_multi_platform_whitelistv3&spm=100 1.2101.3001.4242. 2&utm_relevant_index=4

5.v-si 、v-mostrar

v-if:
verdadero: se monta la etiqueta o el componente
falso: se elimina o destruye la etiqueta o el componente

v-show: controle la visualización y ocultación de componentes a través del estilo de visualización
verdadero: etiqueta o componente - estado de visualización
falso: etiqueta o componente - oculto

<template>
  <div class="hello">
    <!-- 
      v-if: 
        true: 标签或者组件被挂载
        false：标签或者组件删除或销毁
     -->
    <h1 v-if="isOk">欢迎访问网站</h1>
     <!-- 
      v-show: 通过display样式控制组件显示隐藏
        true: 标签或者组件 - 显示状态
        false：标签或者组件 - 被隐藏
     -->
    <h1 v-show="isOk">欢迎访问网站2</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       isOk:true
    }
  },
  mounted(){//dom渲染完成
   
  },
  //当前组件的所有方法
  methods:{
    
  }

}
</script>

proceso de montaje v-if

Cuando el valor v-if es verdadero: el componente entrará en la fase de creación-renderizado

​ Si el componente principal carga el componente secundario y el componente secundario se describe mediante v-if="false", el componente secundario no se cargará

Cuando el valor de v-if es falso: el componente entrará en la fase de destrucción

proceso de montaje v-show

Cuando v-show es verdadero: se muestra el componente; no se llamará a ningún enlace de ciclo de vida

Si el componente principal carga el componente secundario, cuando v-show="false" describe el componente secundario, el componente secundario se cargará pero no se mostrará

Cuando el valor de v-show es falso: el componente está oculto; no se llamará al gancho del ciclo de vida

v-if se carga de acuerdo con el componente de control booleano y v-show se carga por adelantado independientemente de si el valor es verdadero o falso de acuerdo con el componente de control booleano.

6.v-otro\v-otro-si

Instrucción de juicio de múltiples condiciones

Nota: v-if v-els-if v-else debe prestar atención al orden y la cantidad de escritura, v-else solo puede tener uno, v-else-if puede tener varios

Preste atención al orden entre las etiquetas, no debe haber espacios

<Test1 v-if="isOk"></Test1> // 独立的判断
<h1 v-if="name=='鸡仔'">123</h1> //2 行 一组判断逻辑
<Test2 v-else></Test2>

7. instrucción de bucle transversal de lista v-for-ordered

v-for="(cada objeto en el ciclo, el subíndice del recorrido del ciclo) en la matriz de colección para realizar el ciclo"

​ Taquigrafía: solo saca los objetos de la colección: v-for="Cada objeto en el bucle de la matriz de la colección que se va a enlazar"

Parámetros requeridos en el ciclo

clave: la etiqueta que describe el ciclo es única, siempre que se vincule un atributo de valor único, se puede proporcionar al VDom para actualizar el elemento

<template>
  <div class="hello">
    
    <table>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <!-- 
        v-for="(循环中的每个对象,循环遍历的下标) in 要循环的集合数组"
      -->
      <tr v-for="(item,index) in userList" :key="index">
        <!-- 循环中插入的数据就使用item对象访问属性值用插值表达式输出 -->
        <td>{
   
   {item.id}}</td>
        <td>{
   
   {item.name}}</td>
        <td>{
   
   {item.age}}</td>
      </tr>
    </table>

  </div>
</template>

<script>
//引入组件
import Test1 from './Test.vue';
import Test2 from './Test2.vue';

export default {
  name: 'HelloWorld',
  //注册组件
  components:{Test1,Test2},
  data () {
    return {
       isOk:false,
       name:"鸡仔",
       userList:[
        {
          name:"蔡徐坤",
          age:18,
          id:101
        },
        {
          name:"小鸡仔",
          age:19,
          id:102
        }
       ]
    }
  },
  mounted(){//dom渲染完成
   
  },
  //当前组件的所有方法
  methods:{
    
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

8.v-for - mapa poligonal\objeto

v-for="(valor del atributo del objeto, nombre del atributo del objeto, número de serie del atributo) para iterar el objeto" :key="valor único"

<template>
  <div class="hello">
    <!-- v-for="(对象的属性值,对象的属性名称,属性的序号) in 要迭代对象" :key="唯一值" -->
    <h1 v-for="(value,key,index) in userData" :key="index">
      [{
   
   {index}}]{
   
   {key}}====={
   
   {value}}
    </h1>
    

  </div>
</template>

<script>
//引入组件
import Test1 from './Test.vue';
import Test2 from './Test2.vue';

export default {
  name: 'HelloWorld',
  //注册组件
  components:{Test1,Test2},
  data () {
    return {
       isOk:false,
       name:"鸡仔",
       userData:{
         name:"ikun",
         age:0,
         id:101
       }
    }
  },
  mounted(){//dom渲染完成
   
  },
  //当前组件的所有方法
  methods:{
    
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

9. enlace de datos de formulario v-model

En el método tradicional de desarrollo H5, el valor del formulario generalmente está controlado por el atributo de valor, pero después de la prueba, el atributo de valor de la etiqueta de formulario vinculada dinámicamente no puede realizar el cambio del valor del formulario. En este momento, necesitamos usar la instrucción v-model para realizar los datos del formulario.

1. Cómo usar v-model en el campo de texto

<template>
  <div class="hello">
      <input v-model="name"/>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {
      name:null
    }
  }

}
</script>
<style scoped>
</style>

Nota: Después de usar vue, los datos de vinculación de elementos de formulario deben usar v-model en lugar del atributo de valor

1.v-modelo.perezoso

Efecto: cuando se completa el relleno, los datos no se actualizarán hasta que se elimine el efecto seleccionado

<input v-model.lazy="name"/>

2. v-modelo.número

Efecto: al completar el texto, solo se pueden completar números

Nota: solo es útil si el texto comienza con un número y los caracteres se interceptan desde el principio del número hasta que aparece el primer no número, como: 1a2b ===> 1

<input v-model.number="name"/>

Se recomienda utilizar type="number" para la verificación digital pura

<input type="number" v-model.number="name"/>

v-model.trim

Cómo eliminar los espacios iniciales y finales

<input v-model.trim="name"/>

2. Cómo usar v-model en el selector

<!-- 如果需要回填自动选中选项，只要改变v-model绑定的数据值就ok -->
      <select v-model="name">
        <!-- 描述属性是数值类型时，需要添加v-bind -->
        <option :value="1">昆明</option>
        <!-- 描述属性是boolean类型时，需要添加v-bind -->
        <option :value="true">临沧</option>
        <option value="3">蒙自</option>
      </select>

3. Cómo usar v-model en radio y casilla de verificación

Caja individual

<template>
  <div class="hello">
      <input type="radio" name="sex" :value="1" v-model="sexCode"/>男
      <input type="radio" name="sex" :value="2" v-model="sexCode"/>女
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {
      sexCode:null
    }
  }

}
</script>
<style scoped>
</style>

casilla de verificación

<template>
  <div class="hello">
      <input type="checkbox" name="like" :value="1" v-model="likeCode"/>吃鸡
      <input type="checkbox" name="like" :value="2" v-model="likeCode"/>lol
      <input type="checkbox" name="like" :value="3" v-model="likeCode"/>王者别嚣张
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {
      likeCode:[]// checkbox情况下，初始化值一定是要一个空数组
    }
  }

}
</script>
<style scoped>
</style>

4. El modelo v se usa en el campo de texto.

<template>
  <div class="hello">
      <textarea v-model="name"></textarea>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {
      name:null
    }
  }

}
</script>
<style scoped>
</style>

10. Filtro

Propósito: reescribir el contenido de visualización de la expresión de interpolación

<template>
  <div class="hello">
    <!-- userData.name值nameFilter过滤器中 -->
    <!-- 过滤器可以改写插值表达式的内容 -->
    <h1>{
   
   { userData.name | nameFilter | nameFilter2 }}</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       isOk:false,
       name:"鸡仔",
       userData:{
         name:"ikun",
         age:0,
         id:101
       }
    }
  },
  //过滤器
  filters:{
      //自定义过滤器
      nameFilter:function(value){
          console.dir(value);

          //要定义返回值
          return "欢迎管理员："+value+"，登录系统";
      },
      nameFilter2:function(value){
        console.dir(value);
        return value+"!!!!!!"
      }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

La directiva v-bind también se puede usar con filtros

<h1 :title="userData.name | nameFilter">点击查看用户信息</h1>

Vue3.0 tiene filtros obsoletos

11. Propiedades calculadas

Escenarios de uso de propiedades computadas:

Comparar con el filtro:

Filtro: el parámetro solo puede estar en la expresión de interpolación | el valor anterior se inyecta en el parámetro del filtro, y el filtro no puede acceder a los datos vinculados por los datos

Propiedad calculada: el parámetro puede ser el parámetro real cuando se llama a la propiedad calculada, o puede acceder a los datos vinculados por datos (este acceso)

Usar propiedades calculadas: método sin argumentos

<h1>{
   
   { nameComputed }}</h1>

//计算属性
  computed:{
    
    
      //自定义计算属性
      nameComputed:function(){
    
    
          return this.userData.name.split('').reverse().join('');
      }
  }

Usar propiedades calculadas: métodos que pueden pasar parámetros

<h1>{
   
   { nameComputed("1",1,3) }}</h1>

//计算属性
  computed:{
    
    
      //自定义计算属性
      nameComputed(){
    
    
         return function(value,value2,value3){
    
    
            console.dir(value);
            return this.userData.name.split('').reverse().join('');
         }
      }
  }

¿Se puede usar el método method en expresiones de interpolación?

Sí, pero se recomienda usar propiedades calculadas para completar

La diferencia entre método y computado.

Propiedad calculada:

Las propiedades calculadas utilizan la memoria caché del navegador para el almacenamiento y el cálculo de datos

Las propiedades calculadas pueden distinguir entre dos modos de método: obtener y establecer según si el comportamiento es lectura o asignación de parámetros

mycomputed:{
    
    
        get:function(){
    
    // 无参调用计算属性时触发
          console.dir("get");
          return "get";
        },
        set:function(){
    
    // 有参调用计算属性触发
          console.dir("set");
          return "set";
        }
      }

Sin embargo, cada llamada del método debe ser leída y escrita por la función, y no hay implementación de caché, por lo que el rendimiento es deficiente. Cuando el propósito del desarrollo es solo cambiar el contenido de valor de la expresión de interpolación, se recomienda use la propiedad calculada para completarla.

12. Oyente

Función: monitorear el cambio de datos de enlace de datos

Nota: Si los datos a monitorear están almacenados en el objeto, el método de escritura es diferente

<template>
  <div class="hello">
     <h2>{
   
   { userData.age }}</h2>
     <button @click="userData.age +=1">点击我+1！</button>
     <button @click="userData.age -=1">点击我-1!</button>

     <h2>{
   
   { aa }}</h2>
     <button @click="aa +=1">点击我+1！</button>
     <button @click="aa -=1">点击我-1!</button>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
       isOk:false,
       name:"鸡仔",
       aa:0,
       userData:{
         name:"ikun",
         age:0,
         id:101
       }
    }
  },
  methods:{// 普通方法就像js中的函数 function
    say(){
      return "123456";
    }
  },
  watch:{//监听器- 可以监听data绑定数据的变化
    // data绑定数据的名称(新变化的值,变化之前的值)
    aa(newValue,oldValue){
        console.dir(newValue+"-----"+oldValue);
    },
    //要监听的数据是存在对象中的
    "userData.age"(newVal,oldVal){
        console.dir(newVal+"-----"+oldVal);
    }

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

monitoreo profundo

Se utilizará cuando varios componentes compartan valores de datos

"userData.data.data.age":{
      immediate:true,// 深度监听立即执行
      deep: true,//  开启深度监听
      handler(newVal,oldVal){
        console.dir(newVal+"-----"+oldVal);
      }
}

Realice el front-end bajo la función de lista de información de estudiantes de ayer: agregue y edite funciones

1. Añadir función:
   1. Encima de la mesa habrá un botón de agregar
   2. Haga clic en el botón Agregar para que aparezca un div, que contiene un formulario para agregar información del estudiante y botones para guardar y restablecer el formulario.
   3. Después de completar los datos, haga clic en Guardar, la ventana emergente se cierra y los datos del formulario se actualizan
2. función de edición
   1. Una columna de operación más en la tabla.
   2. La columna de operación corresponde a un botón de edición en cada fila
   3. Haga clic en Editar para que aparezca el div de edición, que contiene un formulario para editar la información de los estudiantes y guardar las ediciones.
   4. Después de completar los datos, haga clic en Guardar, la ventana emergente se cierra y los datos del formulario se actualizan
3. Tenga en cuenta que agregar formulario y editar formulario comparten un div y el contenido del formulario, realizado por juicio

13. Método de enlace de estilo dinámico

El método de modificar dinámicamente los atributos de clase para lograr cambios de estilo.

1. Sintaxis de objetos

<template>
  <div class="hello">
    <!-- isUse为true则class属性值为class="div1" 为false class=""  -->
    <div :class="{ div1: isUse , hide : isUse2}"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isUse: false,
      isUse2:false
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.hide{
    display: none;
}

</style>

2. El enlace de datos implementa cambios en los atributos de clase

<template>
  <div class="hello">
    <div :class="myDivClass"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      myDivClass:{
        div1:true,// 需要添加div1 值
        hide:false// hide值不添加
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.hide{
    display: none;
}

</style>

3. Controle el contenido del valor del atributo de clase a través de una matriz

<template>
  <div class="hello">
    <div :class="[activeDiv1,activeHid]"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      activeDiv1:'div1', //属性值是样式名称
      activeHid:'hide'
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.hide{
    display: none;
}

</style>

Las expresiones se pueden usar en la matriz para completar la selección de estilo

<template>
  <div class="hello">
    <!-- 数组中可以使用表达式完成样式的选择 -->
    <div :class="[isUser==true?activeDiv1:'xx',activeHid]"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      activeDiv1:'div1', //属性值是样式名称
      activeHid:'hide',
      isUser:false
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.hide{
    display: none;
}

</style>

El método de modificar dinámicamente el atributo de estilo del estilo en línea

1. Métodos de incrustación de objetos.

<template>
  <div class="hello">
    <!-- 样式值实现动态绑定 -->
    <div :style="{color:fontColor,backgroundColor:bgColor,with:'100px',height:'100px'}"></div>
    <input v-model="bgColor" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
        fontColor:'red',
        bgColor:'yellow'
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2. Método de atributo de estilo de enlace de datos

<template>
  <div class="hello">
    <!-- 样式值实现动态绑定 -->
    <div :style="myStyle"></div>

    <input v-model="myStyle.backgroundColor" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
        myStyle:{// 需要绑定到style属性中的对象要求：属性名称是样式名称，属性值是样式值
            color:'red',
            backgroundColor:'yellow',
            width:'100px',
            height:'100px'
        }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

14. Método de desarrollo de componentes

1. Introducir el uso de métodos de componentes

código de subcomponente

<!-- Dom页面 -->
<template>
  <div id="TestIndex">
    测试页面1
  </div>
</template>

<!-- 组件js -->
<script>
export default {
  name: "TestIndex",
  data() {
    return{

    }
  },
};
</script>

<!-- CSS代码 -->
<style scoped></style>

código de componente principal

<template>
  <div class="hello">
    <!-- 3.通过标签的方式引入组件,标签名称就是组件名称 -->
    <Test />
  </div>
</template>

<script>
//1. 导入要使用的组件  @代表的就是src目录路径，有点像classpath
import Test from '@/components/Test.vue';

export default {
  name: "HelloWorld",
  components:{Test},// 2.注册声明组件使用
  data() {
    return {
        
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2. El componente secundario recibe datos del componente principal

El subcomponente debe definir qué datos puede recibir (parámetros del componente)

definición de atributo de accesorios

Nota: La transferencia de valor del componente padre-hijo es una copia del valor y no se pasará la dirección.

Escritura de subcomponentes

<!-- Dom页面 -->
<template>
  <div id="TestIndex">
    测试页面1{
   
   { name }}
    <input v-model="name">
  </div>
</template>

<!-- 组件js -->
<script>
export default {
  name: "TestIndex",
  props:{//组件接收参数定义 使用props参数值的方式和使用data绑定数据的方法一样
    // 注意不要和data中的数据名称重复
     name:{
       type:String,// String:字符串字符类型 Number:数值类型 Array：集合数组类型 Object：对象、map类型
       default:'只因你太美' //默认值
     },
     age:{
       type:Number,
       default:18
     }
  },
  watch:{
    name:function(newV,oldV){
      console.dir("监听:"+newV+"---"+oldV);
    }
  },
  data() {
    return{
        sonName:this.name //访问props参数方法和访问data值方法一致
    }
  },
  methods:{
    aa(){
      console.dir(this.name);//访问props参数方法和访问data值方法一致
    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>

Método de transferencia de componentes principales

<template>
  <div class="hello">
    <!-- 3.通过标签的方式引入组件,标签名称就是组件名称 -->
    <!-- 给子组件props参数传值是通过标签属性传递的 -->
    <Test :name="fatherName" :age="12" />
  </div>
</template>

<script>
//1. 导入要使用的组件  @代表的就是src目录路径，有点像classpath
import Test from '@/components/Test.vue';

export default {
  name: "HelloWorld",
  components:{Test},// 2.注册声明组件使用
  data() {
    return {
        fatherName:"蔡徐坤"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Cuando el componente secundario hace clic en el botón de cierre, el componente principal debe recibir la devolución de llamada del evento de cierre

El componente secundario debe notificar al componente principal que algo sucede para que el componente principal pueda recibir el mensaje.

3. Método de devolución de llamada del componente secundario y del componente principal

Puede realizar el componente secundario para pasar datos al componente principal

Caso: haga clic en el botón de cierre del componente secundario para ocultar el div del componente principal

código de subcomponente

<!-- Dom页面 -->
<template>
  <div id="TestIndex">
      <button @click="sonClose">关闭</button>
  </div>
</template>

<!-- 组件js -->
<script>
export default {
  name: "TestIndex",
  data() {
    return{
        
    }
  },
  methods:{
    sonClose(){//子组件点击了关闭按钮
      //让父组件接收到我的这个信息
      // 如果需要传递参数，接收时一定要按照传递时的顺序取参数
      this.$emit("sClose","cxk",123);// 封装了一个方法名叫sClose的回调函数通知父组件
    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>

código de componente principal

<template>
  <div class="hello">
      
        <div class="myDiv" v-if="isShow">
            <!-- 回调函数接收的方法不要定义参数列表 -->
            <Test @sClose="fatherFunction"/>
        </div>

  </div>
</template>

<script>
//1. 导入要使用的组件  @代表的就是src目录路径，有点像classpath
import Test from '@/components/Test.vue';

export default {
  name: "HelloWorld",
  components:{Test},// 2.注册声明组件使用
  data() {
    return {
        isShow:true
    };
  },
  methods:{
    //父组件接收子组件回调的方法
    fatherFunction(param,param2){
        console.dir(param);
        console.dir(param2);
        this.isShow = false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myDiv{
    width: 200px;
    height: 200px;
    background-color: aqua;
}
</style>

1. Defina un componente secundario, la función es: implementar un cuadro desplegable dinámico a través de la lista de datos pasados ​​por el componente principal
2. Cuando se seleccionan los datos en el cuadro desplegable, es necesario volver a llamar una vez al componente principal (cambio\seleccionado)
3. Realice la función de borrar el cuadro desplegable, haga clic en Borrar para borrar el contenido seleccionado y luego vuelva a llamar un evento al componente principal (clear\qingkong)

4. Después de definir el componente secundario, el componente principal introduce el componente, ya sea que la prueba sea normal

15. Enrutamiento

1. ¿Qué es el enrutamiento?

2. Tres objetos de enrutamiento

ruta: En primer lugar, es un número singular, traducido como ruta, es decir, podemos entenderlo como una sola ruta o una ruta determinada; (información de ruta única)

rutas: Es un número plural, lo que significa que múltiples conjuntos pueden ser plurales, es decir, podemos entenderlo como un conjunto de múltiples rutas.En JS, solo hay dos formas de conjuntos que representan múltiples estados diferentes: matrices y objetos De hecho, la definición oficial de rutas es una matriz, por lo que recordamos que las rutas representan una colección de múltiples matrices (toda la información de enrutamiento en todo el proyecto)

enrutador: traducido como enrutador, lo anterior son rutas, esto es un enrutador, podemos entenderlo como un contenedor que contiene los dos anteriores o es un administrador encargado de administrar los dos anteriores; ponga un ejemplo de un escenario común: cuando el el usuario está en Cuando se hace clic en el botón de la página, el enrutador irá a las rutas para encontrar la ruta en este momento, es decir, el enrutador irá a la colección de rutas para encontrar la ruta correspondiente; (el objeto puede realizar múltiples saltos de función de la ruta)

3. Cómo configurar el enrutamiento

Qué dirección puede acceder a qué componente, describe la información de enrutamiento

1. Escribir páginas de componentes

2. Abra el archivo de configuración de enrutamiento

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//1. 导入需要配置路由的组件
import Test2 from '@/components/Test2.vue';

Vue.use(Router)

export default new Router({
    
    
  // 所有路由信息-集合
  routes: [// 第一个路由记录就是欢迎页
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
    
    
        index:0,
        name:"首页"
      }
    },
    {
    
    // 2.编写路由
      path: '/test2',// 访问路径
      name: 'Test2', //路由组件名称
      component: Test2, //关联组件
      meta:{
    
    
        index:1, // 组件顺序-按照组件关系写
        name:"测试页面2" // 路由组件名称-中文描述-提供面包屑使用
      }
    }
  ]
})

Cómo cambiar el acceso de enrutamiento

export default new Router({
    
    
  mode: 'history',// 路由地址前面就不会有/#/

4. Método de salto de enrutamiento

1. etiqueta de enlace de enrutador

<!-- 效果类似a标签 -->
        <!-- <a href="/test2">XXXX</a> -->
        <router-link to="/test2">跳转到test2页面</router-link>

2. objeto $ enrutador

método push: agregará el registro del salto de ruta al registro de caché del navegador, y puede usar las funciones de avance y retroceso del navegador

método de reemplazo: los datos a los que se accedió no se agregarán al registro

Método 1.push: pase directamente la cadena de dirección de enrutamiento

<template>
  <div class="hello">
        <button @click="doRouter">点击跳转</button>
  </div>
</template>

<script>

export default {
  name: "HelloWorld",
  data() {
    return {
        
    };
  },
  methods:{
    //路由跳转方法
    doRouter(){
       this.$router.push('/test2');
    }
  }
};
</script>

Método 2.push: pasa un objeto de información de enrutamiento

<template>
  <div class="hello">
        <button @click="doRouter">点击跳转</button>
  </div>
</template>

<script>

export default {
  name: "HelloWorld",
  data() {
    return {
        routeData:{
          path:'/test2'
        }
    };
  },
  methods:{
    //路由跳转方法
    doRouter(){
       this.$router.push(this.routeData);
    }
  }
};
</script>

3. Objeto de información de enrutamiento aprobado: la página redirigida está determinada por el nombre

<template>
  <div class="hello">
        <button @click="doRouter">点击跳转</button>
  </div>
</template>

<script>

export default {
  name: "HelloWorld",
  data() {
    return {
        routeData:{
          name:"Test2" // 路由定义的index.js中定义路由的name值
        }
    };
  },
  methods:{
    //路由跳转方法
    doRouter(){
       this.$router.push(this.routeData);
    }
  }
};
</script>

método 4.replcae

Mismo uso que empujar

// 字符串
this.$router.replace('/home/first')
// 对象
this.$router.replace({ path: '/home/first' })
// 命名的路由
this.$router.replace({ name: 'home', params: { userId: wise }})

5. ir método

//前进一步 相当于history.forward()
this.$router.go(1) 
、
//后退一步 相当于history.back()
this.$router.go(-1) 

this.$router.go(10) 

3. Subrutas anidadas

Escenario de uso: el backend del sistema de gestión empresarial, la interfaz actualizada por los componentes en el lado derecho del menú de la izquierda

Página de inicio:

<!-- Dom页面 -->
<template>
  <div id="Main">

        <h1>主页</h1>
        <router-link to="/user">用户管理</router-link>
        <router-link to="/role">角色管理</router-link>
        <!-- 路由切换视图标签 -->
        <router-view />    
  </div>
</template>

<!-- 组件js -->
<script>
export default {
  name: "Main",
  data() {
    return {};
  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>

configuración de enrutamiento

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Main from '@/components/main'
//1. 引入组件
import User from '@/components/user'
import Role from '@/components/role'

Vue.use(Router)

export default new Router({
    
    
  mode: 'history',// 路由地址前面就不会有/#/
  // 所有路由信息-集合
  routes: [// 第一个路由记录就是欢迎页
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
    
    
        index:0,
        name:"登录页面"
      }
    },
    {
    
    
      path: '/main',
      name: 'Main',
      component: Main,
      meta:{
    
    
        index:1,
        name:"首页"
      },
      children:[// 子路由!!!!!!!
        {
    
    
          path: '/user',
          name: 'User',
          component: User,
          meta:{
    
    
            index:1-1,
            name:"用户管理"
          }
        },
        {
    
    
          path: '/role',
          name: 'Role',
          component: Role,
          meta:{
    
    
            index:1-2,
            name:"角色管理"
          }
        }
      ]
    }
    
  ]
})

5. Parámetros de enrutamiento

1. Parámetros de empalme en la ruta de enrutamiento: los parámetros no se perderán cuando se actualice la página

En el archivo de configuración de enrutamiento, declare la ubicación donde aparecerá el parámetro en el atributo de ruta

{
    
    
      path: '/:id', // 在/ 路径之后 会传递一个 名字叫id的参数
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
    
    
        index:0,
        name:"登录页面"
      }
    },

El salto de enrutamiento de llamadas es pasar parámetros

Nota: Solo se pueden pasar cadenas y valores simples, tipos booleanos, no se pueden pasar objetos

this.$router.push({ path:`/main/${this.param}`});

Obtener parámetros en el componente de enrutamiento de destino

<!-- Dom页面 -->
<template>
  <div id="Main">

        <h1>主页</h1>
        <h1>{
    
    {
    
     $route.params.id }}</h1>
  </div>
</template>

2. Al llamar al método de enrutamiento, agregue el atributo params para pasar parámetros; los parámetros de la página de actualización se perderán

El archivo de configuración de enrutamiento no necesita ser modificado

Llame al método de salto de enrutamiento

Este método admite el paso de objetos.

// 想要使用params传递参数，路由跳转的方法必须使用name指定路由页面才行
       this.$router.push({
    
     name:"Main",params:this.param});

3. Al llamar al método de enrutamiento, agregue el atributo de consulta para pasar los parámetros; actualizar la página no perderá los parámetros

El archivo de configuración de enrutamiento no necesita ser modificado

Llame al método de salto de enrutamiento

Este método admite el paso de objetos.

this.$router.push({
    
     path:"/main",query:this.param});

La página de destino de enrutamiento toma parámetros, que deben obtenerse a través de parámetros de consulta

this.loginUser = this.$route.query.name;

Resuma los tres métodos de enrutamiento de parámetros:

1. Método de empalme de ruta: si hay escenas que se deben inicializar o se deben pasar parámetros antes de usar

2. Método de parámetros: cifrar los parámetros pasados, pero la transmisión de datos es única

​ 3.método de consulta: los parámetros no están encriptados y se exponen directamente en la url

rutas de acceso a objetos

this.$router.options.routes

Capacidad para acceder a toda la información de enrutamiento para el proyecto actual

6. Barra de progreso de carga de salto de enrutamiento Vue

1. Usa Nprogreso

Ejecutar en la ventana del proyecto

cnpm install nprogress

2. Introducir componentes y estilos en main.js

import NProgress from 'nprogress' 
import 'nprogress/nprogress.css'// nprogress样式文件

3. Configuración de la función de enganche del componente de enrutamiento

Dos ganchos: antes del salto de ruta y después del salto

// 路由的钩子函数是main.js中配置的

// 路由跳转之前
router.beforeEach((to, from , next) => {
    
    
    // 开启进度条
    NProgress.start();
    // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
    next();
});


//当路由跳转结束后
router.afterEach(() => {
    
      
    // 关闭进度条
    NProgress.done()
})

1. Es necesario implementar un componente de tabla para agregar, eliminar, modificar y paginar

16. componente axios

Función: igual que ajax, la implementación subyacente es js-ajax y el método de escritura es más simple que JQuery y js ajax aprendidos antes

Pasos de instalación

//1. 在项目窗口中执行
cnpm install axios

Configurar el contenido de axios en main.js

import axios from 'axios'
Vue.prototype.$axios = axios //全局属性

Cómo definir propiedades globales

在main.js中定义

// 定义全局属性的方法
// Vue.prototype.自定义属性名 = 组件对象
// 属性命名规则：$+属性名
// 在组件中使用全局属性： this.$axios   
Vue.prototype.$axios = axios //全局属性

Gestión de problemas entre dominios, configuración de dirección de servicio de solicitud

¿Qué es dominio cruzado?

Debido a las restricciones de la política del mismo origen del navegador. La misma política de origen (Same origin policy) es una convención, que es la función de seguridad central y más básica del navegador. Si falta la misma política de origen, las funciones normales del navegador pueden verse afectadas. Se puede decir que la Web está construida sobre la base de la política del mismo origen, y el navegador es solo una implementación de la política del mismo origen. La política del mismo origen evita que los scripts JavaScript de un dominio interactúen con el contenido de otro dominio. El llamado mismo origen (es decir, en el mismo dominio) significa que dos páginas tienen el mismo protocolo (protocol), host (host) y número de puerto (port)

Nota: si uno de los protocolos + host + puerto es diferente, habrá problemas entre dominios

1. Configure BaseUrl en el archivo main.js

axios.defaults.baseURL = '/api'  //关键代码,/api之后替换的就是 http://localhost:8090

2. Configure el proxy, el campo proxyTable en el archivo index.js en la carpeta de configuración

module.exports = {
    
    
  dev: {
    
    

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    
     // 配置到这里！！！！
      '/api': {
    
    // 配置了一个静态地址代理
        target:'http://localhost:8090', // 后端服务地址以及端口号
        changeOrigin:true,  // 可以跨域
        pathRewrite:{
    
    
          '^/api': ''
        }
      }
    },

3. main.js modifica el método de creación de atributos globales de axios

Vue.prototype.$axios = axios.create({
    
    
	baseURL:'/api',
	timeout:30000
})

4. Detenga el proyecto, ejecute cnpm install y luego inicie el proyecto

5. Caso de prueba

getData() {
    
    
      console.dir(this);
      // 在axios代码中要使用this关键字访问data或者方法等等vue组件内容的话需要定一个别名变量
      let _this = this;
      this.$axios
        .get("goods/goods/getGoodsByID?id=101")
        .then(function(res) {
    
    
          _this.resData = res.data;
        })
        .catch(function(error) {
    
    
          // 请求失败处理
          console.log(error);
        });
    }

4 solicitudes

OBTENER solicitud

1. Los parámetros se empalman después de la url

// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
  .then(function (response) {
    
    
    console.log(response);
  })
  .catch(function (error) {
    
    
    console.log(error);
  });

2. Pasar un parámetro con el atributo params

 this.$axios
        .get("goods/goods/getGoodsByID",{
    
    
          params:{
    
    // 写键值对参数内容
            id:101
          }
        })

Solicitud POST

La solicitud ya ha encapsulado los datos como datos json para enviar el backend, por lo que cuando escriba el método del controlador en el backend, recuerde usar la anotación @RequestBody para recibir parámetros.

La solicitud put\delete se escribe de la misma manera que la publicación

this.$axios
        .post("goods/goods/testpost",{
    
      // 参数传递的方法和GET不同
          name:"张三",
          price:18.9
        })

Método de solicitud de envío por lotes

Lo que debe usarse es el método all del objeto componente axios, y el objeto $axios utilizado en el caso anterior es una instancia creada por el objeto componente.create

Entonces necesitamos redefinir un objeto de componente axios global

main.js中定义组件对象全局属性

Vue.prototype.$VueAxios = axios;  // all 再用该对象    新配置的组件对象

Vue.prototype.$axios = axios.create({
    
    // get post delete put
	baseURL:'/api',
	timeout:30000
})

Método de llamada de interfaz por lotes

getData1() {
    
    
       return  this.$axios
        .post("goods/goods/testpost",{
    
    
          name:"张三",
          price:18.9
        });
    },
    getData2() {
    
    
       return  this.$axios.get("goods/goods/getGoodsByID?id=101");
    },
    //合并提交方法
    getAllData(){
    
    
      let _this = this;
      console.dir(this.$axios);
      this.$VueAxios.all([_this.getData1(),_this.getData2()]) // 按照数组顺序调用
      .then(_this.$VueAxios.spread(function (res1, res2) {
    
     // 根据调用方法的数量定义接收对应方法返回的数据参数
        // 当所有的方法执行完成且都有返回值之后
          console.dir("请求完成");
          console.dir(acct);
          console.dir(perms);
       }));

    }

interceptor de solicitudes

El papel del interceptor de solicitudes

Interceptar antes de que axios envíe la solicitud al backend, puede modificar los parámetros de la solicitud, etc.

写在main.js中

// http request 请求拦截器
axios.interceptors.request.use(config => {
    
    
	// 在发送请求之前做些什么
	return config;
}, error => {
    
    
	// 对请求错误做些什么
	return Promise.reject(error);
});

interceptor de respuesta

efecto:

​ Todas las solicitudes ingresarán al interceptor modificado al devolver una respuesta

// 响应拦截器
Vue.prototype.$axios.interceptors.response.use(response => {
    
    

  console.dir(response);
  if(response.data.code == "9999"){
    
    //系统异常
    // 统一错误提示弹窗
  }else if(response.data.code == "-1"){
    
     // 登录会话失效
    // 使用路由返回到登录页面
  }

  return response;
},error => {
    
    
  if (error.response) {
    
    
   // 返回接口返回的错误信息
   return Promise.reject(error.response.data);
 }
});

17. Modelo en V personalizado de subcomponentes

v-model: solo puede aparecer en funciones de formulario

Caso: el componente secundario implementa la selección de radio de género, el modelo v se da cuenta del valor del código del género vinculante y los datos primarios secundarios vinculados por el modelo v cambiarán cuando se modifique el componente primario secundario

Escritura de subcomponentes

<template>
  <div id="Test1">
    <!-- 子组件：性别的单选框 怎么设计和实现v-model -->
    <input type="radio" :value="1" :checked="isManChecked" name="sex" @change="sexChange(1)" />男
    <input type="radio" :value="2" :checked="isWoManChecked" name="sex" @change="sexChange(2)"/>女
  </div>
</template>


<script>
export default {
  name: "Test1",
  props:{
    sexCode:{
        type:Number
    }
  },
  //v-model绑定数据
  model:{
        prop:'sexCode',  // v-model绑定的参数是sexCode字段
        event:'onchange' // v-model数据更新的回调事件叫什么（v-model更改过程是依赖事件）
  },
  watch:{
    sexCode:function(newV,oldV){
        if(newV==1){//男选中
            this.isManChecked = true;
            this.isWoManChecked = false;
        }else{//选中女
            this.isManChecked = false;
            this.isWoManChecked = true;
        }
    }
  },
  data() {
    return {
        isManChecked:false,
        isWoManChecked:false
    };
  },
  methods:{
    sexChange(param){
        this.$emit("onchange",param); // 第二个参数，就是更新父组件v-model绑定数据的值
    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>

componente padre

<Test1 v-model="data" />

18. Tragamonedas

Función: es posible colocar la etiqueta especificada en el contenedor de la ranura del componente, lo que puede estandarizar la composición del contenido del componente y configurar de manera flexible el contenido del componente

etiqueta de ranura

<slot>。。</slot>

ranura - ranura predeterminada

También llamada ranura sin nombre, generalmente se usa cuando el componente principal reemplaza rápidamente el contenido predeterminado del componente secundario en lotes.

definición de subcomponente

<template>
  <div id="Test1">
    <div class="div1">
        <!-- 默认插槽写法：<slot> -->
        <slot>默认插槽的文字1</slot> 
    </div>
    <div class="div2">
        <slot>默认插槽的文字2</slot>
    </div>
  </div>
</template>

El componente principal cambia el método de ranura predeterminado

<Test1 v-model="sexCode" >
   <!-- 在子组件中添加html代码段就会替换默认插槽信息 -->
   <h1>XXX</h1>
   <h1>XXX222</h1>
</Test1>

ranura con nombre

definición de subcomponente

<template>
  <div id="Test1">
    <div class="div1">
        <slot name="one">插槽的文字1</slot>
    </div>
    <div class="div2">
        <slot name="two">插槽的文字2</slot>
    </div>
  </div>
</template>

componente padre

<Test1 v-model="sexCode" >
        <!-- 具名插槽赋值方法：template标签 v-slot:插槽的name值 -->
        <template v-slot:one>
         <h1>XXX</h1>
        </template>
      </Test1>

asignación de atributo de ranura método de ranura con nombre

<!-- 具名插槽赋值方法：可以使用在标签上  slot="插槽名称" -->
        <div slot="one">
          <h1>XXX</h1>
        </div>

Ranuras con ámbito de objeto

Subensamblaje

<template>
  <div id="Test1">
    <div class="div1">
        <!-- 绑定了一个叫obj的属性在插槽上 -->
        <slot :obj2="objData" :obj="objData">插槽的文字1</slot>
    </div>
  </div>
</template>

<script>
export default {
      
      
  name: "Test1",
  data() {
      
      
    return {
      
      
        objData:{
      
      
            name:"张三",
            age:18
        }
    };
  },
  methods:{
      
      
  }
};
</script>

componente padre

<Test1 v-model="sexCode" >
        <!-- template标签声明v-slot="定义一个变量接收子组件插槽中定义的对象" -->
        <template v-slot="objData">
          <!-- 对象.插槽属性名.插槽属性对象的属性值 -->
          <h1>{
   
   { objData.obj2.name }}</h1>
        </template>
      </Test1>

19. Gestión del estado de Vuex

1. Método de instalación

Ejecutar en la ventana cmd del proyecto

cnpm install vuex

Cree un archivo store.js,

Cree una carpeta vuex en el directorio src y cree un archivo store.js en la carpeta

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    
    
    state:{
    
    

    },
    getters:{
    
    

    },
    mutations:{
    
    

    },
    actions:{
    
    
        
    }
});

Importar el componente en main.js

//导入vuex组件内容
import Vuex from 'vuex';
import store from './vuex/store'
Vue.use(Vuex);
Vue.prototype.$store = store;


// 修改原有的new Vue构造器
new Vue({
    
    
  el: '#app',
  router,
  store, // 添加到全局组件
  components: {
    
     App },
  template: '<App/>'
})

Instrucciones

1. Establecer guardar datos

在state对象中描述要保存的数据

export default new Vuex.Store({
    
    
    state:{
    
    // 共享的数据
        count:0
    },

2. Modificar datos

1.action - método de llamada sin parámetros

actions:{
    
    // 操作state里的数据方法
        addCount(){
    
    // 每次调用让count数据+1
            this.state.count++;
        },

método de llamada

// 调用了vuex中action中的addCount方法，无参调用
        this.$store.dispatch("addCount"); // 字符串的action方法名

2.action - método de llamada con parámetros

// 形参1： vuex对象
// 形参2： 传入的数据（如果要传递多个参数，就封装到对象中---map、集合）
addCount2(obj,param){
    
    
    this.state.count += param;
}

método llamado

this.$store.dispatch("addCount2",123);

3. mutaciones - llamada sin argumentos

mutations:{
    
    
        m_addCount(){
    
    
            this.state.count++;
        }
    },

método de llamada

this.$store.commit("m_addCount");

4.mutations - llamada con parámetros

// 形参1：  state对象 
// 形参2： 传入的数据（如果要传递多个参数，就封装到对象中---map、集合）
m_addCount2(obj,param){
    
    
            console.log(obj); // state对象 
            this.state.count += param;
        }

método de llamada

this.$store.commit("m_addCount2",123);

3. Obtenga el valor

captadores

getters:{
    
    // 获取值的操作
        getCount(obj){
    
    // 参数注入了当前vuex的state对象
            console.dir(obj.count); 
            return obj.count; // $store.getters.getCount
        }
    },

método de llamada

this.$store.getters.getCount

mutaciones y métodos de acción utilizan la selección

Si necesita una ejecución asíncrona y rápida, utilice el método de acción. Si necesita garantizar la seguridad de lectura y escritura de datos mediante la espera, utilice el método de mutaciones.

El método de acción devuelve una función de promesa, y luego se puede usar catch para describir el éxito o el fracaso de la llamada al método.

El método de mutaciones no lo hace, es solo una simple llamada de función

Se recomienda el método de mutaciones debido a la seguridad de la sincronización.

20. Elemento UI

1. Instalación

Ejecución de la ventana cmd del proyecto

cnpm install element-ui

Importar el contenido del componente en main.js

//导入elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

Probar si se puede usar el componente el