Vue3 – Suplemento de sintaxis avanzada

1 Instrucciones personalizadas en Vue

2 componentes integrados de Vue Teleport

Suspenso del componente incorporado de 3 Vue

4 Cómo instalar complementos en Vue

5 Uso de funciones de renderizado en Vue

6 Sintaxis para escribir jsx en Vue

Directivas personalizadas en Vue

Hay dos métodos de enlace para instrucciones personalizadas, uno es local y el otro es global.

Las instrucciones se pueden usar convirtiendo parte del código js en instrucciones. El código de función js se puede dividir en configuraciones y usarse directamente en una página separada, o se puede extraer en llamadas a funciones de gancho. La función del siguiente código js es obtener el foco del cuadro de entrada inmediatamente al ingresar a esta página.

Método para crear directamente en la página:

<template>
  <div class="app">
    <!-- <input type="text" ref="inputRef"> -->
    <input type="text" v-focus>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
function useInput() {
  const inputRef = ref()

  onMounted(() => {
    inputRef.value?.focus()
  })
}

</script>

<style scoped>

</style>

Extraído en ganchos: colocado en ./hooks/useInput

import { ref, onMounted } from 'vue';

export default function useInput() {
  const inputRef = ref()

  onMounted(() => {
    inputRef.value?.focus()
  })

  return { inputRef }
}

<template>
  <div class="app">
    <input type="text" ref="inputRef"> 
  </div>
</template>

<script setup>
 1.方式一: 定义ref绑定到input中, 调用focus
 import useInput from "./hooks/useInput"
 const { inputRef } = useInput()
</script>

<style scoped>

</style>

Utilice instrucciones para implementar las funciones anteriores:

Instrucciones locales: se pueden escribir con el método api de opciones de vue2 o el método de configuración de vue3

Al escribir comandos en la configuración, debe usar v+mayúsculas para que sean comandos

<template>
  <div class="app">
    <!-- <input type="text" ref="inputRef"> -->
    <input type="text" v-focus>
  </div>
</template>

 <script>
  // 1.方式一:
  export default {
    directives: {
      focus: {
        // 生命周期的函数(自定义指令)
        mounted(el) {
          // console.log("v-focus应用的元素被挂载了", el)
          el?.focus()
        }
      }
    }
  }

</script> 

<script setup>


 2.方式二: 自定义指令(局部指令)这里一定要用v+大写字母才能是指令
 const vFocus = {
  // 生命周期的函数(自定义指令)
   mounted(el) {
     // console.log("v-focus应用的元素被挂载了", el)
     el?.focus()
   }
 }

</script>

<style scoped>

</style>

El uso de instrucciones globales está escrito en main.js:

import { createApp } from 'vue'

// 自定义指令的方式一:
// const app = createApp(App)

// 全局指令1：
  app.directive("focus", {
    // 生命周期的函数(自定义指令)
    mounted(el) {
      // console.log("v-focus应用的元素被挂载了", el)
      el?.focus()
    }
  })
createApp(App).mount("#app")

Nota: Escriba directamente en main. Habrá main en js. js se ha vuelto muy grande, podemos extraerlo y convertirlo en una carpeta directiva 2:

código focus.js:

export default function directiveFocus(app) {
  app.directive("focus", {
    // 生命周期的函数(自定义指令)
    mounted(el) {
      // console.log("v-focus应用的元素被挂载了", el)
      el?.focus()
    }
  })
}

Código main.js e index.js:

1 、

índice.js:

 

2 、

índice.js:

 

 

Las directivas personalizadas tienen su propio ciclo de vida para cada fase.

modificadores de directivas

<template>
  <div class="app">
    <button @click="counter++">+1</button>

    <!-- 1.参数-修饰符-值 -->
    <!-- <h2 v-why:kobe.abc.cba="message">哈哈哈哈</h2> -->

    <!-- 2.价格拼接单位符号 -->
    <h2 v-unit> {
    
    { 111 }} </h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const counter = ref(0)

const message = '你好啊, 李银河'

const vWhy = {
  mounted(el, bindings) {
    console.log(bindings)
    el.textContent = bindings.value
  }
}

</script>

<style scoped>

</style>

Pequeño estuche de instrucciones personalizado 1

Quiere agregar los símbolos correspondientes a los números

Cree unit.js en la carpeta de comandos e ingrese

Este comando puede ingresar un valor predeterminado o establecer directamente el valor ingresado por el usuario. Cuando el usuario ingresa, agregue dos puntos y un valor directamente después del comando. Por ejemplo: v-unit="parámetro"

 Agregue instrucciones al archivo de entrada en la carpeta de instrucciones

 principal.js

donde quieres usar el comando

 

 

Estuche pequeño con instrucciones personalizadas 2

Convertir marca de tiempo al formato MM-MM-DD, etc.

<template>
  <div class="app">
    <button @click="counter++">+1</button>

    <!-- 1.参数-修饰符-值 -->
    <!-- <h2 v-why:kobe.abc.cba="message">哈哈哈哈</h2> -->

    <!-- 2.价格拼接单位符号 -->
    <h2 v-unit> {
    
    { 111 }} </h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const counter = ref(0)

