第十三节：Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件
一. render/h函数(了解)
详见：https://v3.cn.vuejs.org/guide/render-function.html#dom-树
二. jsx(了解)
Vue3.x版本创建的项目使用jsx已经不需要配置babel了。
代码分享：
<script> import HelloWorld from './HelloWorld.vue'; export default { data() { return { counter: 0 } }, render() { const increment = () => this.counter++; const decrement = () => this.counter--; return ( <div> <h2>当前计数: {this.counter}</h2> <button onClick={increment}>+1</button> <button onClick={decrement}>-1</button> <HelloWorld> </HelloWorld> </div> ) } } </script>
组件代码：
<script> export default { render() { return ( <div> <h2>HelloWorld</h2> {this.$slots.default ? this.$slots.default(): <span>哈哈哈</span>} </div> ) } } </script>
三. 自定义指令
（https://v3.cn.vuejs.org/guide/custom-directive.html#简介）
1. 说明
(1). 在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令(directive)。
注意：在Vue中，代码的复用和抽象主要还是通过组件；
通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；
(2). 自定义指令分为两种：
局部指令：组件中通过 directives 选项，只能在当前组件中使用；
全局指令：app的 directive 方法，可以在任意组件中被使用；
补充1个例子：input标签自动聚焦，原始写法。
<template> <div> <input type="text" ref="myInput"> </div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { var myInput = ref(null); // 挂载完成后 onMounted(()=>{ myInput.value.focus(); }) return { myInput } } } </script>
(3). 指令的生命周期
import { createApp } from 'vue'
const app = createApp({})
// 注册
app.directive('my-directive', {
// 指令是具有一组生命周期的钩子：
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 绑定元素的父组件被挂载时调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 卸载绑定元素的父组件时调用
unmounted() {}
})
(4). 生命周期钩子函数传递的参数
directives: {
focus: {
mounted(el, bindings, vnode, preVnode) {
el.focus();
}
}
}
A. el
指令绑定到的元素。这可用于直接操作 DOM。
B. bindings
C. vnode
上面作为 el 参数收到的真实 DOM 元素的蓝图
D. preVnode
上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。
2. 局部指令
自定义一个 v-focus 的局部指令
(1). 这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可；它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）；
(2). 自定义指令有一个生命周期，是在组件挂载后调用的 mounted，我们可以在其中完成操作；
代码分享：
<template> <div> <input type="text" v-focus> </div> </template> <script> export default { // 局部指令 directives: { focus: { mounted(el, bindings, vnode, preVnode) { el.focus(); } } }, } </script>
3. 全局指令
一个全局的v-focus指令可以让我们在任何地方直接使用，在main.js中编写。
var app =createApp(App); // 全局自定义指令 app.directive('focus',{ mounted(el) { el.focus(); } }) app.mount('#app')
4. 指令参数、修饰符
通过 bindings 获取到对应的内容
<template> <div> <button v-if="counter < 2" v-ypf.aaaa.bbbb="'hello lmr'" @click="increment">当前计数: {{counter}}</button> </div> </template> <script> import { ref } from "vue"; export default { // 局部指令 directives: { ypf: { created(el, bindings, vnode, preVnode) { console.log("ypf created", el, bindings, vnode, preVnode); console.log(bindings.value); console.log(bindings.modifiers); }, } }, setup() { const counter = ref(0); const increment = () => counter.value++; return { counter, increment } } } </script>
5. 案例-时间格式化指令
(1). 说明
(2). 实操
需要安装dayjs包
import dayjs from 'dayjs';
export default function(app) {
app.directive("format-time", {
created(el, bindings) {
bindings.formatString = "YYYY-MM-DD HH:mm:ss";
if (bindings.value) {
bindings.formatString = bindings.value;
}
},
mounted(el, bindings) {
const textContent = el.textContent;
let timestamp = parseInt(textContent);
if (textContent.length === 10) {
timestamp = timestamp * 1000
}
el.textContent = dayjs(timestamp).format(bindings.formatString);
}
})
}
四. 内置组件teleport
参考官网：https://v3.cn.vuejs.org/guide/teleport.html#与-vue-components-一起使用
五. 插件
1. 说明
(1). 通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：
对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
函数类型：一个function，这个函数会在安装插件时自动执行；
(2). 插件可以完成的功能没有限制，比如下面的几种都是可以的：
A. 添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现；
B. 添加全局资源：指令/过滤器/过渡等；
C. 通过全局 mixin 来添加一些组件选项；
D. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能；
2. 实战
(1). 插件代码
plugins_function.js
// 函数形式 export default function(app) { console.log(app); }
plugins_object.js
// 对象形式 export default { name: 'test1', install(app) { app.config.globalProperties.$name = "ypf" } }
(2). 使用
import { createApp } from 'vue'
var app =createApp(App);
// 插件的调用
import pluginsfunction from './components/05_插件/plugins_function.js';
import pluginsobject from './components/05_插件/plugins_object.js';
app.use(pluginsfunction);
app.use(pluginsobject);
app.mount('#app')
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
