[Vue] de desarrollo de aprendizaje front-end - medio

gramática

1. Enlace de entrada de formulario

La entrada de formulario requiere un enlace de datos bidireccional, así que use v-model.

• Texto: <input type="text" v-model="user" />recopilar valor; tipo=contraseña, texto, número.
• Texto multilínea: <textarea v-model="text"></textarea>no acepta sintaxis de interpolación;
• Botón de radio: <input type="radio" name="sex" v-model="userInfo.sex" value="male">El botón de radio necesita identificar el nombre, de lo contrario no será exclusivo, y el valor del teléfono móvil;
• Cuadro de selección múltiple: <input type="checkbox" v-model="userInfo.hobby" value="study">: si el atributo de valor no está configurado, entonces el atributo recopilado está marcado (marcado o no, es un valor booleano); si el atributo de valor está configurado: ①El valor inicial
  de v-model no es una matriz , luego se verifica lo recopilado (marcado o no, es un valor booleano)
  ②El valor inicial de v-model es una matriz, luego lo que se recopila es una matriz compuesta de valores
• Cuadro desplegable: <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">成都</option> </select>
  el tipo de texto y el elemento vincularán la propiedad de valor y escucharán el evento de entrada;
  y vincularán la propiedad marcada y escucharán el evento de cambio;
  vincularán la propiedad de valor y escucharán el evento de cambio

v-model ignorará el valor inicial, el atributo marcado o seleccionado en cualquier elemento del formulario, el valor inicial debe declararse en JavaScript usando la opción de datos.

Tres modificadores de v-model:

• perezoso: recopile datos después de perder el foco, recopile datos después del evento de entrada de forma predeterminada y recopile datos después del evento de cambio después de agregar perezoso.
• número: convierte la cadena de entrada en un número válido
• recortar: de forma predeterminada, los espacios en ambos extremos de la entrada del usuario se eliminan automáticamente

filtro :

Definición: mostrar los datos que se mostrarán después de un formato específico (adecuado para un procesamiento lógico simple)
Filtro de registro:
Vue.filter (nombre, devolución de llamada) filtro global
nuevo Vue {filtros: {}} filtro local

Usar filtro: { { xxx | 过滤器名}}ov-bind:属性 = "xxx | 过滤器名"

• Los filtros pueden aceptar parámetros adicionales y también se pueden conectar varios filtros en serie
• Los datos originales no se modifican, pero se generan nuevos datos correspondientes

2. Algunos comandos integrados

• v-text: v-text reemplazará el contenido en el nodo, <div v-text="str"></div>;
• v-html: renderiza el contenido que contiene la estructura html al nodo especificado, que reemplazará todo el contenido en el nodo, <div v-html="str"></div>;
• v-cloak: La esencia es un atributo especial. Después de que se crea la instancia de Vue y se hace cargo del contenedor, el atributo v-cloak se eliminará; por lo tanto, puede usar el atributo v-cloak para hacerse cargo del nodo cuando la carga de Vue es lenta. este atributo sea invisible y resuelva { { xx }}pregunta;
• v-once: Después de la representación dinámica inicial del nodo, se considera contenido estático y los cambios de datos futuros no provocarán la actualización de la estructura v-once, que se puede utilizar para optimizar el rendimiento;
• v-pre: Omita el proceso de compilación del nodo donde se encuentra v-pre, puede usarlo para omitir: los nodos que no usan sintaxis de instrucciones o sintaxis de interpolación acelerarán la compilación

Directiva personalizada :

1. Instrucciones locales:

new Vue({
    
    															
  directives:{
    
     
    指令名:配置对象 
  }   
})

new Vue({
    
    															
  directives:{
    
     
    指令名:回调函数 
  }   
})

2. directiva mundial

Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)


Vue.directive('fbind', {
    
    
    // 指令与元素成功绑定时（一上来）
    bind(element, binding) {
    
    	// element就是DOM元素，binding就是要绑定的
      element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element, binding) {
    
    
      element.focus()
    },
    // 指令所在的模板被重新解析时
    update(element, binding) {
    
    
      element.value = binding.value
    }
})