const message = '你好啊, 李银河'

const vWhy = {
  mounted(el, bindings) {
    console.log(bindings)
    el.textContent = bindings.value
  }
}

</script>

<style scoped>

</style>

ftime.js:

import dayjs from 'dayjs'

export default function directiveFtime(app) {
  app.directive("ftime", {
    mounted(el, bindings) {
      // 1.获取时间, 并且转化成毫秒
      let timestamp = el.textContent
      if (timestamp.length === 10) {
        timestamp = timestamp * 1000
      }

      timestamp = Number(timestamp)

      // 2.获取传入的参数
      let value = bindings.value
      if (!value) {
        value = "YYYY-MM-DD HH:mm:ss"
      }

      // 3.对时间进行格式化
      const formatTime = dayjs(timestamp).format(value)
      el.textContent = formatTime
    }
  })
}

También existen algunos problemas con respecto a los permisos del administrador después de iniciar sesión. Los administradores comunes pueden operar algunas funciones y pueden juzgar y limitar los resultados mostrados mediante instrucciones.

Teletransporte del componente integrado de Vue

Transfiera el componente que escribió (también puede ser una etiqueta normal) a otra ubicación. Si realmente está montado, la página cambiará.

Probablemente se utilice principalmente en el control js.

<template>
  <div class="app">
    <div class="hello">
      <p class="content">
        <!-- <teleport to="body">
          <hello-world/>
        </teleport> -->
        <teleport to="#abc">
          <hello-world/>
        </teleport>
      </p>
    </div>

    <div class="content">
      <teleport to="#abc">
        <h2>哈哈哈哈哈</h2>
      </teleport>
    </div>
  </div>
</template>

<script setup>

import HelloWorld from "./HelloWorld.vue"

</script>

<style scoped>

</style>

Suspenso del componente incorporado de Vue

Convierta el componente en uno asíncrono. Cuando se carga la página, la página necesita cargar este componente. Antes de cargarlo, se puede mostrar el mensaje predeterminado. Después de la carga, el mensaje se borra y se reemplaza con el componente especificado.

<template>
  <div class="app">
    <suspense>
      <template #default>
        <async-home/>
      </template>
      <template #fallback>
        <h2>Loading</h2>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))

</script>

<style scoped>

</style>

Cómo instalar complementos en Vue

Una de las funciones es usarla en la aplicación.

Puede convertir la aplicación originalmente separada en la función en una llamada en cadena,
similar a createApp(App).use(directives).mount("#app")

import { createApp } from 'vue'
import directives from "./01_自定义指令/directives/index"
import router from "./router"


// 自定义指令的方式一:
// const app = createApp(App)
// // useDirectives(app)
// directives(app)
// app.mount('#app')

// 自定义指令的方式二:使用插件
createApp(App).use(directives).use(router).mount("#app")

El uso de funciones de renderizado en Vue.

La plantilla de plantilla ejecutará la función de renderizado para convertir la etiqueta en un DOM virtual.

La función h es la función createVNode:

 

Podemos eliminar la plantilla y usar render para renderizar nosotros mismos. La función de render necesita devolver un createVNode. En este momento, podemos usar la función h en su lugar. El método de uso es el mismo.

Uso básico: 

_render implementación del contador de función:

<script>
  import { h } from 'vue'
  import Home from "./Home.vue"

  export default {
    data() {
      return {
        counter: 0
      }
    },

    render() {
      return h("div", { className: "app" }, [
        h("h2", null, `当前计数: ${this.counter}`),
        h("button", { onClick: this.increment }, "+1"),
        h("button", { onClick: this.decrement }, "-1"),
        h(Home)
      ])
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  }
</script>

<style scoped>

</style>

componente de renderizado:

<script>
  import { h } from 'vue'
  import Home from "./Home.vue"

  export default {
   

    render() {
      return h("div", { className: "app" }, [
        h(Home)
      ])
    }
   
  }
</script>

<style scoped>

</style>

Utilice vue3 para implementar las funciones anteriores:

// 这个template里面的render标签是setup语法糖的要求的写法。setup函数不用写这个。
<template>
  <render/>
  <h2 class="">内容</h2>
</template>

<!-- <script>
  import { h, ref } from 'vue'
  import Home from "./Home.vue"

  export default {
    setup() {
      const counter = ref(0)

      const increment = () => {
        counter.value++
      }
      const decrement = () => {
        counter.value--
      }

      return () => h("div", { className: "app" }, [
        h("h2", null, `当前计数: ${counter.value}`),
        h("button", { onClick: increment }, "+1"),
        h("button", { onClick: decrement }, "-1"),
        h(Home)
      ])
    }
  }
</script> -->

<script setup>

import { ref, h } from 'vue';
import Home from './Home.vue'

const counter = ref(0)

const increment = () => {
  counter.value++
}
const decrement = () => {
  counter.value--
}

const render = () => h("div", { className: "app" }, [
  h("h2", null, `当前计数: ${counter.value}`),
  h("button", { onClick: increment }, "+1"),
  h("button", { onClick: decrement }, "-1"),
  h(Home)
])

</script>

<style scoped>

</style>