Vue3 – 高级语法补充

1 Vue中自定义指令

2 Vue内置组件Teleport

3 Vue内置组件Suspense

4 Vue中安装插件的方式

5 Vue中渲染函数的使用

6 Vue中编写jsx的语法

Vue中自定义指令

自定义指令的绑定方法有两种，一种是局部的，一种是全局的。

指令可以将部分js代码转换成指令的方式来使用，js功能的代码可以分成直接在单独页面设置使用，还可以抽取成hooks函数调用。下面这个js代码的功能是进入这个页面的时候马上获取输入框焦点。

直接在页面创建的方法：

抽取成hooks：放在了./hooks/useInput里面

import { ref, onMounted } from 'vue';

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

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

  return { inputRef }
}

使用指令的方式来实现上述的功能：

局部指令：可以用vue2的options api方法写，也可以是vue3的setup写法

在setup里面写指令一定要用v+大写字母才能是指令

全局指令的使用是在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")

注意：直接写在main。js里面会让main。js变得很庞大，我们可以抽取出来做成一个directive的文件夹2中写法：

focus.js代码：

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

main.js和index.js代码：

1、

index.js：

 

2、

index.js：

 

 

自定义指令有自己每个阶段的生命周期。

指令的修饰符

自定义指令小案例一

想要给数字添加对应的符号

在指令文件夹里面创建unit.js并输入

这个指令可以输入默认值，也可以直接设置用户输入的值。用户输入的时候直接在指令后面添加冒号和值。  例如：   v-unit="参数"

 在指令文件夹的入口文件添加指令

 main.js

想要使用指令的地方

 

 

自定义指令小案例二

将时间戳转换成MM-MM-DD等等的格式

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
    }
  })
}

还有一些关于管理员登录后权限的问题，普通管理员能够操作的功能少，可以通过指令来判断和限制显示的结果。

Vue内置组件Teleport

将你写的组件（也可以是普通标签）传输到其他位置，是真的挂载过去了，页面会有变化。

大概主要是用在js控制的。

Vue内置组件Suspense

将组件变成一个异步的，当页面加载时，页面需要去加载这个组件，在没加载出来之前可以先显示默认的提示，等加载好之后把提示清除替换成指定组件。

Vue中安装插件的方式

作用之一是用在app里面

可以将本来分开的app传入的到函数里面转变成链式调用的写法
类似于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")

Vue中渲染函数的使用

template模板会执行render函数，把标签转换成虚拟DOM。

h函数就是createVNode函数：

 

我们可以把template删除掉，改用render来自己渲染，而render函数需要返回一个createVNode，此时可以用h函数来代替，使用方法一样的。

基本使用： 

_render函数计数器实现：

render渲染组件：

使用vue3来实现上面的功能：

// 这个template里面的render标签是setup语法糖的要求的写法。setup函数不用写这个。