3. Ciclo de vida de Vue

• El ciclo de vida también se conoce como función de devolución de llamada del ciclo de vida, función del ciclo de vida, gancho del ciclo de vida
• Es una función con algunos nombres especiales que Vue nos llama en momentos críticos
• El nombre de la función del ciclo de vida no se puede cambiar, pero el programador escribe el contenido específico de la función de acuerdo con los requisitos.
• Este punto en la función de ciclo de vida es el objeto de instancia de componente o máquina virtual

Después de que Vue completa el análisis de la plantilla y coloca los elementos DOM reales iniciales en la página (el montaje está completo), llama al montaje;

Proxy de datos y monitoreo de datos: antes y después de la creación;
DOM virtual: a punto de montarse y completarse;
modelo->vista: a punto de actualizarse y completarse;
todo: a punto de destruirse y completarse.

4. Conceptos básicos de los componentes

Un componente es una colección de código y recursos utilizados para implementar funciones locales.
Los componentes nos permiten dividir la interfaz de usuario en partes independientes y reutilizables y pensar en cada parte por separado. En aplicaciones prácticas, los componentes a menudo se organizan en una estructura de árbol anidado:

Ventajas : Reutilizar la codificación, simplificar la codificación del proyecto y mejorar la eficiencia operativa.

Componentes que no son de un solo archivo: un archivo contiene n componentes
Componentes de un solo archivo: un archivo contiene solo un componente, sufijo.vue

Uso de componentes que no son de un solo archivo : (no recomendado)

crear :

const 组件名 = Vue.extend({
    
    options})

• No escriba el en el elemento de configuración, porque al final todos los componentes deben ser administrados por una máquina virtual, y el en la máquina virtual determina qué contenedor servir
• los datos deben escribirse como una función para evitar una relación de referencia de datos cuando se reutilizan los componentes

Registrarse :

//局部注册
new Vue({
    
    
el:'',
data:{
    
    },
components:{
    
    组件名:组件}
})
//全局注册
Vue.component('组件名',组件)

Las etiquetas de cierre automático solo se pueden manejar en andamios. Si escribe la plantilla directamente en el DOM (como el contenido de los elementos nativos), la compilación de la plantilla debe seguir el comportamiento de análisis de HTML en el navegador y debe usar explícitamente la etiqueta de cierre.

Componente Vue :

• El componente de la escuela es esencialmente un constructor llamado VueComponent, que no está definido por el programador, sino generado por Vue.extend()
• Solo necesitamos escribir o, cuando Vue analiza, nos ayudará a crear un objeto de instancia del componente de la escuela, es decir, el nuevo VueComponent (opciones) que Vue nos ayudará a ejecutar.
• Cada vez que se llama a Vue.extend, se devuelve un nuevo VueComponent, es decir, diferentes componentes son objetos diferentes
• En la configuración del componente, la función de datos, la función en los métodos, la función en el reloj y la función en el calculado son todos objetos de instancia de VueComponent.
• En la nueva configuración de Vue (opciones): función de datos, funciones en métodos, funciones en observación, funciones en computado, todos estos son objetos de instancia de Vue
• El objeto de instancia de VueComponent, en adelante denominado vc (objeto de instancia de componente) el objeto de instancia de Vue, en adelante denominado vm
• VueComponent.prototype.proto === Vue.prototype, para que el objeto de instancia de componente vc pueda acceder a las propiedades y métodos en el prototipo de Vue

Componente de archivo único :

• La denominación adopta el método de denominación joroba;
• Debe haber uno y solo un elemento raíz en la plantilla;

1. Cree un archivo vue: etiqueta de plantilla (estructura), etiqueta de script (interacción), etiqueta de estilo (estilo), preste atención a la exposición predeterminada de exportación y escriba el nombre.

