[Objeto de instancia de Vue] cinco minutos para aprender a configurar las opciones de configuración del objeto

Tabla de contenido

prefacio

1. métodos

2. Propiedades calculadas por computadora

Tres, mira

cuatro, filtro


prefacio

Sabemos que cada aplicación de proyecto de Vue crea un nuevo proyecto de Vue a través del constructor de Vue. El objeto de configuración para crear una instancia de vue puede incluir las siguientes opciones de atributos, como: datos, métodos, reloj, plantilla, etc. Cada opción tiene diferentes funciones y puede elegir diferentes configuraciones según sus propias necesidades.

1. métodos

    La función llamada por el evento general se definirá en los atributos de la función de métodos.La función definida en el atributo de métodos también se puede llamar método, que generalmente se usa como la función de devolución de llamada del evento. Esto se llama varias veces y se puede ejecutar varias veces.

Podemos entender mejor nuestro ejemplo a través del código de ejemplo:

Código de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格:<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量:<input type="text" v-model="count" @change="sum()">斤</br>
总计:<input type="text" v-model="total" >元</br>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
     total:0,
    },
    methods:{
sum(){
    this.total = this.price*this.count;
}
    }
})
    </script>
</body>

</html>

resultado de la operación:

Podemos ver que cuando la cantidad y el precio cambian, necesitamos recalcular el dinero total. En este momento, necesitamos monitorear los cambios en el precio y la cantidad, para poder calcular el precio total, porque los atributos ya están definidos en métodos El método de cálculo de sum y la fórmula de cálculo de sum se llaman cuando se llaman los dos activadores de cambio y keyup. Los datos serán cambiados, para que el código ejecute el método de cálculo en la suma.

2. Propiedades calculadas por computadora

    ¿Por qué existe esta propiedad calculada? Porque en vue, para simplificar la lógica, cuando un valor depende demasiado de otros valores de atributo, vue proporcionará propiedades calculadas para el uso del código. Esta propiedad calculada es adecuada para ejecutar expresiones complejas que suelen ser largas y tediosas de reutilizar.

   Puede escribir propiedades calculadas directamente y llamar a propiedades calculadas de la misma manera que otras propiedades.

Código de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格:<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量:<input type="text" v-model="count" @change="sum()">斤</br>
总计:<input type="text" v-model="total" >元</br>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
    },
    computed:{
total:function(){
    return this.price*this.count
}
    }
})
    </script>
</body>

</html>

 resultado de la operación:

El resultado de retorno de la función de la propiedad calculada se puede asignar directamente al nombre de la propiedad calculada. La propiedad calculada se puede volver a calcular solo cuando los datos dependientes cambian. Si los datos dependientes no cambian, el resultado del primer cálculo se almacenará en caché. .utilizado directamente.

Tres, mira

   Watch se puede usar para monitorear los cambios en las propiedades de los objetos de datos o las propiedades computadas. Se usa para escuchar los cambios en los datos. Cuando los datos cambian, puede procesar algunas transacciones.

   El valor de watch es un objeto, la propiedad del objeto es la propiedad a monitorear, la expresión a observar, y su valor es el valor de una devolución de llamada, nombre de método u objeto.

Código de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
水果价格:<input type="text" v-model.munber="price" >元/斤</br>
数量:<input type="number " v-model="count" >斤</br>
总计:<input type="text" v-model="total" >元</br>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    data:{
     price:0,
     count:1,
     total:0,
    },
watch:{
    "price":function(newVal,oldVal){
        return this.data=newVal*this.count;
    },
    "count":function(newVal,oldVal){
        return this.total = this.price*newVal;
    }
}
})
    </script>
</body>

</html>

resultado de la operación:

 El proceso de escucha es: cuando se llama al reloj, cada propiedad del objeto dentro, cuando cambia el valor de una propiedad monitoreada, se ejecutará la función de devolución de llamada que activa esta propiedad.

  Cuando los totales dependen del precio y la cantidad, cuando el precio y la cantidad cambian, los totales también cambian. Escuche el precio y la cantidad, y sume los cambios. Diferencia entre escuchar y propiedades calculadas: las propiedades calculadas guardan el resultado, pero escuchar no.

cuatro, filtro

   Este filtro se denomina filtro en vue, que puede filtrar datos antes de generar resultados y puede usarse para algunos formatos de texto comunes. Filtro: un método conveniente para el procesamiento de datos dentro de una plantilla, adecuado para configurar formatos de visualización como cadenas, números, números, etc.

  Sintaxis del filtro: vue.filter('filter name', function (parámetro) {function body}), el filtro solo se llama en las expresiones de diferencia y v-bind, y se agrega al final de la expresión, usando "|" separar. Código simple para explicar:

Ejemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h1>{
   
   {sum|f_int}}</h1>
<h1>{
   
   {sum|f_int|f_$('$')}}</h1>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.filter('f_int',function(msg){
            return Math.round(msg);
        })
        Vue.filter('f_$',function(msg,arg1){
            return arg1+msg;
        })
var app = new Vue({
    el:'#app',
    data:{
sum:86
    },

})
    </script>
</body>

</html>

resultado de la operación:

Supongo que te gusta

Origin blog.csdn.net/Lushengshi/article/details/126453859
Recomendado
Clasificación