Notas de estudio de Vue-dos: características comunes de Vue

Características comunes de Vue

Operación de formulario

Operación de formulario basada en Vue

• ingresar una sola línea de texto
  • Enlace bidireccional a través del modelo v
• textarea texto de varias líneas
• seleccionar selección múltiple desplegable
• radio radio
• casilla de verificación casilla de verificación

Modificador de campo de formulario

• número: convertido a un valor numérico (el valor predeterminado es una cadena)
• recortar: eliminar los espacios al principio y al final
• perezoso: cambia el evento de entrada para cambiar el evento

 <div id="app">
        <!-- <input type="text" name="" id="" v-model="age"> -->
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='trimc'>
        <input type="text" v-model.lazy='changet'>
        <div>{
    
    {
    
    changet}}</div>
        <input type="submit" value="点击" @click="handle">
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                age: '',
                trimc: '',
                changet: ''
            },
            methods: {
    
    
                handle(){
    
    
                    console.log(this.age);
                    console.log(this.trimc);
                    console.log(this.changet);
                }
            }
        });
    </script>

Instrucción personalizada

1. ¿Por qué necesitas instrucciones personalizadas?

   Las instrucciones integradas no satisfacen la demanda

2. Reglas de sintaxis para instrucciones personalizadas (obtener el foco del elemento)

   Vue.directive('focus' ,{
        inserted: function(el){
            //获取元素的焦点
            el.focus();
        }
    })
   

3. Uso de instrucciones personalizadas

<div id="app">
        <input type="text" v-focus>
    </div>
    <script>
        Vue.directive('focus' ,{
    
    
            inserted: function(el){
    
    
                //获取元素的焦点
                el.focus();
            }
        })
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    },
            methods: {
    
    }
        });
    </script>

Parámetros de la función de gancho

• el: El elemento vinculado por la instrucción, que se puede usar para manipular directamente el DOM
• vinculante: un objeto que contiene:
  • name: nombre del comando, excluyendo v-, prefijo
  • valor: el valor vinculante de la instrucción,
  • oldValue: el valor anterior vinculado por la instrucción

Instrucción local

Agregue una instrucción adicional.

directives: {
	focus: {
		//指令的定义
		inserted: function(el){
			el.focus()
		}
	}
}

Atributos calculados

La lógica de cálculo de la expresión puede ser más complicada y el uso de atributos calculados puede hacer que el contenido de la plantilla sea más conciso.

computed:{
	reversedMessage: function(){
		return this.msg.split('').reverse().join('')
	}
}

La diferencia entre propiedades y métodos calculados

• Los atributos calculados se almacenan en caché en función de sus dependencias
• El método no existe en la caché

<div id="app">
        <input type="text" v-model="msg" name="" id="">
        <div>{
    
    {
    
    reversed}}</div>
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg:""
            },
            methods: {
    
    },
            computed:{
    
    
                reversed: function(){
    
    
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    </script>

filtrar

El papel de los filtros

Formatee los datos, como formatear una cadena para poner en mayúscula la primera letra y convertir el formato de fecha a un formato especificado.

Definición de filtro

Vue.filter('过滤器名称', function(value){
	//过滤器业务逻辑
}

Uso de filtros

//upper:过滤器得名称 
<div>{
   
   {msg | upper}}</div>
<div>{
   
   {msg | upper | lower}}</div>
<div v-bind:id | formatId></div>

Filtro local

filters:{
	capitalize: function(){}
}

<div id="app">
        <input type="text" v-model="msg">
        <div>{
    
    {
    
    msg | upper}}</div>
        <div>{
    
    {
    
    msg | upper | lower}}</div>
        <div :upp="msg | upper" >{
    
    {
    
    msg}}</div>
    </div>
    <script>
        Vue.filter('upper', function(val){
    
    
            return val.toUpperCase();
        });
        Vue.filter('lower', function(val){
    
    
            return val.toLowerCase();
        })
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg: ''
            },
            methods: {
    
    },
        });
    </script>

Oyente

El oyente se usa para monitorear datos, y cuando los datos cambian, notificará el método vinculado al oyente.