<template>
  <button @click="count++">You clicked me {
    
    {
    
     count }} times.</button>
</template>
<script>
export default {
    
    
  name:'组件名',
  data() {
    
    
    return {
    
    
      count: 0
    }
  }
}
</script>

2. Uso: introducir componentes, registrar y usar etiquetas;

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
    
    
  components: {
    
    
    ButtonCounter
  }
}
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />使用
</template>

Presente la estructura general del proyecto vue :

1. Prepare el archivo vue de componente de archivo único diseñado por usted mismo;
2. Cree APP.vueun archivo y llame al componente;
3. Luego crea main.js y llama a App.vue;
4. Cree index.html e importe main.js.

Si no desea escribir nada en main.js, puede escribirlo de la siguiente manera:

new Vue({
    
    
    template:`<App></App>`,
    el:'#root',
    components:{
    
    App}
})

5. Andamiaje CLI de Vue

Función de renderizado (función de renderizado): use el lenguaje js para construir DOM, porque vue es un DOM virtual, por lo que cuando obtiene la plantilla de plantilla, debe traducirse a una función VNode, y use la función de renderizado para construir DOM, y vue lo hace no es necesario traducir el proceso. Al introducir vue incompleto, use render. La función de representación es la misma que la plantilla para crear una plantilla html, pero en algunos escenarios, el código es tedioso y engorroso de implementar con muchas repeticiones, y la función de representación se puede usar en este momento.

new Vue({
    
    
  el:'#app',
  // render函数功能：将App组件放入容器中
  // 简写形式
  render: h => h(App),
  // 完整形式
  // render(createElement){
    
    
  //   return createElement(App)
  // }
})

6. Los componentes profundizan

atributo de referencia :

• ref se utiliza para registrar información de referencia (reemplazo de id) para elementos o subcomponentes.La aplicación obtiene el elemento DOM real en la etiqueta html, y la aplicación obtiene el objeto de instancia del componente vc en la etiqueta del componente.
• Uso
  a: marcar: <h1 ref="xxx"></h1>o <School ref="xxx"></School>
  b: obtener:this.$refs.xxx

elemento de configuración de accesorios :

• Deje que el componente reciba datos del exterior;
• los accesorios tienen mayor prioridad que los datos
• <Demo name="xxx" :age="18"/>Agregue la edad antes de pasar los datos :y convierta el 18 en un número a través de v-bind
• Recibir datos
  La primera forma (solo recibir) accesorios: ['nombre', 'edad']
  La segunda forma (tipo de restricción) accesorios: {nombre:Cadena, edad:Número}
  La tercera forma (tipo de restricción, propiedades necesarias de la restricción, especificar un valor predeterminado)

props: {
    
    
    name: {
    
    
        type: String,	 // 类型
        required: true,// 必要性
        default: 'cess'// 默认值
    }
}

Nota: los accesorios son de solo lectura. La capa inferior de Vue controlará sus modificaciones a los accesorios. Si modifica los accesorios, se emitirá una advertencia. Si el negocio realmente necesita ser modificado, copie el contenido de los accesorios a los datos, y luego modificar los datos.Los datos.

mixin :
Función: la configuración compartida por varios componentes se puede extraer en un objeto mixto.
Cuando los datos y los métodos entran en conflicto, los componentes tienen prioridad; se requieren todos los ganchos del ciclo de vida. Los ganchos para mixins se llamarán antes que los propios ganchos del componente.
definición:

const mixin = {
    
    
    data() {
    
    ....},
    methods: {
    
    ....}
    ....
}

usar:

• mezclas globalesVue.mixin(xxx)
• mezcla parcialmixins:['xxx']

7. Complementos

Función: se utiliza para mejorar
la esencia de Vue: un objeto que contiene el método de instalación, el primer parámetro de instalación es Vue, y el segundo parámetro y los subsiguientes son los datos pasados ​​por el usuario del complemento.
Algunas operaciones globales se pueden escribir en él.
Defina el complemento:

