Inicio rápido de VUE2 (6) --- Ejemplos de propiedad (enfoque)

También hay muchos ejemplos en VUE, hablemos de estos ejemplos

VIEW2

Datos

Definiremos datos en el componente

data() {
    return {
      text: "I,dog",
      show: true,
      post: { name: "代码哈士奇", id: 741741741 },
      datas:[{ name: "代码哈士奇", id: 1 },{ name: "哈哈", id: 2 }],
      lookData: ""
    };
  },

Generalmente, cuando leemos esto y el texto directamente, podemos obtener "Yo, perro".
De hecho, podemos escribir así

this.$data.text

El efecto es el mismo.

De hecho, los datos se introducen a través de la propiedad

Hablaré de ello en detalle en este artículo.

Accesorios de padre e hijo

Hablamos de ello antes cuando usamos slots.
Portal: Componentes
Igual que los datos, según la documentación

La instancia del componente delega el acceso a su propiedad de objeto props.

Llame,
p. Ej.

props: ["mdshowd"],


 console.log(this.$props.mdshowd)或者 console.log(this.mdshowd)

Generalmente usa this.mdshowd

Obtener referencias de elementos

Obtenga el elemento o componente con el atributo ref, el
uso es el siguiente

Nota: el modelo es un componente de nuestra propia definición, el artículo detallado se puede ver ranura

 <model :mdshowd="show" @close="show = true" ref="modelOne">
 </model>

Método de llamada

this.$refs.modelOne

Imprimirlo

console.log(this.$refs.modelOne)

Usar escenario
Obtener propiedades de archivo o elemento / componente

Obtener atributo de elemento el

Es uno de los atributos obtenidos por ref.

Puede entenderse como
el contenido obtenido por document.getElementById ()

<model :mdshowd="show" @close="show = true" ref="modelOne" >
</model>

  console.log(this.$refs.modelOne.$el)
  console.log(this.$refs.modelOne)
  console.log(document.getElementById("one"))

Se puede ver aquí que tiene el mismo efecto que document.getElementById ()

Opciones de atributos de instancia

La lectura de los
datos de atributos de la instancia escribirá algunos datos,
pero fuera de los datos, por ejemplo, agregamos un atributo a la página actual.

data() {
    return {
      text: "I,dog"
    };
  },
dmhsq: "dog"//这里没有写在data里面

Entonces, ¿cómo leerlo?

this.$options.dmhsq

¿Y si imprimimos directamente?

console.log(this.$options)

Ver dmhsq, en realidad soy yo.
Aquí están todos los atributos de este ejemplo.
Por supuesto, también vemos que el atributo principal significa padre.
Luego, mira ⬇

Instancia principal

Obtener la instancia principal Por
ejemplo, si utilizo el modelo en la instancia de prueba, entonces la prueba es la instancia principal del modelo y la instancia principal
de la prueba es la aplicación que montamos $ mount ("# app");

La premisa es

this.$parent

Lo imprimimos

console.log(this.$parent)

Después de desplegar,
descubrimos que en realidad es exactamente igual que el padre en las opciones. De hecho, padre también es un atributo de la instancia.

Raíz de instancia raíz

Lea la instancia raíz, si la instancia principal no se usa, vuelva a sí misma

this.$root

Por ejemplo, si utilizo el modelo en la instancia de prueba, prueba es la instancia principal del modelo y la aplicación es la instancia raíz.
Imprimimos en el modelo

console.log(this.$root)

Se encuentra que la instancia con id = app en el es la instancia raíz.
También podemos encontrar nuestro modelo en los hijos de sus hijos.

Ranuras

Acceder al contenido de la ranura

this.$slots

Usamos modelo como ranura

Llamado de la siguiente manera en la instancia principal

