Acabado básico Vue 1

Diagrama de la relación entre MVC y MVVM

1. mvc (pensamiento de back-end)

2. mvvm (pensamiento frontal)

Instrucciones simples

1.v-capa

<div v-cloak>{ { msg }}</div>
Resuelve el problema de parpadeo de las expresiones de interpolación ({ {}} que aparece cuando la página se actualiza y carga.
$\ color {red} {Nota: estilo coincidente [v-cloak] {dislpay: none }}$
**

No analizar etiquetas

Solo reemplace los marcadores de posición, no sobrescriba el contenido original

2. texto-v

<div v-text = "msg"></div>

Sin problemas de parpadeo por defecto

Anular el contenido del elemento

No analizar etiquetas

3.v-html

<div v-html= "msg"></div>

Sobrescribir el contenido del elemento

Analizará etiquetas

4.v-bind: (abreviado como ':')

<input type='button' v-bind:title='mytitle'></div>
Atributos de enlace, enlace de datos unidireccional. Cuando
no se agrega v-bind, 'mytitle' se considera una cadena y, una vez que se agrega, es una variable o una expresión js legal

5.v-on: (abreviado '@')

Evento vinculado

Click: v-on: click = 'Nombre del método' ------- @ click

Flotante: v-on: mouseover = 'nombre del método' ------- @ mouseover

Dejar: v-on: mouseout = 'nombre del método' ------- @ mouseout

Touchstart móvil, touchmove, touchmove ...

6. Modificador de eventos

Escrito después del nombre del evento vinculante: como @ click.stop

.stop: deja de burbujear

.prevent: evita el comportamiento predeterminado

.capture: Cambiar a captura de eventos

.self: el evento activa una devolución de llamada cuando se activa el elemento en sí

.once: disparar solo una vez

7. Modelo v de instrucción de enlace bidireccional de datos

<input type ='text' v-module = '属性名'>
$\ color {rojo} {Nota: solo se aplica a los elementos del formulario}$

8.v-for loop traversal

<p v-for = '(值, 索引) in 数组名/对象名' :key=''></p>

El valor de la clave solo puede ser tipo srting o number

Especifique el valor de la clave en forma de atributos vinculantes

9.v-if 、 v-show

<p v-if = '条件'></p>
<p v-show = '条件'></p>

v-if eliminar o crear elemento

Alto consumo de rendimiento de conmutación, si los elementos deben conmutarse con frecuencia, v-if no es aplicable

v-show oculta o muestra elementos, lo que equivale a cambiar el valor de visualización => 'ninguno'

Hay un alto costo de renderización inicial. Si no es necesario mostrar el elemento, v-show no es aplicable

filtrar

Usado como un formato de texto común, se puede usar en: interpolación de bigote y expresión v-bind;
{ {msg | nombre del filtro (parámetro de paso)}} ===> Después de procesar los datos a través del filtro, vuelva Muestra el nombre;
'|' => carácter de tubería; la
llamada de filtro adopta el principio de proximidad, cuando el filtro global y el filtro privado tienen el mismo nombre, se prefiere el filtro privado;

1. Filtro global

Todas las instancias de
VM son compartidas Definición: Vue.filter ('nombre de filtro', función (msg, arg) {// procesamiento de datos})
Ubicación de la definición: Defina fuera de la instancia de VM
Parámetros:

msg: los datos antes del carácter de tubería

arg: parámetro recibido

2. Filtro privado (parcial)

Ubicación de la definición: dentro de vm, filtros: {}, al mismo nivel
que los métodos Definición: filters:{ 过滤器名称(管道符前数据，接受的参数) {}}
"========="
(pequeño conocimiento): string.padStart (2, '0') se usa para complementar el dígito único cero

Instrucción personalizada

El nombre del comando personalizado comienza con 'v-'

1. En general

Definición: Vue.directive ('¿Comando personalizado?', {})
Parámetro 1: al definir el nombre del comando, el nombre del comando personalizado no tiene el prefijo 'v-', y el
parámetro 2: Objeto, hay algunos en el objeto Funciones relacionadas con la instrucción, realizan las operaciones correspondientes en una etapa específica
Ejemplo: evento de enfoque
<input type='text' v-focus>
Vue.directive('focus', {
每个函数第一个参数为 el，表示被绑定指令的元素，此时可使用原生的方法
	bind:function(el){ //指令绑定到元素上时执行，仅一次
		el.focus() //元素还未插入到DOM 中,不生效
		//多为与样式相关的操作
	}
	inserted:function(el){ //元素插入到 DOM 中的时候执行，仅一次
		el.focus() //元素已经插入到DOM 中，生效
		//多为与js相关的操作
	}
	updated:function(){ //VNode 更新时执行,可能触发多次

	}
})
Parámetros relacionados con la función

2. Privado

Ubicación de la definición: definida en la instancia de vm, al mismo nivel
que los métodos Definición: directives: {'自定义指令名': {相关函数}}
abreviatura de función (global / privada):

Ciclo de vida de la instancia

Las funciones del ciclo de vida están al mismo nivel que los métodos

**html:**
<div id='app'>
	<input type='button' value='改变msg' @click="msg='No'">
	<p id='p'>{
    
    { msg }}</p>
</div>
**js:**
var vm = new Vue({
	el: '#app',
	data: {
		msg: 'ok'
	},
	methods: {
		show() { console.log('执行了show方法') }
	},
})

***创建期间的生命周期函数***
beforCreate(){ //实例被完全创建之前执行
	//在这个生命周期内，data 和 methods 中的数据未初始化
	console.log(this.msg); //undefined
	this.show()  //报错，this.show() is not a function
}

created() {
	//在这个生命周期内，data 和 methods 中的数据初始化完成
	//可调用 methods 中的方法和操作 data 中的数据
	console.log(msg) //ok
	this.show() //执行了show方法
}

beforeMount() { //模板在内存中编译完成，还未渲染到页面中
	//在这个生命周期内，页面中的元素未被替换，还是原来写好的模板字符串
	console.log(document.getElementById('p').innerHtml) //{
    
    { msg }}
}

mounted() { 实例创建期间的最后一个生命周期函数
	//将编译好的内存中的模板挂在到页面中
	console.log(document.getElementById('p').innerHtml) //ok
}

***组件运行阶段的生命周期函数***
beforeUpdate() {  //界面还未被更新，但数据已被更新
	//组件/数据被改变时触发
	//例：当点击input按钮时：
	console.log(document.getElementById('p').innerHtml) // ok ===>页面未更新
	console.log(this.msg) // No ===>数据已经改变
}
undaated(){ //页面与数据都已更新
	//组件/数据被改变时触发
	//例：当点击input按钮时：
	console.log(document.getElementById('p').innerHtml) // No ===>页面已更新
	console.log(this.msg) // No ===>数据已经改变
}

***组件销毁阶段的生命周期函数***
beforeDestroy() {
	//还未执行销毁过程
}
destroyed() {
	//组件被完全销毁，此时组件中所有的数据、方法、指令、过滤器等 都不可用
}

Animación

Envuelva los elementos que necesitan animación con etiquetas.
Estilo:
v-enter, v-leave-to {} ——> Ingrese y deje
v-enter-active, v-leave-active {} ——> Animación del proceso intermedio
Inserte la descripción de la imagen aquí
Haga clic para ver: vue Introducción detallada de la animación

Componentes

Definición: divida la cantidad de código de la instancia de vue, divida los diferentes componentes en diferentes módulos funcionales y llámelos cuando sea necesario

1. Crea globalmente

<div id='app'>
	<my-com1></my-com1>//引用组件
</div>
<template id='tmp1'>
	<div> //根元素
		<p>创建的组件</p>
	</div>
</template>

****Vue.component('组件名称', { //创建的组件模板对象 })****
Vue.component('myCom1', {
	template: '#tmp1'
}) 
注：
	1.若组件名称使用驼峰命名时，调用时用小写，并且单词之间‘-’连接，若未使用驼峰命名，则直接引用组件名；
	2.常见的模板对象必须有一个根元素包裹

2. Creación parcial (privada)

Dentro de la instancia, al mismo nivel que los métodos

components: { //定义实例内部私有组件
	组件名: {
		template: ''
	}
}

3. Datos y métodos en el componente

Vue.compontent('com1', {
	template: '',
	data: function() {
		return {}
		//组件中的 data 为一个函数，且必须 return 一个对象
	},
	methods: {}
})

4. Cambio de componentes

<component :is="'组件名'"></component>

5. Valor de paso del componente

1. Padre a hijo

<div id='#app'>
	<com1 :parentmsg='msg' v-on:func='show'></com1>
</div>

<template id='son'>
	<div>
		<input type='button' value='点击调用父组件传递的方法' @click=‘parentfunc’>
		<p>子组件---{
    
    { parentmag }}</p>
	</div>
</template>

var vm = new Vue({
	el: '#app',
	data: {
		msg: '父组件数据'
	},
	methods: {
		show() {
			console.log('调用了父组件方法')
		}
	},
	//定义子组件：
	components: {
		com1: {
			template: '#son',
			props: ['parentmsg'], //将父组件传递的parentmsg属性在props数组中定义，然后才能使用，但是不做更改
			methods: {
				parentfunc() {
					this.$emit(‘func’)
				}
			}
		}
	}
})
总结：
	（1）在父组件调用子组件的地方，绑定一个自定义属性，属性值为要传递的数据，在子组件定义的地方通过props数组接收
	（2）若调用父组件的方法，在父组件调用子组件的地方，使用事件绑定方式，自定义事件名,在子组件的方法中，通过this.$emit('方法名')调用父组件方法

2. El niño pasa el
método principal al componente principal a través del componente secundario. Los datos que se pasarán al componente principal se devuelven como un parámetro. En el componente principal, el parámetro se acepta cuando se llama al método. Si el paso es un objeto, está en el componente principal Definir la recepción de variables en los datos