export default {
    
    
  install(Vue,x,y,z){
    
    }
}

Usar complemento: Vue.use (nombre del complemento, datos)

8. estilo con alcance

Función: Deje que el estilo surta efecto localmente para evitar conflictos
Método de escritura:<style scoped>

9. Almacenamiento local del navegador

El tamaño del contenido de almacenamiento de WebStorage (almacenamiento local js)
generalmente admite alrededor de 5 MB (diferentes navegadores pueden no ser iguales). El
lado del navegador implementa el mecanismo de almacenamiento local a través de las propiedades Window.sessionStorage y Window.localStorage.
API relacionada
xxxStorage.setItem ('clave ', 'valor') Este método acepta una clave y un valor como parámetros, y agregará el par clave-valor al almacenamiento. Si la clave existe, actualice su valor correspondiente xxxStorage.getItem('clave') Este método acepta una
clave como parámetro, devuelve el valor correspondiente al nombre de clave
xxxStorage.removeItem('key') Este método acepta un nombre de clave como parámetro y elimina el nombre de clave del almacenamiento
xxxStorage.clear() Este método borrará todos los datos en el almacenamiento

Observación

• El contenido almacenado en SessionStorage desaparecerá cuando se cierre la ventana del navegador
• El contenido almacenado en LocalStorage debe borrarse manualmente antes de que desaparezca
• xxxStorage.getItem(xxx) Si no se puede obtener el valor correspondiente a xxx, el valor de retorno de getItem() es nulo
• El resultado de JSON.parse (null) sigue siendo nulo

10. Interacción entre componentes

Si el componente secundario desea pasar datos al componente principal, debe vincular un evento personalizado al componente secundario en el componente principal (la devolución de llamada del evento está en A).

1. Vincular eventos personalizados

• La primera forma, en el componente padre <Demo @事件名="方法"/>o<Demo v-on:事件名="方法"/>
• La segunda forma, en el componente principal montadothis.$refs.demo.$on('事件名',方法)

2. Transferir datos: accesorios
3. desencadenar un evento personalizadothis.$emit('事件名',数据)
4. Desvincular eventos personalizadosthis.$off('事件名')

componente padre:

<!--传一个函数类型的props数据-->
<School :getSchoolName="getSchoolName"/>

  <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用@或v-on） -->
  <Student @demo="m1"/> 

    <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第二种写法，使用ref） -->
    <Student ref="student" @click.native="show"/> 
<script>
  import Student from './components/Student'
  import School from './components/School'

  export default {
      
      
    name:'App',
    components:{
      
      School,Student},
    data() {
      
      
      return {
      
      
        msg:'你好啊！',
        studentName:''
      }
    },
    methods: {
      
      
      getSchoolName(name){
      
      
        console.log('App收到了学校名：',name)
      },
      m1(){
      
      
        console.log('demo事件被触发了！')
      },
      show(){
      
      
        alert(123)
      }
    },
    mounted() {
      
      
      this.$refs.student.$on('demo',this.m1) // 绑定自定义事件
      // this.$refs.student.$once('demo',this.m1) // 绑定自定义事件（一次性）
    },
  }
</script>

Subensamblaje:

<h2>当前求和为：{
    
    {
    
    number}}</h2>