<template>
  <div>
    <div v-for="item in datas" :key="item.id">
      <div>{
   
   {item.name}}==={
   
   {item.id}}</div>
      <button @click="look(item)">查看</button>
    </div>
    <model :mdshowd="show" @close="show = true" ref="modelOne" id="one">
      <template slot="title">{
   
   {lookData.name}}</template>
      <template slot="message">
        我叫{
   
   {lookData.name}},我的代号是{
   
   {lookData.id}}
      </template>
      <template slot="btnGroup">
        <button @click="closeLook">关闭</button>
      </template>
    </model>
  </div>
</template>

Nuestras ranuras distribuyen contenido
porque lookData es [{nombre: "Code husky", id: 1}, { nombre: " ha", id: 2}] en el que puede ver una parte detallada de la
ranura impresión

console.log(this.$slots)

Como puede ver, el contenido de los dos tiempos es diferente,
y estos contenidos se obtienen a través de este. $ Slots

Atributos de abuelos

Obtenga el contenido que no es de utilería en el componente principal

$attrs

Si llama a imprimir en la instancia secundaria

console.log(this.$attrs)

Puede verse de la siguiente manera

Pasemos el valor a través de generaciones. El
componente abuelo es prueba, el
componente padre es modelo y el
hijo es modelo
fácil . El código del modelo fácil es el siguiente

<template>
  <div>
    <button @click="onDo">点击</button>
  </div>
</template>

<script>
export default {
     
     
  name: "EasyModel",
  methods:{
     
     
    onDo(){
     
     
      console.log(this.$attrs)
    }
  }
};
</script>

Introducir y pasar $ attrs en el modelo es en realidad el padre al niño, el abuelo al nieto, que
es el modelo, y el t de tes al modelo fácil.

 <easy-model v-bind="$attrs"></easy-model>

prueba

 <model :mdshowd="show" @close="show = true" ref="modelOne" id="one" msg="haha" >
 </model>

Luego miramos los resultados impresos para

completar la herencia intergeneracional

Propiedad clave ★★★

Primero
echemos un vistazo al código de vue. En ode_modules \ vue \ types \ options.d.ts, se define la referencia que incluye el ciclo de vida. Inserte la descripción de la imagen aquí.
Por supuesto, no
usé esa capacidad y tiempo para profundizar más. Encontramos vue.d.ts Encontrado en

¿Encontramos algo en la propiedad debajo de la impresión de la consola ? Los ejemplos de uso común están aquí, y los hemos montado cuando nos referimos a la página de creación.

Instancia personalizada

En main.js

Vue.prototype.dmhsq = "I,dog"

En nuestro componente

  console.log(this.dmhsq)

Escenarios de uso
Puede definir algunas variables globales para usar

Método de instancia personalizado

En main.js

function myTest(){
  console.log("我是可爱的狗子")
}

Vue.prototype.myTest = myTest;**加粗样式**

Llame en cualquier página

escenas que se utilizarán

Un método para introducir globalmente archivos js

Escriba sus propios js como util.js

function myTest(){
  console.log("我是可爱的狗子")
}

export  {myTest}

En main.js

import {myTest} from "./util/util";

Vue.prototype.myTest = myTest;

Importar todo el archivo js globalmente

Escribe util.js así

export default {
  myTest(){
    console.log("嘿,I,dog");
  }
}

En main.js

import util from "./util/util";

Vue.prototype.util = util;

En la instancia

this.util.myTest()

Método de instancia

Monitor $ reloj

Los cambios de supervisión pueden ser expresiones, valores únicos o propiedades

<input v-model="testData" />

 this.$watch(()=>this.testData,()=>{
      console.log(this.testData)
    })

También podemos monitorear los cambios de los subcomponentes. Por ejemplo, monitoreamos los accesorios del modelo: ["mdshowd"]

 this.$watch(()=>this.mdshowd, () => {
        console.log(this.mdshowd);
    })

Monitorear los cambios internos del objeto o matriz no se activará.
Hacemos clic para cambiar el valor de post.name, pero la publicación es inútil para ser monitoreada por cambios.

Si queremos monitorear cambios internos, debemos profundizar

profundo

Pasar el valor de la publicación a la subinstancia del modelo

<model :mdshowd="show" @close="show = true" ref="modelOne" id="one" msg="haha" :d-list=post >
</model>

