Vue serie ocho: propiedades calculadas, distribución de contenido, eventos personalizados

1. ¿Qué es una propiedad computada?

El enfoque de la propiedad calculada está en 属性dos palabras (la propiedad es un sustantivo), primero es una capacidad (la computación es un verbo), aquí hay una función: en pocas palabras, es una función que puede almacenar en caché los resultados de la computación Atributos ( convertir el comportamiento en atributos estáticos), nada más; ¡piense en ello como un caché! El código de arriba属性计算计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p>currentTime1:{
   
   {currentTime1()}}</p>
    <p>currentTime2:{
   
   {currentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
          message:"pan"
        },
        methods:{
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function(){//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

Nota: las cosas en métodos y computadas no pueden tener el mismo nombre
Descripción:

métodos: defina un método, use currentTime1() para llamar al método, necesita paréntesis
calculado: defina la propiedad calculada, llame a la propiedad usando tiempoActual2, sin paréntesis: este.mensaje cambia para permitir que TiempoActual2 observe los cambios de datos
Cómo cambiar el valor en el método, ¡el caché se actualizará! Puede usarlo en la consola vm.message=”q in jiang", cambiar el valor de los datos y probar el efecto de observación nuevamente.

Conclusión:
al llamar a un método, debe hablar sobre el cálculo cada vez. Dado que hay un proceso de cálculo, habrá una sobrecarga del sistema. ¿Qué sucede si el resultado no cambia con frecuencia? En este momento, puede considerar almacenar el resultado en caché, y el uso de propiedades calculadas puede Es muy conveniente hacer esto La característica principal de la propiedad calculada es almacenar en caché los resultados del cálculo que cambian con poca frecuencia para ahorrar la sobrecarga de nuestro sistema;

8.2 Distribución de contenidos

En Vue.js, usamos el <slot>elemento como la salida para llevar el contenido distribuido, el autor lo llama ranura, que puede usarse en la escena de combinar componentes;

prueba

Por ejemplo, va a crear un componente de tareas pendientes (todo), que consiste en un título de tareas pendientes (todo-title) y un contenido de tareas pendientes (todo-items), pero estos tres componentes son independientes entre sí, ¿cómo funcionan
? El paso es definir un componente de tareas pendientes.

<div id="app">
    <todo></todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                <div>代办事项</div>\
                <ul>\
                    <li>学习狂神说Java</li>\
                </ul>\
            </div>'
    })
</script>

En el segundo paso, debemos vincular dinámicamente el título y el valor del elemento pendiente. ¿Cómo hacerlo? ¡Podemos dejar un hueco!
1- Deja el código de arriba con un slot, el slot

 Vue.component('todo',{
        template:'<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });

2- Defina un componente de título de tareas pendientes llamado todo-title y un componente de contenido de tareas todo-items

Vue.component('todo-title',{
        props:['title'],
        template:'<div>{
   
   {title}}</div>'
    });
   
12345
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item","index"],
        template:"<li>{
   
   {index+1}},{
   
   {item}}</li>"
    });

3- Crea una instancia de Vue e inicializa los datos

 var vm = new Vue({
        el:"#vue",
        data:{
            todoItems:['test1','test2','test3']
        }
    });

4- Inserta estos valores a través de la ranura

<div id="vue">
    <todo>
        <todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items
    </todo>
</div>

Descripción: nuestros componentes todo-title y todo-items se distribuyen en las ranuras todo-title y todo-items del componente todo, respectivamente. El
código completo es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" title="title"></todo-title>
        <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items
    </todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{
   
   {title}}</div>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item","index"],
        template:"<li>{
   
   {index+1}},{
   
   {item}}</li>"
    });

    var vm = new Vue({
        el:"#vue",
        data:{
            title:"秦老师系列课程",
            todoItems:['test1','test2','test3']
        }
    });
</script>
</body>
</html>

8.3 Eventos personalizados

A través del código anterior, no es difícil encontrar que el elemento de datos está en la instancia de Vue, pero la operación de eliminación debe completarse en el componente, entonces, ¿cómo puede el componente eliminar los datos en la instancia de Vue? la transmisión de parámetros y la distribución de eventos están involucradas. Vue es Proporcionamos la función de eventos personalizados para ayudarnos a resolver este problema muy bien. Usando this.$emit('nombre de evento personalizado', parámetros), el proceso de operación es el siguiente:
1- Agregue el objeto de métodos a la instancia de vue y defina un método llamado removeTodoltems

var vm = new Vue({
        el:"#vue",
        data:{
            title_text:"秦老师系列课程",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                //splice（） 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中index
                this.todoItems.splice(index,1);
            }
        }
    });

2- Modifique el código del componente de contenido de tareas pendientes, agregue un botón de eliminación y vincule el evento.

 Vue.component("todo-items",{
        props:["item_p","index_p"],
        template:"<li>{
   
   {index_p+1}},{
   
   {item_p}} <button @click='remove'>删除</button></li>",
        methods:{
            remove:function (index) {
            //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

3- Modifique el código HTML del componente de contenido de tareas pendientes, agregue un evento personalizado, como eliminar, que puede vincularse al método del componente y luego vincularse al método de vue!

<!--增加了v-on:remove="removeTodoItems(index)"自定义事件，该组件会调用Vue实例中定义的-->
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"></todo-items>

Modifique el código anterior para implementar la función de eliminación

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" :title="title_text"></todo-title>
        <!--<todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"></todo-items>-->
        <!--如下为简写-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
<!--1.导入Vue.js-->
<script src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{
   
   {title}}</div>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["item_p","index_p"],
        template:"<li>{
   
   {index_p+1}},{
   
   {item_p}} <button @click='remove_methods'>删除</button></li>",
        methods:{
            remove_methods:function (index) {
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el:"#vue",
        data:{
            title_text:"秦老师系列课程",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

comprensión lógica

8.4, Resumen de entrada de Vue

Núcleo: basado en datos, dividido en componentes

Ventajas: basándose en el desarrollo modular de AngularJS y el Dom virtual de React, el Dom virtual es poner la operación Demo en la memoria para su ejecución;

Propiedades comunes:

v-si
v-otro-si
v-otro
v-para
evento vinculante v-on, abreviatura @
enlace bidireccional de datos v-model
v-bind vincula parámetros a componentes, abreviatura:

Componentización:

Ranura para componentes combinados
Es necesario utilizar eventos de enlace dentro de los componentes.this.$emit("事件名",参数);
Funciones de propiedades calculadas, almacenamiento en caché de datos calculados

Siguiendo el principio de separación de preocupaciones de SoC, Vue es un marco de vista pura y no incluye funciones de comunicación como Ajax Para resolver el problema de comunicación, necesitamos usar el marco Axios para la comunicación asíncrona;

ilustrar

El desarrollo de Vue se basa en NodeJS. El desarrollo real utiliza el desarrollo de andamios de Vue-cli, el enrutamiento de vue-router y vuex para la gestión de estado; Vue UI, generalmente usamos ElementUI (producido por Ele.me) o ICE (producido por Alibaba ) Construyamos rápidamente un proyecto front-end~~

Página web oficial:

https://element.eleme.cn/#/zh-CN
https://ice.work/