<button @click="add">点我number++</button>
<button @click="unbind">解绑自定义事件</button>
<button @click="death">销毁当前Student组件的实例(vc)</button>
<script>
	export default {
    
    
		name:'Student',
		data() {
    
    
			return {
    
    
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods: {
    
    
			add(){
    
    
			//父组件中的自定义事件名与数据
	 	this.$emit('atguigu',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
    
    
        // 解绑
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
    
    
        // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效
				this.$destroy()
			}
		},
	}
</script>

11. Autobús de eventos globales

Una forma de comunicarse entre componentes arbitrarios es esencialmente un objeto que debe satisfacer las siguientes condiciones:

• Todos los objetos componentes deben poder verlo.
• Este objeto debe poder $on $emit $offvincular, activar y desvincular eventos utilizando métodos

Pasos para usar :

1. Defina el bus de eventos global en main.js

new Vue({
    
    
   	...
   	beforeCreate() {
    
    
   		Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm
   	},
    ...
})

2. Use el bus de eventos
   a: Recibir datos: un componente desea recibir datos, luego vincula un evento personalizado a $bus en un componente A, y la devolución de llamada del evento permanece en el componente A mismo

export default {
    
    
    methods(){
    
    
        demo(data){
    
    ...}
    }
    ...
    mounted() {
    
    
        this.$bus.$on('xxx',this.demo)
    }
}

b: proporcionar datos:this.$bus.$emit('xxx',data)

3. En el anzuelo beforeDestroy, use $off() para desvincular los eventos usados ​​por el componente actual

12.$siguienteMarca

Este es un enlace de ciclo de vida this.$nextTick (función de devolución de llamada) ejecuta
su devolución de llamada especificada después de la próxima actualización de DOM.

this.$nextTick(function () {
    
    
        this.$refs.inputTitle.focus();
      });

13. Transiciones y Animaciones

Para ser agregado

14. Configurar proxy

Para resolver el problema de dominio cruzado :

1. corazones
2. jsonp
3. Configure el servidor proxy: el número de puerto en sí es el mismo que el del servidor proxy, y no hay ningún problema entre dominios en la interacción entre el servidor proxy y el servidor porque los métodos de solicitud son diferentes.

Cómo configurar el servidor proxy :

Archivo de configuración vue.config.js:
Método 1 :

module.exports = {
    
    
  devServer:{
    
    
    proxy:"http://localhost:5000"
  }
}

ilustrar

• Ventajas: configuración simple, solo envíelo directamente al front-end (8080) al solicitar recursos
• Desventajas: no se pueden configurar varios servidores proxy y no es posible controlar de manera flexible si las solicitudes pasan por servidores proxy.
• Método de trabajo: si el agente está configurado de acuerdo con lo anterior, cuando se solicita un recurso que no existe en el front-end, la solicitud se reenviará al servidor (los recursos de front-end coincidentes primero)

Método dos :

module.exports = {
    
    
    pages: {
    
    
        index: {
    
    
            entry: 'src/main.js',
        },
    },
    lintOnSave:false,
    //开启代理服务器（方式二）
	devServer: {
    
    
        proxy: {
    
    
            '/api1': {
    
    //请求前缀          
                target: 'http://localhost:5000',
                pathRewrite:{
    
    '^/api1':''},//重写，把api1去掉
                // ws: true, //用于支持websocket,默认为true
                // changeOrigin: true //用于控制请求头中的host值,默认值为true
            },
            '/api2': {
    
    
                target: 'http://localhost:5001',
                pathRewrite:{
    
    '^/api2':''},
            }
        }
    }
}

15. Tragamonedas

Ranuras: permite que el componente principal inserte la estructura html en la posición especificada del componente secundario. También es una forma de comunicación entre componentes, que es
adecuada para componentes principales ===> componentes secundarios.
Clasificación: ranuras predeterminadas, ranuras con nombre, ranuras con alcance

Ranura predeterminada :

componente padre:

<Category title="美食" >
<!-- 自己写结构，插进去-->
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

Subensamblaje:

<div class="category">
		<h3>{
   
   { title }}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>

Tragamonedas con nombre :

componente padre:

<Category title="美食" >
			<img slot="conter" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

Subensamblaje:

<div class="category">
		<h3>{
   
   {title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

Ranuras con alcance : los datos están determinados por componentes secundarios y la estructura está determinada por componentes principales.

componente padre:

<Category title="游戏">
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{
    
    {
    
    g}}</li>
				</ul>
			</template>
		</Category>

Subensamblaje:

<div class="category">
		<h3>{
    
    {
    
    title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>