一、Vue中自定义指令
认识自定义指令
在Vue的模板语法中 我们学了很多指令 除了这些指令 Vue也允许我们自己定义自己的指令
注:在Vue中,代码的复用和抽象 主要还是通过组件;
通常在某些情况下,你需要对DOM元素进行底层操作,这个时候就会用到 自定义指令
自定义指令分为两种:
自定义局部指令: 组件中通过 directives选项 只能在当前组件中使用
自定义全局指令: app的 directive方法 可以在任意组件中使用
当我们来做一个非常简单的案例:当某个元素挂载完成后可以自动获取焦点
实现方式一:使用默认的实现方式
JavaScript // 在template中 <!-- 方式一 默认方法 --> <!-- <input type="text" ref="inputRef"> --> <!-- 方式二 封装hooks --> <!-- <input type="text" ref="inputRef"> --> // 在setup中 // 方式一: 默认方法 拿到 焦点 但是在很多的时候 就需要写很多 // import { onMounted, ref } from 'vue'; // const inputRef = ref() // onMounted(()=>{ // inputRef.value?.focus() // }) // 方式二 封装 hooks import useInput from './hooks/useInput' const { inputRef } = useInput() // 方式一跟方式二 都是 定义ref 绑定到input中 调用focus // 封装的hooks中 import { onMounted, ref } from 'vue'; export default function useInput() { const inputRef = ref() onMounted(() => { inputRef.value?.focus() }) return { inputRef } }
实现方式二:自定义一个 v-focus的局部指令;
这个自定义指令非常简单,我们只需要在组件选项中使用directives即可
它是一个对象,在对象中编写我们的自定义指令的名称(这里不需要加v-)
自定义指令有一个生命周期,是在组件挂载后调用的mounted 我们可以在其中完成操作
JavaScript // Options API中 <script> export default { directives:{ focus:{ // 生命周期函数(自定义指令) mounted(el){ el.focus() } } } } </script> // 在setup当中 // 必须以 v 加 大写字母开头的自定义名称 const vFocus = { mounted(el) { el.focus() } }
实现方式三:自定义一个 v-focus的全局指令
JavaScript // 全局 自定义指令 app.directive('focus',{ mounted(el) { el.focus() } })
指令的生命周期
指令定义的对象,Vue提供了以下的钩子函数:
Created: 绑定的元素attribute 或事件监听器被应用之前调用
beforeMount: 当指令第一次绑定到元素并且在挂载父组件之前调用
Mounted: 在绑定元素的父组件被挂载后调用
beforeUpdate:在更新包含组件的VNode之前调用
Updated: 包含组件的VNode及其子组件的VNode更新后调用
beforeUnmount:在卸载绑定元素的父组件前调用
unmounted:当指令与元素解绑且父组件已卸载时,只调用一次
指令的参数和修饰符
如果我们指令 需要接受一些参数或修饰符 呢?
james是参数的名称 abc,cba是修饰符的名称 后面是传入的值
在我们的生命周期中,可以通过 bindings获取到对应的内容:
JavaScript <!-- 这里的 james 是参数 .abc.cba是修饰符 --> <!-- 1 参数 修饰符 值 --> <!-- <h2 v-Xiong:james.abc.cba="msg">哈哈哈</h2> --> // --------------------------------------- const vXiong = { mounted(el, bindings) { // console.log(bindings) // 是一个对象 // el.textContent = 'xxx' el.textContent = bindings.value } }
二、Vue内置组件Teleport
认识Teleport
在组件化开发中,封装一个组件A 在另外一个组件B中使用:
那么 组件A中的template元素,会被挂载到组件B中template的某个位置;
最终 应用程序会形成一颗 DOM树结构
但在一些情况下,希望 组件不是挂载在这个组件树上的,可能是移动到Vue app之外的其他位置:
如:移动到body元素上.或者我们有 其他的div#app之外的元素上,
这个时候我们就可以通过teleport来完成;
Teleport是什么?
他是一个 Vue提供的内置组件 类似于react的Portals
teleport翻译过来是 心灵传输,远距离运输的意思
它有两个属性:
To: 指定将其中的内容移动到目标元素,可以使用选择器
disabled:是否禁用teleport的功能
和组件结合使用
teleport也可以和组件结合一起来使用:
当我们在teleport中使用组件,并且也可以给他传入一些数据
多个teleport
如果我们将 多个teleport应用到 同一个目标上(to的值相同) 那么这些 目标会进行合并
三、Vue内置组件Suspense
异步组件和Suspense
注:目前(2022年10月9日)Suspense显示的是一个实验性的特性,API随时可能会修改
Suspense是一个内置的全局组件,该组件有两个插槽:
Suspense是一个内置的全局组件,该组件有两个插槽:
default:如果default可以显示,那么显示default的内容
fallback:如果default无法显示,那么就会显示fallback插槽的内容;
(一般用于异步组件)
四、Vue中安装插件的方式
认识Vue插件
通常我们向Vue全局添加一些功能时 会采用插件的模式,它有两种编写模式:
对象类型:一个对象 必须包含一个install的函数,该函数会在安装插件时执行
函数类型:一个function 这个函数会在 安装插件时 自动执行
JavaScript // 方式一 : 传入对象的情况 app.use({ install:function(app) { // app.component()...... console.log("传入对象的install被执行:",app) } })
JavaScript // 方式二 : 传入函数的情况 app.use(function(app) { console.log("传入的函数直接被执行:",app) })
插件可以完成的功能没有限制,如下面几种都可以:
添加全局方法 或 property 通过把它们添加到config.globalProperties上实现
添加全局资源:指令/过滤器/过渡 等
通过 全局mixin 来添加一些组件选项
一个库,提供自己的API 同时 提供上面提到的一个或多个功能
插件的编写方式
对象类型的写法
JavaScript export default { name:"xXiong", install(app,options) { console.log("插件被安装:",app,options) console.log(this.name) } }
函数类型的写法
JavaScript export default function(app,options) { console.log("插件被安装:",app,options) }
五、Vue中渲染函数的使用
认识h函数
Vue推荐在大多数情况下使用模版来创建你的HTML 然后一些特殊的场景,你真的需要Js的完全编程能力,这个时候你可以使用 渲染函数 它比 模版更接近编译器
Vue在生成真实DOM之前 会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是 虚拟DOM(VDOM)
事实上,之前编写的template中的HTML 最终也是 使用渲染函数 生成 对应的VNode
那么 如果你想充分利用Js的编程能力,可以自己来写createVNode函数,生成对应的VNode
使用h()函数:
h()函数 是一个用于 创建vnode的一个函数;
其实更准确的命名是createVNode()函数,但是为了简便在Vue将之 简化为 h()函数
h()函数 如何使用?
h()函数 如何使用? => 他接受三个参数:
JavaScript // {Sting | Object | Function} tag // 一个HTML 标签名 一个组件 一个异步组件 或 一个函数式组件 // 必须的 'div',
JavaScript // {Object} props // 与attribute prop 和事件相对应的事件 // 我们会在模版中使用 // // 可选 {},
JavaScript // {String | Array | Object} children // 子VNodes 使用h() 构建 // 或使用字符串获取 '文本 VNode' 或 有插槽的对象 // // 可选 [ 'Some text comes first', h('h1','A headline'), h(MyComponent,{someProp:'foobar'}) ]
图解(一)
注意事项:
如果 没有props 那么通常可以 将children作为第二个参数传入;
如果产生歧义,可以将 null作为第二个参数传入,将children作为第三个参数传入
h函数的使用过程
h函数可以在两个地方使用:
render函数选项中;
setup函数选项中(setup本身需要是一个函数类型,函数再返回h函数创建的新VNode)
JavaScript import { h } from 'vue'; export default { render() { // h传递3个参数 (标签名) ({ 对应的属性 }) (内容) // 如果 有 子标签的话 就在第三个参数里 写对象 // 写一个计数器 案例 return h("div", { class: "app" }, [ h("h2", null, `当前计数:${this.counter}`), h("button", { onClick: this.increment }, "+1"), h("button", { onClick: this.decrement }, "-1"), // 渲染组件 h(Home) ]) } }
JavaScript // setup中 import { h, ref } from 'vue'; import Home from './Home.vue' export default { // 在setup函数 setup() { const counter = ref(0) const increment = () => { counter.value++ } const decrement = () => { counter.value-- } return () => h("div", { class: "app" }, [ h("h2", null, `当前计数:${counter.value}`), h("button", { onClick: increment }, "+1"), h("button", { onClick: decrement }, "-1"), // 渲染组件 h(Home) ]) } }
六、Vue中编写jsx的语法
jsx的babel配置
如果我们希望在项目中使用jsx,需要添加对jsx的支持;
jsx通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的)
对于Vue来说,我们只需要在Babel中配置对应的插件即可
安装Babel支持Vue的jsx插件:
JavaScript npm install @vue/babel-plugin-jsx -D |
在 babel.config.js配置文件 中配置插件:
JavaScript module.exports = { presets:['@vue/cli-plugin-babel/preset'], plugins:['@vue/babel-plugin-jsx'] }
如果是Vite环境,需要安装插件:
JavaScript npm install @vitejs/plugin-vue-jsx -D |
