[Vue cinco minutos] cinco minutos para comprender los métodos de ejemplo comunes de vue

Tabla de contenido

prefacio

1. Métodos de instancia de Vue y datos de instancia

 1, vm. $ conjunto

2、vm.$eliminar

3、vm.$reloj

2. Métodos y eventos de instancia

1、vm.$on

2, vm.$emitir

3、vm.$una vez

4、vm.$ de descuento

3. Métodos de instancia y ciclo de vida

1、vm.$montar

2、vm.$destruir

3、vm.$nextTick


prefacio

    Antes de comprender los métodos de instancia comunes de Vue, primero debemos comprender sus atributos de instancia de uso común.¿Cuáles son los atributos de instancia de Vue que puede conocer? El editor enumera las propiedades de varias instancias de Vue de uso común aquí. Todos pueden aprender juntos.

  • obtener el elemento montado --vm.$el
  • Obtenga un objeto de opciones de inicialización para la instancia --vm.$options
  • Obtener el objeto de datos observado --vm.$data
  • Un objeto que puede contener todos los elementos DOM e instancias de componentes registrados con el atributo ref

1. Métodos de instancia de Vue y datos de instancia

 1, vm. $ conjunto

Este método de instancia es otro nombre para el método Vue.set. Su función es agregar propiedades. Debido a que vue no tiene forma de detectar las propiedades ordinarias de una nueva función, podemos hacer que vue las detecte usando el método vm.$set.

2、vm.$eliminar

Este método también es un alias para los métodos vue y delete, su función es eliminar los atributos del objeto, Vue elimina atributos a través de este método, que pueden ser detectados.

3、vm.$reloj

Este método de instancia se utiliza para observar el cambio de una expresión o el resultado de un cálculo de función en la instancia. Si hay un cambio, se devolverá la llamada a la función. La función de devolución de llamada obtendrá el valor nuevo y el valor anterior de los parámetros.

Podemos entender esta parte a través de un ejemplo de código:

Ejemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button onclick="addName()">增加</button>
<button onclick="deleteName()">删除</button>
<h3>你想要的东西:{
   
   {goods.name}}</h3>
价格:<input type="text" v-model.number="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 vm = new Vue({
    el:'#app',
    data:{
goods:{},
price:0,
count:1,
total:0
    },

});
function addName(){
    Vue.set(vm.goods,'name','漫画书');
};
function deleteName(){
    if(vm.goods.name){
        vm.$delete(vm.goods,'name');
    }
}
vm.$watch('price',function(newVal,oldVal){
    return this.total = newVal*this.count;
})
vm.$watch('count',function(newVal,oldVal){
    return this.total = newVal*this.price;
})
    </script>
</body>

</html>

resultado de la operación:

 

Cada vez que se presione el botón "Agregar", se mostrará el "cómic" en {{bienes.nombre}}, y cuando se presione "Eliminar", { {bienes.nombre}} se mostrará vacío; cuando Cuando el precio y la cantidad cambian, el precio total también cambia.

2. Métodos y eventos de instancia

1、vm.$on

Este método de instancia se puede usar para escuchar eventos personalizados en la instancia de vue Estos eventos son activados por vm.$emit, y la función de devolución de llamada recibirá todos los parámetros adicionales de la función activada por tiempo entrante.

2, vm.$emitir

Este método de instancia desencadena el evento en la instancia actual y los parámetros adicionales se pasan al detector para la devolución de llamada de la función.

3、vm.$una vez

La función de este método de instancia es escuchar un evento personalizado, pero solo se puede activar una vez. Una vez activado, el oyente se desbordará.

4、vm.$ de descuento

La función de este método de instancia es eliminar un oyente personalizado.

Echemos un vistazo a través del código:

Código de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button @click="zengjia">增加</button>
{
   
   {num}}
<button onclick="jianshao()">减少</button>
<button onclick="off()">解除减少操作事件</button>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
      num:100
    },
    methods:{
        zengjia:function(){
            this.num++;
        }
    }
});
vm.$on("reduce",function(step){
    vm.num =step;
});
function jianshao(){
    vm.$emit("reduce",2);
}
function off(){
    vm.$off("reduce");
}
    </script>
</body>

</html>

 Resultado de ejecución: cada vez que haga clic en el botón "Reducir", el valor disminuirá; cuando haga clic en "Eliminar el evento de operación de disminución", el valor no cambiará después de hacer clic en el botón de disminución.

3. Métodos de instancia y ciclo de vida

1、vm.$montar

   La función de este método de instancia es: si la instancia no recibe la opción el, estará en el estado "desmontado", porque no hay ningún elemento DOM asociado con ella. Los montajes manuales se pueden realizar utilizando este método de montaje.

2、vm.$destruir

Este método de instancia se usa principalmente para destruir completamente una instancia, borrar las conexiones a otras instancias y descartar todas las directivas y detectores de eventos.

3、vm.$nextTick

La función de devolución de llamada en este método de instancia se retrasa hasta que se actualiza el DOM, pero si el evento DOM lo realiza la función de enlace creada en el ciclo de vida de vue, debe colocarse en la función de devolución de llamada de .nextTick. Puede usar .nextTick inmediatamente después de que cambien los datos, de modo que se pueda llamar a la función de devolución de llamada después de que se complete la actualización del DOM.

Lo entendemos a través de ejemplos de código:

Código de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h2 ref="first">{
   
   {first}}</h2>
<h3 ref="secnd">{
   
   {second}}</h3>
<input type="text" v-model="msg">
<p>{
   
   {msg}}</p>
<button onclick="destroy()">销毁</button>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
let vm = new Vue({
    data:{
    msg:"看到你就烦",
    first:'1',
    second:'2',
    },

});
vm.$mount('#app');
vm.first = '丘比特';
vm.second = vm.$refs.first.textContent;
console.log(vm.second);


Vue.nextTick(function(){
    vm.second = vm.$refs.first.textContent;
    console.log(vm.second);
})
function destroy(){
    vm.$destroy();
}
    </script>
</body>

</html>

Resultado de la ejecución: podemos ver que la consola de la consola es 'Cupido', y el valor de ejecutar vm.$nextTick es el valor en msg: 'Es molesto verte', y la página también se actualizará de forma sincrónica. Cuando hace clic en 'Destruir' y luego escribe el valor, el texto, etc. en el cuadro de texto, se ha destruido y no se actualizará.

Supongo que te gusta

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