Escenarios de aplicación

Realice operaciones asincrónicas o costosas cuando cambien los datos

(Hay similitudes con los atributos calculados)

watch: {
	//方法，val表示当前数据的最新值
	firstName: function(val){
		this.fullName = val + this.lastName;
	},
	lastName: function(val){
		this.fullName = this.firstName + val;
	}
}

Caso de estudio

Verifique que el nombre de usuario esté disponible

Requisito: Ingrese el nombre en el cuadro de entrada y verifique si existe cuando se pierde el foco. Si ya existe, solicite volver a ingresarlo, si no existe, se puede usar la solicitud.

operando:

1. Realice el enlace de datos a través del modelo v

2. Deben proporcionarse recordatorios

3. Se requiere un oyente para monitorear los cambios en la información de entrada.

4. Necesita modificar el evento desencadenado

<div id="app">
        用户名：<input type="text" v-model.lazy="msg">
        <div>{
    
    {
    
    tip}}</div>
    </div>
    <script>
        let vm = new Vue({
    
    
            el: "#app",
            data: {
    
    
                msg: '',
                tip: ''
            },
            methods: {
    
    
                checkname: function (uname) {
    
    
                    //调用接口，可用定时任务模拟接口调用
                    let that = this;
                    setTimeout(function () {
    
    
                        //模拟接口调用
                        if (uname == 'admin') {
    
    
                            that.tip = '用户名已经存在'
                        }else{
    
    
                            that.tip = '可以注册'
                        }
                    },2000)
                }
            },
            watch: {
    
    
                msg: function (val) {
    
    
                    //调用后台接口验证用户名的合法性
                    this.checkname(val);
                    this.tip = "正在验证。。。"
                }
            }
        });
    </script>

Oyente

1. Utilice un oyente para supervisar los cambios de nombre de usuario.

2. Llame a la interfaz en segundo plano para verificación

3. Ajuste la información de la solicitud de acuerdo con el resultado de la verificación.

Ciclo de vida (función de gancho de ciclo de vida)

Escenario principal

• Montar (inicializar propiedades relacionadas)
  1. antesCrear
  2. creado
  3. beforeMount
  4. montado
• Actualizar (cambiar la operación del elemento o componente)
  1. beforeUpdate
  2. actualizado
• Destruir (destruir atributos relacionados)
  • antes de destruir
  • destruido

<div id="app">
        <input type="text" name="" id="" v-model="msg">
        <button @click="destroy">销毁</button>
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg: ""
            },
            methods: {
    
    
                destroy: function(){
    
    
                    this.$destroy();
                }
            },
            beforeCreate() {
    
    
                console.log("beforeCreate...");
            },
            created() {
    
    
                console.log("create...");
            },
            beforeMount(){
    
    
                console.log("beforeMount...");
            },
            mounted(){
    
    
                console.log("mounted...");
            },
            beforeUpdate(){
    
    
                console.log("beforeUpdate...");
            },
            updated(){
    
    
                console.log("updated...");
            },
            beforeDestroy(){
    
    
                console.log("beforeDestroy...");
            },
            destroyed(){
    
    
                console.log("destroyed...");
            },
        });
    </script>

Diagrama de ciclo de vida

[Imagen del sitio web oficial]

Destruir es liberar algunos recursos

montado: indica que la inicialización se ha completado y la plantilla ya existe.

El proceso de generar instancias de Vue

• beforeCreate se llama después de que se inicializa la instancia y antes de la observación de datos y la configuración del evento
• created se llama inmediatamente después de que se crea la instancia
• beforeMount se llama antes del inicio del montaje
• El el montado se reemplaza por el vm. $ El recién creado, y se llama al ejemplo después de montarlo en la instancia.
• beforeUpdate se llama cuando se actualizan los datos, lo que ocurre antes de que se parchee el DOM virtual
• actualización y parcheo de DOM virtual actualizado debido a cambios en los datos, llame después de esto
• beforeDestroy se llama antes de que se destruya la instancia
• Llamado después de que se destruye la instancia destruida