Escuche los cambios en la instancia secundaria

this.$watch(
      () => this.dList,
      () => {
        console.log("dog wang wang!");
      },
      { deep: true }
    );
  }

El efecto es el siguiente

No escuchar

como sigue

 const haha = this.$watch(
      () => this.dList,
      () => {
        console.log("dog wang wang!");
      },
      { deep: true }
    );
    haha();//在你需要监听的地方掉用，就只会监听一次
    console.log(haha())
  }

inmediato

Igual que el método de apertura profunda, agregar puede devolver inmediatamente el resultado de la ejecución de la función de devolución de llamada

Agregar inmediato invalidará la cancelación del monitoreo.
Llamar jaja monitoreo.
Si llamamos jaja adentro jaja

const haha = this.$watch(
      () => this.dList,
      () => {
        haha();
        console.log("dog wang wang!");
      },
      { deep: true,
      immediate:true}
    );
    haha();

Notificará un error. El

documento brinda la solución para detectar la disponibilidad de la función

let haha = null
    haha = this.$watch(
      () => this.dList,
      () => {
        if (haha){
          haha();
        }
        console.log("dog wang wang!");
      },
      { deep: true,
      immediate:true}
    );

emitir

Desencadenar eventos en la instancia actual, que a menudo se usa para que los componentes secundarios escuchen eventos de componentes principales o eventos personalizados

En subcomponente

 this.$emit("close");

Componente padre

<model :mdshowd="show" @close="show = true" ref="modelOne" id="one" msg="haha" :d-list=post >
</model>

Equivalente a llamar a un evento personalizado

forceUpdate

this.$forceUpdate();

Forzar la reproducción, solo se afecta a sí mismo y la
actualización del disparador de la ranura

 shuaxin() {
      this.$forceUpdate();
    },
 updated() {
    console.log("我更新了哈哈")
  },

Si los datos solicitados no se procesan a tiempo, debemos llamarlos.
Si obtenemos los datos del fondo , debemos establecer el v-if en el v-for.
Cuando los datos del elemento cambian, el v-if debe usarse
forceUpdate.

$ nextTick

Se utiliza cuando los datos no están actualizados
, como

 <button @click="shuaxin">shuaxin</button>
 shuaxin() {
      this.testData = 2;
      console.log(this.$refs.pp.innerText);
      this.$nextTick(()=>{
        console.log(this.$refs.pp.innerText);
      })
    },

Después de algunas solicitudes de datos, no se pueden obtener nuevos datos de inmediato, como solicitar el fondo para obtener nuevos datos, si no puede obtener los nuevos datos a tiempo para hacer algún procesamiento, debe llamarlo

Nuevas funciones de VUE3

Vue.property.app.config.globalProperties ya no se usa al establecer propiedades globales
.

Recuerda practicar

  Hola a todos, soy un code husky, un estudiante de ingeniería de redes en la Facultad de Software, porque soy un "perro" y puedo comer carne a miles de kilómetros. Quiero compartir lo que aprendí en la universidad y progresar con todos. Sin embargo, debido al nivel limitado, inevitablemente habrá algunos errores en el blog. Si hay alguna omisión, ¡házmelo saber! Por el momento, solo actualice en la plataforma csdn, la página de inicio del blog: https://blog.csdn.net/qq_42027681 .

未经本人允许，禁止转载

Se lanzará más tarde

Front-end: vue entrada vue subprograma de desarrollo, etc.
Back-end: entrada java entrada springboot, etc.
Servidor: servidor de entrada MySQL instrucciones simples servidor en la nube para ejecutar el proyecto
python: recomendado no calentar, asegúrese de ver
el uso de algunos complementos, etc.

El camino de la universidad también está en uno mismo, estudiar mucho, juventud
con pasión. Si te interesa la programación, puedes unirte a nuestro grupo qq para comunicarnos juntos: 974178910

Si tiene alguna pregunta, puede dejar un mensaje a continuación, le responderé si lo ve